/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@layer reset, base;

:root{
  --font-body: "Lato", sans-serif;

  --color-base-50:#ffffff;
  --color-base-900:#242424;
  --color-base-950:#000000;

  --color-elk-blue-50:#F5F5FC;
  --color-elk-blue-100:#EFEEFC;
  --color-elk-blue-200:#CFCBF6;
  --color-elk-blue-300:#B2B4F1;
  --color-elk-blue-400:#4C54DF;
  --color-elk-blue-500:#4C54DF;
  --color-elk-blue-600:#4148DD;
  --color-elk-blue-700:#2426C7;
  --color-elk-blue-800:#1C1A93;
  --color-elk-blue-900:#161265;
  --color-elk-blue-950:#110C45;

  --color-elk-red-50:#FFF5F7;
  --color-elk-red-100:#FEEBEF;
  --color-elk-red-200:#FED7DE;
  --color-elk-red-300:#FDBAC6;
  --color-elk-red-400:#FC9CAD;
  --color-elk-red-500:#FB728C;
  --color-elk-red-600:#FA5674;
  --color-elk-red-700:#E53C5C;
  --color-elk-red-800:#D0062B;
  --color-elk-red-900:#9A0420;
  --color-elk-red-950:#680316;

  --color-elk-green-50:#F0FAF6;
  --color-elk-green-100:#E4F6F0;
  --color-elk-green-200:#C6ECDF;
  --color-elk-green-300:#A7E1CE;
  --color-elk-green-400:#7DD3B7;
  --color-elk-green-500:#50C49E;
  --color-elk-green-600:#3CB38C;
  --color-elk-green-700:#359C7A;
  --color-elk-green-800:#2C8265;
  --color-elk-green-900:#205F4A;
  --color-elk-green-950:#164133;

  --color-elk-yellow-50:#FFF7F0;
  --color-elk-yellow-100:#FFF1E5;
  --color-elk-yellow-200:#FFE4CC;
  --color-elk-yellow-300:#FFD3AD;
  --color-elk-yellow-400:#FFC38F;
  --color-elk-yellow-500:#FFAD65;
  --color-elk-yellow-600:#FF9233;
  --color-elk-yellow-700:#F57200;
  --color-elk-yellow-800:#CC5F00;
  --color-elk-yellow-900:#8F4300;
  --color-elk-yellow-950:#663000;
}

@layer reset, base;

:root{
  --font-body: "Lato", sans-serif;

  --color-base-50:#ffffff;
  --color-base-900:#242424;
  --color-base-950:#000000;

  --color-elk-blue-50:#F5F5FC;
  --color-elk-blue-100:#EFEEFC;
  --color-elk-blue-200:#CFCBF6;
  --color-elk-blue-300:#B2B4F1;
  --color-elk-blue-400:#4C54DF;
  --color-elk-blue-500:#4C54DF;
  --color-elk-blue-600:#4148DD;
  --color-elk-blue-700:#2426C7;
  --color-elk-blue-800:#1C1A93;
  --color-elk-blue-900:#161265;
  --color-elk-blue-950:#110C45;
}

@layer base {
  html { font-family: var(--font-body); }

  body { margin: 0; color: var(--color-base-900); background: var(--color-base-50); }

  *:focus-visible{
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: var(--color-elk-blue-500);
  }

  a { text-decoration: none; color: inherit; }

  h2{
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 900;
  }

  h3{
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
  }

  p{
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: var(--color-base-900);
  }

  img{
    border-radius: .375rem;
    max-width: 100%;
    height: auto;
  }

  ul { margin: 0; padding: 0; }

  .outer-wrapper--sm{ margin-left:auto; margin-right:auto; max-width:640px; }
  .outer-wrapper{ margin-left:auto; margin-right:auto; max-width:768px; }
  .outer-wrapper--lg{ margin-left:auto; margin-right:auto; max-width:1024px; }
  .inner-wrapper{ padding-left:1rem; padding-right:1rem; }

  .elk-focus-outline:focus-visible{
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: var(--color-elk-blue-500);
  }

  .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border-width:0;
  }

  .logo-img{ max-width:100%; height:auto; }

  .fill-elk-blue-50{ fill: var(--color-elk-blue-50); }
  .fill-elk-blue-100{ fill: var(--color-elk-blue-100); }
}