/* ==========================================================================
   USWDS Design System — Colors & Type Tokens
   Derived directly from @uswds/uswds develop: uswds-tokens + uswds-core.
   All values verbatim from the source SCSS/JSON tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   WEBFONTS — Google Fonts substitutions (Google-hosted equivalents of the
   official USWDS webfont files). The kit ships Public Sans, Source Sans Pro,
   Merriweather, and Roboto Mono as .ttf zips we can't yet extract — we use
   the Google Fonts builds as a 1:1 drop-in. Swap to local @font-face blocks
   in /fonts once the TTFs are unpacked.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..700;1,400..700&family=Source+Sans+3:ital,wght@0,300..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Roboto+Mono:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* ========================================================================
     SYSTEM COLORS — full USWDS 3.x palette (see uswds-tokens/colors/*.json)
     Naming: --uswds-{family}-{grade}  ·  grade suffix "v" = vivid
     ======================================================================== */

  /* Neutrals */
  --uswds-white: #ffffff;
  --uswds-black: #000000;
  --uswds-transparent: transparent;

  --uswds-gray-1:  #fcfcfc;
  --uswds-gray-2:  #f9f9f9;
  --uswds-gray-3:  #f6f6f6;
  --uswds-gray-4:  #f3f3f3;
  --uswds-gray-5:  #f0f0f0;
  --uswds-gray-10: #e6e6e6;
  --uswds-gray-20: #c9c9c9;
  --uswds-gray-30: #adadad;
  --uswds-gray-40: #919191;
  --uswds-gray-50: #757575;
  --uswds-gray-60: #5c5c5c;
  --uswds-gray-70: #454545;
  --uswds-gray-80: #2e2e2e;
  --uswds-gray-90: #1b1b1b;

  /* Blue — primary family */
  --uswds-blue-5:  #eff6fb;
  --uswds-blue-10: #d9e8f6;
  --uswds-blue-20: #aacdec;
  --uswds-blue-30: #73b3e7;
  --uswds-blue-40: #4f97d1;
  --uswds-blue-50: #2378c3;
  --uswds-blue-60: #2c608a;
  --uswds-blue-70: #274863;
  --uswds-blue-80: #1f303e;
  --uswds-blue-90: #11181d;
  --uswds-blue-5v:  #e8f5ff;
  --uswds-blue-10v: #cfe8ff;
  --uswds-blue-20v: #a1d3ff;
  --uswds-blue-30v: #58b4ff;
  --uswds-blue-40v: #2491ff;
  --uswds-blue-50v: #0076d6;
  --uswds-blue-60v: #005ea2;   /* Theme default primary */
  --uswds-blue-70v: #0b4778;
  --uswds-blue-80v: #112f4e;

  /* Red — secondary family */
  --uswds-red-5:  #f9eeee;
  --uswds-red-10: #f8e1de;
  --uswds-red-20: #f7bbb1;
  --uswds-red-30: #f2938c;
  --uswds-red-40: #e9695f;
  --uswds-red-50: #d83933;      /* secondary */
  --uswds-red-60: #a23737;
  --uswds-red-70: #6f3331;
  --uswds-red-80: #3e2927;
  --uswds-red-90: #1b1616;
  --uswds-red-50v: #e52207;     /* error */
  --uswds-red-60v: #b50909;
  --uswds-red-70v: #8b0a03;
  --uswds-red-80v: #5c1111;

  /* Gold — warning family */
  --uswds-gold-5:  #f5f0e6;
  --uswds-gold-10: #f1e5cd;
  --uswds-gold-20v: #ffbe2e;    /* warning */
  --uswds-gold-30v: #e5a000;

  /* Green (cool) — success family */
  --uswds-green-cool-5:  #ecf3ec;
  --uswds-green-cool-40v: #00a91c; /* success */
  --uswds-green-cool-50v: #008817;
  --uswds-green-cool-60v: #216e1f;
  --uswds-green-cool-70v: #154c21;

  /* Cyan — info family */
  --uswds-cyan-5v:  #e5faff;
  --uswds-cyan-30v: #00bde3;    /* info */
  --uswds-cyan-40v: #009ec1;
  --uswds-cyan-50v: #0081a1;

  /* Indigo cool — accent-cool */
  --uswds-indigo-cool-20v: #b8c8ff;

  /* ========================================================================
     THEME / SEMANTIC COLORS — from assignments-theme-color.scss
     These are the *names* product code should reference.
     ======================================================================== */
  --theme-color-base-lightest: var(--uswds-gray-5);
  --theme-color-base-lighter:  var(--uswds-gray-10);
  --theme-color-base-light:    var(--uswds-gray-30);
  --theme-color-base:          var(--uswds-gray-50);
  --theme-color-base-dark:     var(--uswds-gray-70);
  --theme-color-base-darker:   var(--uswds-gray-80);
  --theme-color-base-darkest:  var(--uswds-gray-90);
  --theme-color-ink:           var(--uswds-gray-90);

  --theme-color-primary-lightest: var(--uswds-blue-5v);
  --theme-color-primary-lighter:  var(--uswds-blue-10v);
  --theme-color-primary-light:    var(--uswds-blue-30v);
  --theme-color-primary:          var(--uswds-blue-60v);   /* #005ea2 */
  --theme-color-primary-vivid:    var(--uswds-blue-50v);
  --theme-color-primary-dark:     var(--uswds-blue-70v);
  --theme-color-primary-darker:   var(--uswds-blue-80v);
  --theme-color-primary-darkest:  #14213d;

  --theme-color-secondary-lightest: var(--uswds-red-5);
  --theme-color-secondary-lighter:  var(--uswds-red-10);
  --theme-color-secondary-light:    var(--uswds-red-30);
  --theme-color-secondary:          var(--uswds-red-50);   /* #d83933 */
  --theme-color-secondary-vivid:    var(--uswds-red-50v);
  --theme-color-secondary-dark:     var(--uswds-red-60v);
  --theme-color-secondary-darker:   var(--uswds-red-70v);
  --theme-color-secondary-darkest:  var(--uswds-red-80v);

  --theme-color-accent-warm: var(--uswds-gold-20v);
  --theme-color-accent-warm-dark: var(--uswds-gold-30v);
  --theme-color-accent-cool: var(--uswds-cyan-30v);
  --theme-color-accent-cool-dark: var(--uswds-cyan-40v);

  /* Brand accent — custom addition, complements primary blue */
  --brand-accent: #D68D43;
  --brand-accent-dark: #B5701F;
  --brand-accent-lighter: #F3DEC4;

  /* State colors */
  --theme-color-error-lighter: #f4e3db;
  --theme-color-error-light:   var(--uswds-red-40);
  --theme-color-error:         var(--uswds-red-50v);       /* #e52207 */
  --theme-color-error-dark:    var(--uswds-red-60v);
  --theme-color-error-darker:  var(--uswds-red-70v);

  --theme-color-warning-lighter: #faf3d1;
  --theme-color-warning-light:   var(--uswds-gold-10);
  --theme-color-warning:         var(--uswds-gold-20v);    /* #ffbe2e */
  --theme-color-warning-dark:    var(--uswds-gold-30v);

  --theme-color-success-lighter: #ecf3ec;
  --theme-color-success-light:   #70e17b;
  --theme-color-success:         var(--uswds-green-cool-40v);  /* #00a91c */
  --theme-color-success-dark:    var(--uswds-green-cool-50v);
  --theme-color-success-darker:  var(--uswds-green-cool-70v);

  --theme-color-info-lighter: var(--uswds-cyan-5v);
  --theme-color-info-light:   #99deea;
  --theme-color-info:         var(--uswds-cyan-30v);       /* #00bde3 */
  --theme-color-info-dark:    var(--uswds-cyan-40v);
  --theme-color-info-darker:  var(--uswds-cyan-50v);

  --theme-color-disabled-lighter: var(--uswds-gray-10);
  --theme-color-disabled-light:   var(--uswds-gray-20);
  --theme-color-disabled:         var(--uswds-gray-30);
  --theme-color-disabled-dark:    var(--uswds-gray-40);

  --theme-color-emergency:      #9c3d10;
  --theme-color-emergency-dark: #332d29;

  /* Foreground / background aliases (for designers used to fg1/fg2 style) */
  --fg1: var(--theme-color-ink);                 /* Primary text  */
  --fg2: var(--theme-color-base-dark);           /* Secondary text */
  --fg3: var(--theme-color-base);                /* Tertiary / muted */
  --fg-on-dark: var(--uswds-white);
  --fg-link: var(--theme-color-primary);
  --fg-link-visited: #54278f;
  --fg-link-hover: var(--theme-color-primary-dark);

  --bg1: var(--uswds-white);                     /* Page background */
  --bg2: var(--theme-color-base-lightest);       /* Subtle surface  */
  --bg3: var(--theme-color-base-lighter);        /* Divider / chip  */
  --bg-dark: var(--theme-color-primary-darker);  /* Dark surface (footer/hero) */

  --border-subtle: var(--theme-color-base-lighter);
  --border-default: var(--theme-color-base-light);
  --border-strong: var(--theme-color-base);
  --border-high-contrast: 0.25rem solid transparent;

  /* ========================================================================
     TYPOGRAPHY — from font/type-scale.scss + line-height.scss + typefaces.scss
     ======================================================================== */
  --font-sans:  "Public Sans", "Public Sans Web", system-ui, -apple-system,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Merriweather", "Merriweather Web", Georgia, Cambria,
                "Times New Roman", Times, serif;
  --font-alt:   "Source Sans 3", "Source Sans Pro Web", "Helvetica Neue",
                Helvetica, Roboto, Arial, sans-serif;
  --font-mono:  "Roboto Mono", "Roboto Mono Web", Menlo, Monaco,
                Consolas, "Liberation Mono", monospace;

  /* Size scale — USWDS raw scale (`font-size($family, $scale)` lookup) */
  --fs-micro: 10px;
  --fs-1:  12px;  --fs-2:  13px;  --fs-3:  14px;  --fs-4:  15px;
  --fs-5:  16px;  --fs-6:  17px;  --fs-7:  18px;  --fs-8:  20px;
  --fs-9:  22px;  --fs-10: 24px;  --fs-11: 28px;  --fs-12: 32px;
  --fs-13: 36px;  --fs-14: 40px;  --fs-15: 48px;  --fs-16: 56px;
  --fs-17: 64px;  --fs-18: 80px;  --fs-19: 120px; --fs-20: 140px;

  /* Line-height scale */
  --lh-1: 1;      /* Headings, very tight */
  --lh-2: 1.2;    /* Large display heads  */
  --lh-3: 1.35;   /* Small headings / UI  */
  --lh-4: 1.5;    /* Body default         */
  --lh-5: 1.62;   /* Readable body        */
  --lh-6: 1.75;   /* Generous body/prose  */

  /* Font weights — Public Sans */
  --fw-thin: 100;   --fw-light: 300;  --fw-normal: 400;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Measure (max line-length) */
  --measure-1: 44ex;
  --measure-2: 60ex;
  --measure-3: 64ex;
  --measure-4: 68ex;
  --measure-5: 72ex;
  --measure-6: 88ex;

  /* ========================================================================
     SPACING — from tokens/units/spacing.scss  (base unit = 8px)
     ======================================================================== */
  --sp-1px: 1px;   --sp-2px: 2px;
  --sp-05: 4px;    --sp-1: 8px;    --sp-105: 12px;
  --sp-2: 16px;    --sp-205: 20px; --sp-3: 24px;
  --sp-4: 32px;    --sp-5: 40px;   --sp-6: 48px;
  --sp-7: 56px;    --sp-8: 64px;   --sp-9: 72px;
  --sp-10: 80px;   --sp-15: 120px;

  /* Layout widths */
  --w-mobile: 320px;   --w-mobile-lg: 480px;
  --w-tablet: 640px;   --w-tablet-lg: 880px;
  --w-desktop: 1024px; --w-desktop-lg: 1200px;
  --w-widescreen: 1400px;

  /* ========================================================================
     RADIUS & SHADOW
     ======================================================================== */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;      /* default button radius */
  --radius-lg: 8px;
  --radius-pill: 99rem;

  --shadow-1: 0 1px 4px 0 rgba(0,0,0,0.1);
  --shadow-2: 0 4px 8px 0 rgba(0,0,0,0.1);
  --shadow-3: 0 8px 16px 0 rgba(0,0,0,0.1);
  --shadow-4: 0 12px 24px 0 rgba(0,0,0,0.1);
  --shadow-5: 0 16px 32px 0 rgba(0,0,0,0.1);

  --focus-outline: 0.25rem solid var(--uswds-blue-40v);
  --focus-offset: 4px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-medium: 250ms;
}

