/* ---------- Self-hosted faces ------------------------------------------
   Satoshi (display) + Geist (body/UI). Self-hosted rather than CDN-linked:
   no third-party request, no layout shift, no dependency that can vanish.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Geist";
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}

/* ============================================================================
   PC Pandit — Design Tokens
   Three-layer architecture: primitive -> semantic -> component.
   Base: "Lumina Tech Systems" (Stitch). Reconciled with the PC Pandit logo
   palette (navy / teal / gold) sampled from the brand mark.
   ========================================================================== */

:root {
  /* ---------- Layer 1: primitives ------------------------------------- */

  /* Brand green — the action colour (from the Stitch base system) */
  --green-50:  #f2fbe9;
  --green-100: #e0f5cc;
  --green-300: #a9f77b;
  --green-400: #8eda62;
  --green-500: #5ea635;   /* brand green — decorative use only, 3.0:1 on white */
  --green-550: #437d22;   /* CTA fill — 5.01:1 with white text (AA) */
  --green-600: #4a8a26;
  --green-650: #38691d;   /* CTA hover — 6.55:1 with white text */
  --green-700: #2c6c00;   /* primary */
  --green-800: #1f5100;
  --green-900: #123500;

  /* Brand navy — sampled from the logo mark (#0C2448) */
  --navy-50:  #eef2f7;
  --navy-100: #d6e0eb;
  --navy-200: #adc0d6;
  --navy-400: #4a6b91;
  --navy-600: #1c4066;
  --navy-700: #14314f;
  --navy-800: #0f2a4a;    /* ink — structural dark */
  --navy-900: #0c2448;
  --navy-950: #071730;

  /* Brand teal — sampled from the logo mark (#188484) */
  --teal-100: #d3f0ee;
  --teal-400: #3aa8a2;
  --teal-600: #17837f;
  --teal-800: #0c4f4d;

  /* Brand gold — sampled from the logo mark (#C09C48) */
  --gold-100: #f7eed6;
  --gold-400: #d8b85f;
  --gold-500: #c2a04a;
  --gold-700: #7d6425;   /* 4.88:1 on --gold-100 */

  /* Neutrals — cool-toned, per the base system's "paper-like" surface note */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfbfc;
  --neutral-50:  #f5f5f6;
  --neutral-100: #eeeeef;
  --neutral-200: #e5e7eb;
  --neutral-300: #d4d6db;
  --neutral-400: #a1a5ad;
  --neutral-500: #686868;   /* 4.81:1 on the sunken surface (AA) */
  --neutral-700: #41454a;
  --neutral-900: #1a1c1d;

  --red-100: #ffdad6;
  --red-600: #ba1a1a;
  --red-800: #93000a;

  /* ---------- Layer 2: semantic (light theme) -------------------------- */

  --bg:                 var(--neutral-50);
  --surface:            var(--neutral-0);
  --surface-sunken:     var(--neutral-100);
  --surface-raised:     var(--neutral-0);
  --surface-inverse:    var(--navy-900);

  --text:               var(--navy-900);
  --text-muted:         var(--neutral-500);
  --text-subtle:        var(--neutral-400);
  --text-on-inverse:    #eef2f7;
  --text-on-accent:     #ffffff;

  --border:             var(--neutral-200);
  --border-strong:      var(--neutral-300);
  --border-inverse:     rgba(255, 255, 255, 0.14);

  --accent:             var(--green-700);   /* primary action */
  --accent-hover:       var(--green-800);
  --accent-fill:        var(--green-550);   /* filled CTA surface */
  --accent-fill-hover:  var(--green-650);
  --text-on-accent-fill: #ffffff;
  --accent-soft:        var(--green-50);
  --accent-ring:        rgba(94, 166, 53, 0.32);

  --support:            var(--teal-600);    /* secondary signal */
  --support-soft:       var(--teal-100);

  --highlight:          var(--gold-500);    /* ratings, eyebrows, hairlines */
  --highlight-soft:     var(--gold-100);

  --danger:             var(--red-600);
  --danger-soft:        var(--red-100);

  /* Elevation — ambient, diffuse. No glassmorphism (base system rule). */
  --shadow-1: 0 1px 2px rgba(12, 36, 72, 0.04), 0 4px 20px rgba(12, 36, 72, 0.04);
  --shadow-2: 0 2px 4px rgba(12, 36, 72, 0.05), 0 8px 30px rgba(12, 36, 72, 0.08);
  --shadow-3: 0 12px 48px rgba(12, 36, 72, 0.12);

  /* ---------- Layer 3: scales ------------------------------------------ */

  --font-display: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type — clamp() replaces the base system's fixed desktop/mobile pair */
  --t-display: clamp(2.5rem, 1.75rem + 3.4vw, 4rem);
  --t-h1:      clamp(2.25rem, 1.6rem + 2.9vw, 3.25rem);
  --t-h2:      clamp(1.875rem, 1.45rem + 1.9vw, 2.625rem);
  --t-h3:      clamp(1.25rem, 1.15rem + 0.45vw, 1.375rem);
  --t-title:   1.125rem;
  --t-body-lg: 1.125rem;
  --t-body:    1rem;
  --t-small:   0.9375rem;
  --t-label:   0.8125rem;

  /* Spacing — strict 8px rhythm from the base system */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6rem);

  --container: 1280px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem);

  /* Shape */
  --r-sm: 0.25rem;
  --r:    0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);        /* exponential ease-out */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 720ms;

  color-scheme: light;
}

