/* File: /assets/css/core/tokens.css
   Owner: EC
   Purpose: Single source of truth for design tokens (Brand Style Guide v1.8.1)
   Version: 1.0
   Updated: 2025-11-06
*/

/* Root tokens are split into logical blocks for ALCOA-C traceability.
   Do NOT redefine the same token in multiple blocks unless intentionally overriding. */

:root {
/* ============================================================
   EC Brand Color Tokens (with contrast)
   Source: Brand Style Guide v1.8.1 (2025-11-03/04)
   Note: Contrast is vs the “Best Text” color per guide.
   ============================================================ */

/* === PRIMARY (brand greens/teals/navy) === */
--ec-teal-450: #12B4A6;    /* "Light Sea Green"      · RGB: 18 180 166  · Best Text: Charcoal · Contrast 4.23:1 (AA large) · Soft bg blocks */
--ec-teal-500: #00C4B3;    /* "Tiffany Blue"         · RGB: 0 196 179   · Best Text: Charcoal · Contrast 4.98:1 (AA)       · Links/highlights/accents */
--ec-green-700: #007167;   /* "Tropical Rain Forest" · RGB: 0 113 103   · Best Text: White    · Contrast 5.90:1 (AA)       · Primary CTAs */
--ec-green-800: #00524C;   /* "Deep Jungle Green"    · RGB: 0 82 76     · Best Text: White    · Contrast 9.09:1 (AAA)      · Hovers/nav bars/strong accents */
--ec-navy-900: #002E6D;    /* "Dark Midnight Blue"   · RGB: 0 46 109    · Best Text: White    · Contrast 13.03:1 (AAA)     · Headings/dark backgrounds/inverse */

/* === NEUTRALS === */
--ec-neutral-050: #FAFBFC; /* "Ghost White"          · RGB: 250 251 252 · Best Text: Charcoal · Contrast 8.60:1 (AAA)      · Paper-like background */
--ec-neutral-100: #FFFFFF; /* "White"                · RGB: 255 255 255 · Best Text: Charcoal · Contrast 10.95:1 (AAA)     · Base background */
--ec-neutral-200: #E8ECEE; /* "Bright Gray"          · RGB: 232 236 238 · Best Text: Charcoal · Contrast 9.21:1 (AAA)      · Muted sections/table rows */
--ec-neutral-300: #A2A9AD; /* "Metallic Silver"      · RGB: 162 169 173 · Best Text: Charcoal · Contrast 4.60:1 (AA)       · Dividers/icons/disabled */
--ec-neutral-500: #5B6670; /* "Black Coral"          · RGB: 91 102 112  · Best Text: White    · Contrast 5.87:1 (AA)       · Secondary text/metadata */
--ec-neutral-700: #323E48; /* "Charcoal"             · RGB: 50 62 72    · Best Text: White    · Contrast 10.95:1 (AAA)     · Primary body text (light env) */
--ec-neutral-900: #1D252C; /* "Dark Gunmetal"        · RGB: 29 37 44    · Best Text: White    · Contrast 15.52:1 (AAA)     · Dark UI surfaces */
--ec-neutral-950: #121820; /* "Eerie Black"          · RGB: 18 24 32    · Best Text: White    · Contrast 17.84:1 (AAA)     · Ultra-dark backgrounds */

/* === ACCENTS (non-link by default) === */
--ec-accent-200: #C93C86;  /* "Smitten"              · RGB: 201 60 134  · Best Text: White    · Contrast 4.69:1 (AA)       · Micro-accent/data highlights */
--ec-accent-300: #FF6B5C;  /* "Bittersweet"          · RGB: 255 107 92  · Best Text: Charcoal · Contrast 3.91:1 (AA large) · Error/destructive (large only) */
--ec-accent-400: #E8C24A;  /* "Maize"                · RGB: 232 194 74  · Best Text: Charcoal · Contrast 6.38:1 (AA)       · Warning/attention */
--ec-accent-500: #3A8DFF;  /* "Brilliant Azure"      · RGB: 58 141 255  · Best Text: White    · Contrast 3.26:1 (AA large) · Imagery/illustration flair */
--ec-accent-550: #FF934F;  /* "Royal Orange"         · RGB: 255 147 79  · Best Text: Charcoal · Contrast 4.97:1 (AA)       · Promo/highlights */
--ec-accent-750: #5750CC;  /* "Iris"                 · RGB: 87 80 204   · Best Text: White    · Contrast 6.13:1 (AA)       · Secondary accent (blue-purple) */

/* === SURFACE (dark UI helpers) === */
--ec-surface-500: #5C6975; /* "Cadet"                · RGB: 92 105 117  · Best Text: White    · Contrast 5.63:1 (AA)       · Dark header bg; overlays */
--ec-surface-600: #2E353A; /* "Outer Space"          · RGB: 46 53 58    · Best Text: White    · Contrast 12.45:1 (AAA)     · Dark theme/inverse */

/* === TINTS (warm/cool backgrounds) === */
--ec-tint-200: #D9C3A3;    /* "Dark Vanilla"         · RGB: 217 195 163 · Best Text: Charcoal · Contrast 6.40:1 (AA)       · Warm neutral background */
--ec-tint-300: #B79C53;    /* "Aztec Gold"           · RGB: 183 156 83  · Best Text: Charcoal · Contrast 4.12:1 (AA large) · Premium accent tone */
--ec-tint-500: #5B7FA3;    /* "Rackley"              · RGB: 91 127 163  · Best Text: White    · Contrast 4.19:1 (AA large) · Charts/code backdrop */
}

