/* ==========================================================================
   AFCEA North Carolina — Design Tokens
   Palette: USAF Blue + Military Gold
   Every color, space, and type value in the site resolves to a token here.
   ========================================================================== */

/* ==========================================================================
   Webfonts — self-hosted, same-origin
   ==========================================================================
   Served from this origin rather than Google's CDN. A large share of this
   audience is on .mil and .gov networks where third-party CDN requests are
   exactly what egress filtering blocks; a blocked font degrades the design
   for the readers it was built for. Same-origin also means no visitor IPs
   disclosed to a third party, which is one less thing for the chapter's
   privacy policy to have to describe.

   Both families are variable fonts, so ONE file per subset covers every
   weight. Public Sans carries a wght axis (100-900); Source Serif 4 carries
   both wght (200-900) and opsz (8-60). The opsz axis is why the serif files
   are large — it is also the reason display headings look right at 48-60px,
   and browsers apply it automatically via the default font-optical-sizing.

   Subsets: latin, latin-ext, vietnamese. unicode-range means a visitor only
   downloads a subset if the page actually uses a glyph from it, so the two
   extras cost nothing at runtime. They are here because board rosters,
   member directories, and speaker lists carry real names — Muñoz, Ćwiek,
   Nguyễn — and a missing glyph falls back mid-word, visibly. Cyrillic and
   Greek are deliberately omitted: implausible for names in this context,
   and stray technical symbols fall back acceptably.

   No italic. The draft requested one from Google and never used it — there
   is no font-style: italic in main.css and no <em>/<i> in any page. If
   italic is ever introduced, add the face here first or it will render as a
   synthesized oblique.

   Licenses ship alongside the files in ../fonts/ (both SIL OFL 1.1).       */

/* ---- Public Sans — UI and body (wght 100-900 variable) ------------------ */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 800; /* the range main.css actually uses */
  font-display: swap;
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/public-sans-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---- Source Serif 4 — display headings (wght + opsz variable) ----------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700; /* the range main.css actually uses */
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* ---- Brand ramps ------------------------------------------------------
     Blue is anchored on USAF Blue #00308F at step 700.
     Gold is anchored on a desaturated military/old-gold rather than a bright
     yellow, so it reads as insignia metal instead of a warning color.        */

  --blue-950: #030A1A;
  --blue-900: #061633;
  --blue-800: #0A2260;
  --blue-700: #00308F; /* USAF Blue — core brand */
  --blue-600: #0B44B4;
  --blue-500: #1F5AD1;
  --blue-400: #4C82E8;
  --blue-300: #8AAEF3;
  --blue-200: #C0D4F9;
  --blue-100: #E2ECFD;
  --blue-050: #F2F6FE;

  --gold-800: #5C4610;
  --gold-700: #7A5E17;
  --gold-600: #96741F; /* accessible gold text on light surfaces */
  --gold-500: #B8912B;
  --gold-400: #C9A227; /* Military Gold — core accent */
  --gold-300: #D9B843;
  --gold-200: #E8CE73;
  --gold-100: #F5E7B8;

  /* ---- Neutrals --------------------------------------------------------- */
  --slate-950: #060B18;
  --slate-900: #0C1426;
  --slate-800: #131E36;
  --slate-700: #22304F;
  --slate-600: #38496D;
  --slate-500: #5A6B8C;
  --slate-400: #8494B0;
  --slate-300: #B3BFD2;
  --slate-200: #D3DAE6;
  --slate-100: #E9EDF4;
  --slate-050: #F5F7FA;
  --white: #FFFFFF;

  /* ---- Status ----------------------------------------------------------- */
  --success-fg: #1D6B45;
  --success-bg: #E3F4EB;
  --danger-fg:  #A32B2B;
  --danger-bg:  #FBEAEA;

  /* ---- Typography -------------------------------------------------------
     Public Sans is the US Web Design System UI face; Source Serif gives
     headings the institutional weight a government-facing chapter wants.     */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;

  /* ---- Space (4px base) -------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---- Radii, borders, motion -------------------------------------------- */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --border-width: 1px;
  --container: 1200px;
  --container-narrow: 760px;

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --duration: 180ms;

  --header-height: 76px;
}

/* ==========================================================================
   Semantic tokens — LIGHT (default)
   Components only ever reference these, never the ramps above.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--white);
  --bg-subtle:     var(--slate-050);
  --bg-muted:      var(--slate-100);
  --bg-inverse:    var(--blue-950);

  --surface:       var(--white);
  --surface-raised:var(--white);
  --surface-sunken: var(--slate-050);

  --text:          #10182B;
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-inverse:  var(--white);
  --text-on-brand: var(--white);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-brand:  var(--blue-200);

  --brand:         var(--blue-700);
  --brand-hover:   var(--blue-800);
  --brand-text:    var(--blue-700);
  --brand-subtle:  var(--blue-050);
  --brand-subtle-border: var(--blue-100);

  --accent:        var(--gold-400);
  --accent-hover:  var(--gold-500);
  --accent-text:   var(--gold-600);
  --accent-subtle: #FBF5E4;
  /* The halo on a card the chapter wants clicked. Gold at low alpha rather
     than a neutral shadow, so the emphasis reads as brand rather than depth. */
  --glow-accent:   0 0 0 1px rgba(201, 162, 39, 0.35), 0 6px 20px rgba(201, 162, 39, 0.22);

  --header-bg:     rgba(255, 255, 255, 0.92);
  --header-border: var(--slate-200);

  --shadow-sm: 0 1px 2px rgba(6, 22, 51, 0.06), 0 1px 3px rgba(6, 22, 51, 0.05);
  --shadow:    0 2px 4px rgba(6, 22, 51, 0.05), 0 8px 20px rgba(6, 22, 51, 0.07);
  --shadow-lg: 0 4px 8px rgba(6, 22, 51, 0.06), 0 20px 48px rgba(6, 22, 51, 0.12);

  --hero-from: var(--blue-900);
  --hero-to:   var(--blue-700);
  --hero-text: var(--white);

  --focus-ring: var(--gold-500);
}