/* ---------- Dark theme --------------------------------------------------
   Not in the Stitch base (it is light-only). Added so the site is usable in
   low light; roles are swapped, never redefined only here.
   ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              var(--navy-950);
    --surface:         #0d2340;
    --surface-sunken:  #0a1c34;
    --surface-raised:  #12304f;
    --surface-inverse: #061226;

    --text:            #e8eef6;
    --text-muted:      #9fb0c4;
    --text-subtle:     #6f8299;
    --text-on-inverse: #e8eef6;

    --border:          rgba(255, 255, 255, 0.10);
    --border-strong:   rgba(255, 255, 255, 0.18);
    --border-inverse:  rgba(255, 255, 255, 0.12);

    --accent:          var(--green-400);
    --accent-hover:    var(--green-300);
    --accent-fill:     var(--green-400);
    --accent-fill-hover: var(--green-300);
    --text-on-accent-fill: var(--navy-950);
    --accent-soft:     rgba(94, 166, 53, 0.14);
    --accent-ring:     rgba(142, 218, 98, 0.38);

    --support:         var(--teal-400);
    --support-soft:    rgba(23, 131, 127, 0.18);

    --highlight:       var(--gold-400);
    --highlight-soft:  rgba(194, 160, 74, 0.16);

    --danger:          #ff6b6b;
    --danger-soft:     rgba(186, 26, 26, 0.22);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 20px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.36), 0 8px 30px rgba(0, 0, 0, 0.42);
    --shadow-3: 0 12px 48px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:              var(--navy-950);
  --surface:         #0d2340;
  --surface-sunken:  #0a1c34;
  --surface-raised:  #12304f;
  --surface-inverse: #061226;

  --text:            #e8eef6;
  --text-muted:      #9fb0c4;
  --text-subtle:     #6f8299;
  --text-on-inverse: #e8eef6;

  --border:          rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.18);
  --border-inverse:  rgba(255, 255, 255, 0.12);

  --accent:          var(--green-400);
  --accent-hover:    var(--green-300);
  --accent-fill:     var(--green-400);
  --accent-fill-hover: var(--green-300);
  --text-on-accent-fill: var(--navy-950);
  --accent-soft:     rgba(94, 166, 53, 0.14);
  --accent-ring:     rgba(142, 218, 98, 0.38);

  --support:         var(--teal-400);
  --support-soft:    rgba(23, 131, 127, 0.18);

  --highlight:       var(--gold-400);
  --highlight-soft:  rgba(194, 160, 74, 0.16);

  --danger:          #ff6b6b;
  --danger-soft:     rgba(186, 26, 26, 0.22);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 20px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.36), 0 8px 30px rgba(0, 0, 0, 0.42);
  --shadow-3: 0 12px 48px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}