/*
 * Path: css/core/tokens.css
 * Purpose: Canonical design tokens + semantic roles wired to Brand Style Guide v1.4
 * Boundaries: Tokens only. No component styling, no layout rules.
 * Principles: SRP, DRY, KISS, ALCOA-C. Single source of truth for color/type/space.
 * Version: 0.9.0 (pre-1.0) — aligned with Brand Style Guide v1.4 (Oct 2025)
 */

/* =========================================
   BRAND COLORS (exact names from guide)
   ========================================= */
:root {
  /* Primaries */
  --ec-teal-450:  #12B4A6; /* Light Sea Green; bridge tint */
  --ec-teal-500:  #00C4B3; /* Tiffany Blue; brand teal */
  --ec-green-700: #007167; /* Tropical Rain Forest; primary btn bg (light) */
  --ec-green-800: #00524C; /* Deep Jungle Green; primary btn bg (dark) */
  --ec-navy-900:  #002E6D; /* Dark Midnight Blue; brand anchor */

  /* Neutrals */
  --ec-neutral-050: #FAFBFC; /* Ghost White; off-white canvas */
  --ec-neutral-100: #FFFFFF; /* White; paper */
  --ec-neutral-200: #EFF2F4; /* Anti-Flash White; panel */
  --ec-neutral-300: #A2A9AD; /* Metallic Silver; keyline */
  --ec-neutral-500: #5B6670; /* Black Coral; muted text */
  --ec-neutral-700: #323E48; /* Charcoal; body text (light) */
  --ec-neutral-900: #1D252C; /* Dark Gunmetal; dark surface */
  --ec-neutral-950: #121820; /* Eerie Black; deepest dark */

  /* Accents (extended palette subset) */
  --ec-accent-100: #8CEAE0; /* Pale Robin Egg Blue; light accent bg */
  --ec-accent-200: #C93C86; /* Smitten; editorial highlight */
  --ec-accent-300: #FF6B5C; /* Bittersweet; warning alt */
  --ec-accent-400: #FFD85C; /* Mustard; caution/tag */
  --ec-accent-500: #3A8DFF; /* Brilliant Azure; info/link hover */
  --ec-accent-550: #FF934F; /* Royal Orange; warm CTA alt */
  --ec-accent-600: #1EC96B; /* UFO Green; positive */
  --ec-accent-650: #8891D9; /* Vista Blue; subtle emphasis */
  --ec-accent-700: #4CA6A1; /* Verdigris; badge alt */
  --ec-accent-750: #5750CC; /* Iris; rare emphasis */

  /* Legacy surface ladder (kept for back-compat) */
  --ec-surface-100: #F4F7F8;
  --ec-surface-200: #E2E6E9;
  --ec-surface-400: #8F979B;
  --ec-surface-500: #5C6975;
  --ec-surface-600: #2E353A;

  /* Illustration tints (reserved for future graphics) */
  --ec-tint-200: #D9C3A3; /* Dark Vanilla */
  --ec-tint-300: #C6A95D; /* Vegas Gold */
  --ec-tint-500: #8FAF6F; /* Asparagus */
  --ec-tint-550: #5B7FA3; /* Rackley */
}

/* =========================================
   TYPE: family, weights, fluid scale
   ========================================= */
:root {
  --ec-font-sans: "Delight", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --ec-w-extralight: 200;
  --ec-w-light:      300;
  --ec-w-regular:    400;
  --ec-w-semibold:   600;
  --ec-w-extrabold:  800;

  /* Fluid web scale (Editorial/Web) */
  --ec-fs-10: clamp(.625rem,.59rem + .15vw,.75rem);
  --ec-fs-12: clamp(.75rem,.72rem + .15vw,.875rem);
  --ec-fs-14: clamp(.875rem,.84rem + .20vw,1rem);
  --ec-fs-16: clamp(1rem,.96rem + .25vw,1.125rem);
  --ec-fs-22: clamp(1.125rem,1rem + .75vw,1.375rem);
  --ec-fs-28: clamp(1.375rem,1.2rem + 1vw,1.75rem);
  --ec-fs-36: clamp(1.75rem,1.4rem + 1.75vw,2.25rem);

  --ec-line-measure: 60ch;
  --lh-tight: 1.15;
  --lh-snug:  1.25;
  --lh-normal:1.5;
}

