/* ============================================================================
   GSN BRAND LOCK v1.0.0 — 2026-07-23
   ============================================================================
   THE locked layer. Pages import this file and write their own CSS ONLY inside
   `@layer page`. Pages may remap ONLY the semantic vars listed in
   semantic-contract.md, within the closed co-domains defined there.
   Any change to THIS file requires the lock-revision ceremony:
   Daniel's explicit approval + checksum re-record + golden-set re-verify.
   Checksum: brain/brand/brand.lock.sha256 (verified by tools/verify.sh).

   Sources: GSR-Web-Design-System/system/design-system.md (extracted from the
   shipped internship page), CARRYOVER_MANIFEST.md, golden-set verdicts through
   2026-07-23 (dark = default base; cool-white = light option; cream = never).
   ============================================================================ */

@layer tokens, base, theme, page;

@layer tokens {
  :root {
    /* ---- PRIMITIVES (locked, never remapped) ---- */

    /* navy triad — production dark base */
    --gsn-navy-0: #02111a;
    --gsn-navy-1: #041a26;
    --gsn-navy-2: #062435;

    /* brand accents */
    --gsn-gold: #fdc229;
    --gsn-gold-ink: #20160a;      /* text ON gold */
    --gsn-gold-ink-soft: #3a2c10; /* secondary text on solid gold */
    --gsn-blue: #1fa9e0;          /* stats/data accent (dark ground) */
    --gsn-blue-deep: #1479a8;     /* stats/data accent (light ground, AA-safe) */

    /* text ramp — dark ground */
    --gsn-text: #ffffff;
    --gsn-text-soft: #dbe7ee;
    --gsn-text-muted: #9fb6c4;
    --gsn-text-faint: #7fa2b5;
    --gsn-text-nav: #c9d8e2;
    --gsn-text-footnote: #5f7c8c;

    /* light-option primitives (cool white register, from accepted mockup-2;
       cream/warm-bone is OFF-REGISTER by verdict 2026-07-23 — no warm ground
       primitives exist in this lock, by design) */
    --gsn-paper: #f4f6f8;
    --gsn-paper-2: #e9edf1;
    --gsn-ink: #0b141c;
    --gsn-ink-soft: #33424e;
    --gsn-ink-muted: #5a6b77;

    /* structure */
    --gsn-hairline: rgba(255, 255, 255, 0.08);
    --gsn-hairline-ink: rgba(11, 20, 28, 0.12);
    --gsn-card-fill: rgba(255, 255, 255, 0.03);
    --gsn-card-fill-hi: rgba(255, 255, 255, 0.06);

    /* shape — the locked radius scale */
    --gsn-radius-card: 14px;
    --gsn-radius-media: 12px;
    --gsn-radius-control: 10px;

    /* type — locked stacks */
    --gsn-font-display: "Archivo", system-ui, sans-serif;
    --gsn-font-body: "Instrument Sans", system-ui, sans-serif;

    /* motion — locked curve + budgets */
    --gsn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --gsn-dur-reveal: 750ms;
    --gsn-dur-micro: 220ms;

    /* signature CTA glow */
    --gsn-glow-gold: 0 6px 24px rgba(253, 194, 41, 0.24);
    --gsn-glow-gold-hover: 0 10px 30px rgba(253, 194, 41, 0.34);

    /* ---- SEMANTICS (pages may remap ONLY these — see semantic-contract.md) ---- */
    --surface-0: var(--gsn-navy-0);
    --surface-1: var(--gsn-navy-1);
    --surface-2: var(--gsn-navy-2);
    --ink-hi: var(--gsn-text);
    --ink-mid: var(--gsn-text-soft);
    --ink-lo: var(--gsn-text-muted);
    --ink-faint: var(--gsn-text-faint);
    --accent: var(--gsn-gold);
    --accent-ink: var(--gsn-gold-ink);
    --accent-data: var(--gsn-blue);
    --line: var(--gsn-hairline);
    --card: var(--gsn-card-fill);
    --card-hi: var(--gsn-card-fill-hi);
    --radius-card: var(--gsn-radius-card);
    --radius-media: var(--gsn-radius-media);
    --radius-control: var(--gsn-radius-control);
    --font-display: var(--gsn-font-display);
    --font-body: var(--gsn-font-body);
    --ease: var(--gsn-ease);
  }
}

@layer base {
  /* ---- a11y baseline (locked; gate-enforced) ---- */
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--surface-1);
    color: var(--ink-lo);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink-hi);
    line-height: 1.05;
    margin: 0;
  }

  img { display: block; max-width: 100%; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .gsn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 12px 18px;
    font-weight: 700;
    border-radius: 0 0 var(--radius-control) 0;
  }
  .gsn-skip:focus { left: 0; }

  main:focus { outline: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}