/* ==========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Maps USWDS display sizes (family-scale) onto HTML elements.
   ========================================================================== */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-5);           /* 16px */
  line-height: var(--lh-5);         /* 1.62 */
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display / marketing headings use the serif (Merriweather) by convention;
   app chrome uses sans (Public Sans). Both patterns are USWDS-sanctioned —
   swap the font-family below to reflect your surface. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--lh-2);
  color: var(--fg1);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

h1 { font-size: var(--fs-13); }  /* 36px  — page title */
h2 { font-size: var(--fs-11); }  /* 28px  — section    */
h3 { font-size: var(--fs-9); }   /* 22px  — sub-section*/
h4 { font-size: var(--fs-7); }   /* 18px               */
h5 { font-size: var(--fs-5); }   /* 16px               */
h6 { font-size: var(--fs-3); text-transform: uppercase; letter-spacing: 0.05em; }

.display-1 { font-family: var(--font-serif); font-size: var(--fs-16); line-height: var(--lh-2); font-weight: var(--fw-bold); }
.display-2 { font-family: var(--font-serif); font-size: var(--fs-14); line-height: var(--lh-2); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--sp-2); line-height: var(--lh-5); max-width: var(--measure-4); }

a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--fg-link-visited); }
a:hover { color: var(--fg-link-hover); }
a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

small { font-size: var(--fs-3); }
strong, b { font-weight: var(--fw-bold); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg2);
  padding: 0 var(--sp-05);
  border-radius: var(--radius-sm);
}
pre { padding: var(--sp-2); overflow-x: auto; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-4) 0; }

blockquote {
  border-left: 4px solid var(--theme-color-primary);
  padding: var(--sp-1) var(--sp-3);
  margin: var(--sp-3) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-8);
  color: var(--fg2);
}

*:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* Utility helpers — keep these minimal so they pair with real USWDS utility
   classes when someone loads the full framework alongside. */
.u-sans { font-family: var(--font-sans); }
.u-serif { font-family: var(--font-serif); }
.u-mono { font-family: var(--font-mono); }
.u-measure { max-width: var(--measure-4); }
.u-ink { color: var(--fg1); }
.u-muted { color: var(--fg2); }