/* =========================================
   LAYOUT PRIMITIVES: space, radius, shadows, z, motion
   ========================================= */
:root {
  /* Space (8px baseline) */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 3rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --round: 999rem;

  /* Shadows */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.08);
  --shadow-md: 0 8px 22px rgba(0,0,0,.12);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.16);

  /* Z-index */
  --z-header: 1500;
  --z-modal:  1000;
  --z-overlay: 900;

  /* Motion */
  --dur-fast: .18s;
  --dur-med:  .35s;
  --dur-slow: .90s;
  --easing:   ease;

  /* Focus */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;

  /* Shell sizes */
  --header-h: 52px;

  /* Buttons */
  --btn-radius: 12px;
  --btn-size: clamp(40px,5.5vw,56px);
  --icon-size: calc(var(--btn-size) * .44);

  /* Debug panel */
  --debug-lh: 1.35;
  --debug-lines: 12;
}

/* =========================================
   SEMANTIC ROLES (light defaults)
   These are what components should consume.
   ========================================= */
:root {
  /* Surfaces */
  --surface:        var(--ec-neutral-100); /* Page bg; default card */
  --surface-muted:  var(--ec-neutral-200); /* Alternating section */
  --surface-invert: var(--ec-navy-900);    /* Inverted feature/hero */

  /* Text */
  --text-primary:   var(--ec-neutral-700);
  --text-secondary: var(--ec-neutral-500);
  --text-invert:    var(--ec-neutral-100);
  --heading-color:  var(--ec-navy-900);

  /* Links */
  --link:       var(--ec-teal-450);
  --link-hover: var(--ec-accent-750);

  /* Lines & Focus */
  --border: var(--ec-neutral-300);
  --focus:  var(--ec-teal-500);

  /* Buttons (semantic) */
  --btn-primary-bg:   var(--ec-green-700);
  --btn-primary-fg:   var(--ec-neutral-100);
  --btn-secondary-bg: var(--ec-teal-500);
  --btn-secondary-fg: var(--ec-neutral-700);
}

/* =========================================
   DARK TONE OVERRIDES
   Opt-in via: body[data-theme-tone="dark"]
   Keeps components simple; they inherit.
   ========================================= */
body[data-theme-tone="dark"] {
  /* Surfaces */
  --surface:        var(--ec-neutral-900);
  --surface-muted:  color-mix(in srgb, #FFFFFF 6%, var(--ec-neutral-950));
  --surface-invert: var(--ec-neutral-950);

  /* Text */
  --text-primary:   #E7EDF2;
  --text-secondary: color-mix(in srgb, #E7EDF2 70%, transparent);
  --text-invert:    var(--ec-neutral-100);
  --heading-color:  #F3F6F8;

  /* Links */
  --link:       #7CEBDD;           /* tinted teal for dark */
  --link-hover: var(--ec-teal-500);

  /* Lines & Focus */
  --border: color-mix(in srgb, #FFFFFF 22%, transparent);
  --focus:  var(--ec-teal-500);

  /* Buttons */
  --btn-primary-bg:   var(--ec-green-800);
  --btn-primary-fg:   var(--ec-neutral-100);
  --btn-secondary-bg: var(--ec-teal-500);
  --btn-secondary-fg: var(--ec-neutral-100);
}

/* =========================================
   BRIDGES & LEGACY ALIASES
   Keep these for back-compat with older CSS.
   ========================================= */
:root {
  --text: var(--text-primary);              /* legacy alias */
  --surface-inset: var(--ec-surface-200);   /* legacy alias used by old comps */

  /* Added to satisfy references in components and JS */
  --theme-bg: var(--surface);

  /* Typography aliases used by older CSS */
  --font-sans: var(--ec-font-sans);
  --fs-900: var(--ec-fs-36);
  --fs-800: var(--ec-fs-28);
  --fs-700: var(--ec-fs-22);
  --fs-600: var(--ec-fs-16);
  --fs-500: var(--ec-fs-16);
  --fs-400: var(--ec-fs-14);
  --fs-300: var(--ec-fs-12);
  --fs-200: var(--ec-fs-10);
}