/* =============================================================================
   tokens.css - Design tokens (Chunk C0 · Build Spec §2)
   -----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for theme values. EDIT VALUES HERE.
   Brand: Serene Technologies  ·  serene.simtech.vip  ·  parent: Simtech
   Rules (§2.2):
     • Components reference ONLY these custom properties - never raw hex.
     • Light values live on :root (light is the DEFAULT - §2.1).
     • Dark values live under [data-theme="dark"].
   AA contrast is mandatory (§2.5): gold is fills/borders/icons/large text only  - 
   never body copy on a light background.

   >>> THE STUDIO TOOL (studio.html) writes its locked-in values back into this
       file's :root / [data-theme="dark"] blocks. The owner can also hand-edit. <<<
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. MODE-INDEPENDENT TOKENS (same in light + dark)
   --------------------------------------------------------------------------- */
:root {

  /* ---- Fonts (§1) - single-family system (owner choice) ----------------- */
  /* Display + body share Hanken Grotesk (clean, engineered, no-nonsense);
     weight separates them. Spline Sans Mono is the technical authority voice. */
  --font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "Cascadia Code", monospace;
  /* Alternates - swap via Studio or by hand:
     Colder technical:  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
     Warm editorial:    --font-display: "Fraunces", Georgia, serif; --display-weight: 460; */

  /* Weight / optical defaults for the display face */
  --display-weight: 700;        /* Hanken Bold for headings                    */
  --display-opsz:   "normal";   /* (ignored by non-optical faces)              */

  /* ---- Type scale (fluid; clamp = min, preferred, max) ------------------ */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.40rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.75rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.45vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.05rem + 2.20vw, 3.43rem);
  --step-6:  clamp(2.98rem, 2.30rem + 3.40vw, 4.60rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.14em;   /* eyebrow / mono labels */

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.50rem;
  --space-xs:  0.75rem;
  --space-sm:  1.00rem;
  --space-md:  1.50rem;
  --space-lg:  2.00rem;
  --space-xl:  3.00rem;
  --space-2xl: 4.00rem;
  --space-3xl: 6.00rem;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Motion (Reveal Pattern §4 reads --reveal-* ) --------------------- */
  --ease:            cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        150ms;
  --dur:             300ms;
  --dur-slow:        600ms;
  --reveal-delay:    0ms;     /* per-element override sets the stagger (§4) */
  --reveal-distance: 16px;    /* translateY before reveal                   */

  /* ---- Layout primitives (owner tweaks these - §0, §10) ----------------- */
  --container-max: 1200px;
  --container-wide: 1380px;
  --container-pad: clamp(1rem, 5vw, 2.5rem);
  --grid-min:      16rem;     /* min card width for auto-fit grids          */
  --grid-gap:      var(--space-md);
  --header-h:      68px;
  --scrollbar-size: 12px;     /* §9 custom scrollbar thickness              */

  /* ---- Blueprint grid texture (atmosphere - §1) ------------------------- */
  --grid-line: rgba(21,82,122,0.06);   /* faint blueprint linework (light)   */
  --grid-size: 28px;

  /* ---- Z-index scale ---------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
  --z-skip:    1300;

  /* ---- Focus ring sizing ------------------------------------------------ */
  --ring-width:  2px;
  --ring-offset: 2px;
}

/* -----------------------------------------------------------------------------
   2. COLOR - LIGHT MODE (default · §2.3)
   --------------------------------------------------------------------------- */
:root {
  --bg:            #FCFCFA;   /* warm white, not sterile */
  --surface:       #FFFFFF;
  --surface-2:     #F4F5F2;

  --text:          #16202B;   /* ink-slate */
  --text-muted:    #48586A;
  --border:        #E3E6E1;

  --primary:       #15527A;   /* brand blue - trust / structure / links */
  --primary-hover: #2E7DB5;
  --primary-ink:   #FFFFFF;
  --primary-tint:  #EAF1F6;   /* faint blue wash for surfaces/badges */

  --secondary:     #2E7D5B;   /* green - safety / "go" / growth accents */
  --secondary-tint:#E6F1EB;

  --accent:        #BF9B30;   /* gold - premium, used sparingly */
  --accent-ink:    #16202B;
  --accent-tint:   #F6EFD7;

  --cta:           #BF9B30;
  --cta-ink:       #16202B;

  --ring:          #2E7DB5;

  /* Shadows (light) */
  --shadow-sm: 0 1px 2px rgba(22,32,43,0.06), 0 1px 3px rgba(22,32,43,0.10);
  --shadow-md: 0 4px 8px rgba(22,32,43,0.08), 0 8px 24px rgba(22,32,43,0.10);
  --shadow-lg: 0 12px 24px rgba(22,32,43,0.10), 0 24px 48px rgba(22,32,43,0.14);

  /* Gold-shadow rule (§2.4): gold can wash out on white, so gold accent
     elements get a shadow so they read as an accent. Tune the lift here. */
  --shadow-gold: 0 1px 2px rgba(22,32,43,0.18), 0 6px 20px rgba(191,155,48,0.35);

  --grid-line: rgba(21,82,122,0.06);
  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   3. COLOR - DARK MODE (secondary · §2.3)
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg:            #161E27;   /* slate */
  --surface:       #1E2832;
  --surface-2:     #243140;

  --text:          #ECE8DD;   /* ivory */
  --text-muted:    #9DAAB6;
  --border:        #2C3A46;

  --primary:       #5BA7D6;
  --primary-hover: #7FBCE0;
  --primary-ink:   #0E1620;
  --primary-tint:  #1B2A38;

  --secondary:     #4FB286;
  --secondary-tint:#1B3329;

  --accent:        #E0C055;
  --accent-ink:    #161E27;
  --accent-tint:   #2E2A1B;

  --cta:           #E0C055;
  --cta-ink:       #161E27;

  --ring:          #5BA7D6;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.40), 0 10px 28px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 28px rgba(0,0,0,0.45), 0 28px 56px rgba(0,0,0,0.55);
  --shadow-gold: 0 4px 18px rgba(224,192,85,0.20);

  --grid-line: rgba(123,188,224,0.07);
  color-scheme: dark;
}