/* === SEMANTIC COLOR ROLES (theme-neutral defaults) ===
   These power base.css and components. Each theme will override these, not the primitives. */
:root {
  --color-bg: var(--ec-neutral-100);

  --color-heading: var(--ec-neutral-700);
  --color-body:    var(--ec-neutral-700);

  --color-link:         var(--ec-neutral-500);
  --color-link-hover:   var(--ec-neutral-900);
  --color-link-visited: var(--ec-neutral-700);

  /* Status (forms/toasts/badges) */
  --color-success: var(--ec-green-700);
  --color-warning: var(--ec-accent-400);
  --color-danger:  var(--ec-accent-300);

  /* Component surfaces & dividers */
  --color-surface: var(--ec-neutral-100); /* cards/panels */
  --color-border:  var(--ec-neutral-200); /* inputs/dividers */

  /* Accent for UI emphasis (NOT links) */
  --color-accent:       var(--ec-teal-450);
  --color-accent-hover: var(--ec-teal-500);

  /* Shared focus outline */
  --focus-ring:   3px solid var(--color-accent);
  --focus-offset: 2px;
}

/* === TYPOGRAPHY (per §3) === */
:root {
  /* Families */
  --font-display:    "Delight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-sans:       "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans-tight: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:       "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800; /* Delight ExtraBold for H1/hero */

  /* Role sizes (fluid) */
  --text-body-size:  var(--step-0);   /* ~16px default */
  --text-small-size: var(--step--1);  /* captions/meta */
  --text-h1-size:    var(--step-4);   /* hero/page title */
  --text-h2-size:    var(--step-3);
  --text-h3-size:    var(--step-2);

  /* Line heights */
  --lh-tight:   1.15;
  --lh-body:    1.55;
  --lh-heading: 1.2;
}

/* === SPACING (8px base) === */
:root {
  --space-0: 0;
  --space-1: 0.25rem; /* 4  */
  --space-2: 0.5rem;  /* 8  */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */
  --space-7: 3rem;    /* 48 */
  --space-8: 4rem;    /* 64 */

  /* Semantic layout aliases */
  --space-section-y: var(--space-8);
  --grid-gap:        var(--space-5);
}

/* === LAYOUT === */
:root {
  --container-max: 1200px;
  --content-max:   72ch; /* readable paragraph width */
}

/* === RADIUS === */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* === BORDERS & FOCUS === */
:root {
  --border-width: 1px;              /* default hairline for inputs/cards */
  --focus-radius: var(--radius-sm);  /* match component rounding */
}

/* === SHADOW === */
:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.14);
}

/* === MOTION === */
:root {
  --dur-100: 120ms;
  --dur-200: 180ms;
  --dur-300: 240ms;
  --dur-400: 320ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
}

/* === Z-LAYERS === */
:root {
  --z-header: 10;
  --z-overlay: 1000;
}