/* ==========================================================================
   Semantic tokens — DARK
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--slate-950);
  --bg-subtle:     var(--slate-900);
  --bg-muted:      var(--slate-800);
  --bg-inverse:    var(--white);

  --surface:       var(--slate-900);
  --surface-raised:var(--slate-800);
  --surface-sunken: #040914;

  --text:          #E9EEF8;
  --text-muted:    var(--slate-400);
  --text-subtle:   var(--slate-500);
  --text-inverse:  var(--slate-950);
  --text-on-brand: var(--white);

  --border:        var(--slate-700);
  --border-strong: var(--slate-600);
  --border-brand:  #1B3A78;

  --brand:         var(--blue-500);
  --brand-hover:   var(--blue-400);
  --brand-text:    var(--blue-300);
  --brand-subtle:  rgba(31, 90, 209, 0.13);
  --brand-subtle-border: rgba(76, 130, 232, 0.28);

  --accent:        var(--gold-300);
  --accent-hover:  var(--gold-200);
  --accent-text:   var(--gold-300);
  --accent-subtle: rgba(201, 162, 39, 0.14);
  /* Carried further in the dark: a gold halo has less contrast to work with
     against a dark ground than against white. */
  --glow-accent:   0 0 0 1px rgba(201, 162, 39, 0.55), 0 6px 24px rgba(201, 162, 39, 0.28);

  --header-bg:     rgba(6, 11, 24, 0.88);
  --header-border: var(--slate-800);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.6);

  --hero-from: #030A1A;
  --hero-to:   #0A2260;
  --hero-text: var(--white);

  --success-fg: #6FD3A3;
  --success-bg: rgba(29, 107, 69, 0.22);
  --danger-fg:  #F09292;
  --danger-bg:  rgba(163, 43, 43, 0.22);

  --focus-ring: var(--gold-300);
}

/* Respect the OS preference before the user has expressed one. The theme
   script stamps data-theme on <html>, so this governs the first paint for
   visitors with no stored choice — and every paint for visitors without
   JavaScript.

   The declarations below are a VERBATIM copy of :root[data-theme="dark"].
   They have to be: CSS cannot share one declaration block between a plain
   selector and one inside a media query. Keep them identical — build_theme.py
   fails the build if the two blocks stop declaring the same properties.

   They drifted once already. The media block was missing --accent,
   --accent-hover, the three shadows, the success/danger pairs and the inverse
   colours, so an OS-dark visitor got the light gold on the Donate button and
   light-background shadows until JavaScript ran, then watched them change. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:            var(--slate-950);
    --bg-subtle:     var(--slate-900);
    --bg-muted:      var(--slate-800);
    --bg-inverse:    var(--white);

    --surface:       var(--slate-900);
    --surface-raised:var(--slate-800);
    --surface-sunken: #040914;

    --text:          #E9EEF8;
    --text-muted:    var(--slate-400);
    --text-subtle:   var(--slate-500);
    --text-inverse:  var(--slate-950);
    --text-on-brand: var(--white);

    --border:        var(--slate-700);
    --border-strong: var(--slate-600);
    --border-brand:  #1B3A78;

    --brand:         var(--blue-500);
    --brand-hover:   var(--blue-400);
    --brand-text:    var(--blue-300);
    --brand-subtle:  rgba(31, 90, 209, 0.13);
    --brand-subtle-border: rgba(76, 130, 232, 0.28);

    --accent:        var(--gold-300);
    --accent-hover:  var(--gold-200);
    --accent-text:   var(--gold-300);
    --accent-subtle: rgba(201, 162, 39, 0.14);
  /* Carried further in the dark: a gold halo has less contrast to work with
     against a dark ground than against white. */
  --glow-accent:   0 0 0 1px rgba(201, 162, 39, 0.55), 0 6px 24px rgba(201, 162, 39, 0.28);

    --header-bg:     rgba(6, 11, 24, 0.88);
    --header-border: var(--slate-800);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow:    0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.6);

    --hero-from: #030A1A;
    --hero-to:   #0A2260;
    --hero-text: var(--white);

    --success-fg: #6FD3A3;
    --success-bg: rgba(29, 107, 69, 0.22);
    --danger-fg:  #F09292;
    --danger-bg:  rgba(163, 43, 43, 0.22);

    --focus-ring: var(--gold-300);
  }
}