/* ==========================================================================
   FAcode Software Solutions — tokens.css
   Single source of truth: colour, type, space, radius, border, shadow, motion.
   Nothing below this file should hard-code a hex, a raw px size, or a duration.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. COLOUR — navy anchor + ONE accent (teal) + a cool grey ramp
     ------------------------------------------------------------------ */

  /* Navy — the brand anchor. 900 = deep sections, 800 = anchor, 700 = large fills */
  --navy-900: #0C1735;
  --navy-800: #13234D;
  --navy-700: #1E3A63;
  --navy-600: #2A4C7D;

  /* Teal — the only accent. Bright tones are for fills, borders, icons and
     text-on-navy. --teal-700 is the AA-safe tone for teal TEXT on light. */
  --teal-300: #4FC7B7;   /* teal TEXT on the mid-navy fill — 5.5:1 on --navy-700 */
  --teal-400: #27B0A0;   /* hover / active fill */
  --teal-500: #2FA394;   /* base accent fill, icons, rules */
  --teal-600: #26907F;
  --teal-700: #1F8072;   /* teal text on light — 4.6:1 on --grey-050 */
  --teal-800: #1A6E62;   /* accent-button hover — 6.1:1 with white */
  --teal-900: #0F3F3A;

  /* Cool-leaning grey ramp — 6 steps + the page off-white */
  --grey-050: #F8FAFA;   /* page background */
  --grey-100: #EEF2F3;
  --grey-200: #DDE3E6;
  --grey-300: #BFC8CE;
  --grey-400: #8A959E;
  --grey-500: #5A656F;   /* muted text — 5.6:1 on --grey-050 */
  --grey-600: #37424B;   /* body text — 9.9:1 on --grey-050 */

  --white: #FFFFFF;

  /* --- Semantic surfaces --- */
  --surface:            var(--grey-050);
  --surface-raised:     var(--white);
  --surface-sunken:     var(--grey-100);
  --surface-deep:       var(--navy-900);
  --surface-navy:       var(--navy-800);
  --surface-navy-fill:  var(--navy-700);

  /* --- Semantic text --- */
  --text-strong:  var(--navy-800);   /* headings on light */
  --text-body:    var(--grey-600);
  --text-muted:   var(--grey-500);
  --text-accent:  var(--teal-700);   /* teal text on light (AA) */

  --text-on-navy:        #FFFFFF;
  --text-on-navy-body:   #AEC0D6;
  --text-on-navy-muted:  #8398B4;
  --text-on-navy-accent: var(--teal-500);

  /* --- Semantic lines: hairlines do the work drop shadows used to --- */
  --line:                var(--grey-200);
  --line-soft:           var(--grey-100);
  --line-strong:         var(--grey-300);
  --line-accent:         var(--teal-500);
  --line-on-navy:        rgba(255, 255, 255, 0.14);
  --line-on-navy-soft:   rgba(255, 255, 255, 0.08);
  --line-on-navy-strong: rgba(255, 255, 255, 0.28);

  /* --- Accent washes, used sparingly --- */
  --wash-teal:        rgba(47, 163, 148, 0.08);
  --wash-teal-strong: rgba(47, 163, 148, 0.16);
  --wash-navy:        rgba(19, 35, 77, 0.05);

  /* --- Code panel: the one place a syntax palette is needed. Two teal
         tones + a slate + the panel foreground. Never a rainbow. --- */
  --code-bg:      #0A1330;
  --code-chrome:  #101C40;
  --code-fg:      #DCE6F2;
  --code-comment: #6E85A8;   /* 4.7:1 on --code-bg */
  --code-string:  #8FD4C9;   /* 10.5:1 on --code-bg */
  --code-keyword: var(--teal-500);

  /* --- Feedback --- */
  --ok-700:   #1F7A4D;
  --ok-wash:  rgba(31, 122, 77, 0.09);
  --err-700:  #B3261E;
  --err-wash: rgba(179, 38, 30, 0.08);

  /* --- Focus --- */
  --focus-ring:      var(--teal-600);
  --focus-ring-navy: var(--teal-400);
  --focus-width:     2px;
  --focus-offset:    3px;


  /* ------------------------------------------------------------------
     2. TYPE — display face + body face + mono, on a modular scale
     ------------------------------------------------------------------ */

  --font-display: "Space Grotesk", "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Modular scale, ~1.24 ratio. Fluid where the jump is large. */
  --fs-3xs:  0.6875rem;                                    /* 11 — mono micro labels */
  --fs-2xs:  0.75rem;                                      /* 12 */
  --fs-xs:   0.8125rem;                                    /* 13 */
  --fs-sm:   0.9375rem;                                    /* 15 */
  --fs-base: 1.0625rem;                                    /* 17 */
  --fs-md:   1.1875rem;                                    /* 19 */
  --fs-lg:   clamp(1.25rem, 1.16rem + 0.42vw, 1.4375rem);  /* 20 → 23 */
  --fs-xl:   clamp(1.4375rem, 1.28rem + 0.7vw, 1.75rem);   /* 23 → 28 */
  --fs-2xl:  clamp(1.75rem, 1.50rem + 1.1vw, 2.25rem);     /* 28 → 36 */
  --fs-3xl:  clamp(2.125rem, 1.72rem + 1.8vw, 3rem);       /* 34 → 48 */
  --fs-4xl:  clamp(2.5rem, 1.88rem + 2.7vw, 3.875rem);     /* 40 → 62 */
  --fs-5xl:  clamp(3rem, 1.90rem + 4.8vw, 5.25rem);        /* 48 → 84 — metrics */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.04;   /* display metrics */
  --lh-heading: 1.12;
  --lh-snug:    1.32;
  --lh-body:    1.65;
  --lh-relaxed: 1.72;

  --ls-display:  -0.028em;  /* tight-tracked big headings */
  --ls-heading:  -0.018em;
  --ls-snug:     -0.008em;
  --ls-body:     0;
  --ls-label:    0.14em;    /* mono eyebrows */
  --ls-label-sm: 0.08em;

  --measure:       66ch;
  --measure-tight: 52ch;
  --measure-wide:  78ch;


  /* ------------------------------------------------------------------
     3. SPACE — strict 8pt grid
     ------------------------------------------------------------------ */

  --sp-0:  0;
  --sp-h:  4px;
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-7:  56px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-14: 112px;
  --sp-16: 128px;
  --sp-20: 160px;

  /* Section rhythm — fluid, lands on the grid at both ends */
  --section-y:    clamp(56px, 4vw + 32px, 96px);
  --section-y-lg: clamp(72px, 6vw + 32px, 128px);
  --section-y-sm: clamp(40px, 3vw + 24px, 64px);

  /* Layout */
  --container:       1216px;
  --container-tight: 912px;
  --gutter:          clamp(20px, 5vw, 48px);
  --grid-gap:        clamp(24px, 3vw, 56px);
  --header-h:        60px;
  --header-h-lg:     72px;


  /* ------------------------------------------------------------------
     4. RADIUS — small and varied on purpose. Nothing is uniformly soft.
     ------------------------------------------------------------------ */

  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-full: 999px;


  /* ------------------------------------------------------------------
     5. BORDER + SHADOW — hairlines first; shadow is rare and quiet
     ------------------------------------------------------------------ */

  --bw-hair:   1px;
  --bw-rule:   2px;
  --bw-marker: 3px;

  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(12, 23, 53, 0.05);
  --shadow-md:    0 6px 20px -8px rgba(12, 23, 53, 0.16);
  --shadow-lift:  0 18px 44px -22px rgba(12, 23, 53, 0.34);
  --shadow-panel: 0 24px 64px -32px rgba(0, 0, 0, 0.62);


  /* ------------------------------------------------------------------
     6. MOTION — micro-interactions only
     ------------------------------------------------------------------ */

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-std: cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);

  --t-fast: var(--dur-1) var(--ease-out);
  --t-base: var(--dur-2) var(--ease-out);
  --t-slow: var(--dur-3) var(--ease-out);


  /* ------------------------------------------------------------------
     7. LAYERS
     ------------------------------------------------------------------ */

  --z-base:   1;
  --z-sticky: 50;
  --z-header: 100;
  --z-menu:   200;
  --z-float:  300;
}


/* --------------------------------------------------------------------------
   Ground inversion. A section painted navy remaps the semantic tokens, so
   every component inside works on both grounds without a single --navy-*
   reference in component CSS.
   -------------------------------------------------------------------------- */

.on-navy {
  --surface:        var(--navy-900);
  --surface-raised: var(--navy-800);
  --surface-sunken: var(--navy-900);
  --text-strong:    var(--text-on-navy);
  --text-body:      var(--text-on-navy-body);
  --text-muted:     var(--text-on-navy-muted);
  --text-accent:    var(--text-on-navy-accent);
  --line:           var(--line-on-navy);
  --line-soft:      var(--line-on-navy-soft);
  --line-strong:    var(--line-on-navy-strong);
  --line-accent:    var(--teal-500);
  --focus-ring:     var(--focus-ring-navy);

  color: var(--text-body);
  background-color: var(--surface);
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-4: 0.01ms;
  }
}