/* ============================================================================
   Southern AI Systems — Canonical Design Tokens
   southernaisystems.com  |  owner-approved brand system 2026-07-02
   ----------------------------------------------------------------------------
   TYPE  : Sora (display), Fraunces (serif accent), JetBrains Mono (mono),
           Space Grotesk (body). Do NOT introduce Instrument Serif / Cormorant.
   COLOR : Single accent = MINT. Migrated from the old blue -> cyan gradient.
           Neutral grays/whites carry all text; mint carries accents/CTAs/glow.

   This file is the SINGLE SOURCE OF TRUTH. Pages consume var(--token); they
   must not redefine palette/type/spacing inline.
   ============================================================================ */

:root {
  /* ==========================================================================
     1) FONT FAMILIES
     Generic fallbacks: sans for the sans faces, serif for Fraunces,
     monospace ONLY for JetBrains Mono.
     ========================================================================== */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-body:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ==========================================================================
     2) FLUID TYPE SCALE  (clamp: min @360px  ->  max @1440px)
     --display / --h1 : reserved for PAGE HEROES only.
     --h2            : the ONE token for every section heading site-wide.
     --text-base     : 1rem = 16px.   --text-xs = 13px HARD FLOOR (never smaller).
     ========================================================================== */
  --display:   clamp(2.75rem, 1.60rem + 5.11vw, 5.50rem);   /* 44 -> 88px  hero only  */
  --h1:        clamp(2.25rem, 1.50rem + 3.33vw, 4.00rem);   /* 36 -> 64px  hero only  */
  --h2:        clamp(1.75rem, 1.30rem + 2.00vw, 2.75rem);   /* 28 -> 44px  all sections */
  --h3:        clamp(1.375rem, 1.15rem + 1.00vw, 1.875rem); /* 22 -> 30px  */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);/* 18 -> 21px  lead/intro */
  --text-base: 1rem;        /* 16px */
  --text-sm:   0.875rem;    /* 14px */
  --text-xs:   0.8125rem;   /* 13px — HARD FLOOR, do not go below */

  /* Line-heights & tracking (optional helpers) */
  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-mono: 0.08em;  /* kickers / labels in JetBrains Mono */

  /* ==========================================================================
     3) SURFACES + TWO-INK TEXT SYSTEM  (WCAG-verified on the darkest surface)
     Darkest shipped surface = #020610 (body background). All ink ratios below
     are computed against #020610.

       --ink-1  #e8edf5  ~= 16.0:1  (primary body + headings)   >= 8:1  PASS
       --ink-2  #a8b5c7  ~=  9.2:1  (secondary text)            >= 4.5:1 PASS
       --ink-3  #8593a8  ~=  5.6:1  (tertiary — ONLY at >=16px) AA large / AA-16px

     BANNED for text under 16px (all fail 4.5:1 on #020610-ish darks):
       #475569  (~2.7:1)   #4b5563  (~2.4:1)   #64748b  (~3.8:1)
     Never use those three as a text color below 16px. Use --ink-2 instead.
     ========================================================================== */
  --surface-0: #020610;   /* darkest — page background, base for contrast math */
  --surface-1: #0a1628;   /* raised panels / cards */
  --border:    rgba(255,255,255,0.08);

  --ink-1: #e8edf5;   /* primary   — headings + body        >= 8:1   */
  --ink-2: #a8b5c7;   /* secondary — supporting copy        >= 4.5:1 */
  --ink-3: #8593a8;   /* tertiary  — captions, ONLY >=16px           */

  /* ==========================================================================
     4) MINT ACCENT  (single accent; replaces old blue -> cyan)
     Contrast, verified:
       --accent  #34d399 on #020610  ~= 9.3:1   (accent-on-dark: strong)
       --on-accent #04150e on #34d399 ~= 11.7:1 (text-on-mint fill: PASS >=4.5:1)
       --accent-strong #10b981 on #020610 ~= 6.4:1  (still AA for large/UI)
     For text ON a mint fill always use --on-accent (near-black green).
     ========================================================================== */
  --accent:        #34d399;   /* primary mint */
  --accent-strong: #10b981;   /* deeper mint — pressed/hover fills, gradient end */
  --accent-soft:   #6ee7b7;   /* light mint — highlights, gradient light stop */
  --on-accent:     #04150e;   /* near-black green — text/icons on mint fills */

  /* Canonical accent gradient (mint), drop-in for the old blue->cyan gradient */
  --accent-gradient: linear-gradient(135deg, #6ee7b7 0%, #34d399 45%, #10b981 100%);

  /* Accent tints for glows / borders / focus (mint-derived) */
  --accent-glow:      rgba(52,211,153,0.35);
  --accent-glow-soft: rgba(52,211,153,0.15);
  --accent-tint:      rgba(52,211,153,0.10);
  --accent-tint-weak: rgba(52,211,153,0.06);
  --focus-ring:       rgba(52,211,153,0.5);

  /* ==========================================================================
     5) RADII / SPACING / DURATION / EASING
     ========================================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-section: clamp(4rem, 3rem + 5vw, 10rem);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}