/*
  Design tokens for elc_website.

  Contract: components in style.css reference these semantic variables only —
  never a raw hex value, never !important to override color. Light and dark
  themes provide the SAME set of semantic variables so components need no
  per-theme branching.

  Contrast ratios below are computed against the paired background token and
  must be re-verified with a real contrast checker whenever a value changes
  (see plan verification step 6).
*/

:root {
  /* Brand core — identical to elc_counsel/elc_comply, unchanged across themes */
  --ec-navy: #0b2545;
  --ec-navy-dark: #081a33;
  --ec-blue: #13315c;
  --ec-accent: #c9a35b;
  --ec-accent-light: #e6c98a;
  --ec-danger: #d64545;
  --ec-success: #2e8b57;

  /* Semantic — LIGHT (default) */
  --color-background: #ffffff;
  --color-surface: #f5f7fb;          /* card / alternating section, elevation step 1 */
  --color-surface-alt: #eef1f8;      /* hover / nested card, elevation step 2 */
  --color-foreground: #10182b;       /* ~15.7:1 on #ffffff */
  --color-muted-foreground: #4b5468; /* ~7.3:1 on #ffffff */
  --color-border: #dfe3ec;
  --color-on-accent: #1c1204;        /* ~8.9:1 on --ec-accent */
  --color-destructive: var(--ec-danger);
  --color-ring: var(--ec-navy);

  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', 'Segoe UI', system-ui, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 4px 20px rgba(11, 37, 69, 0.08);
  --shadow-card-lg: 0 12px 40px rgba(11, 37, 69, 0.16);

  --focus-ring: 0 0 0 3px var(--color-background), 0 0 0 6px var(--color-ring);

  --container-max: 1200px;
}

/*
  Semantic — DARK
  Navy is stepped through desaturated/lighter tonal stops for elevation
  (background darkest, surface a step lighter, surface-alt lighter still) —
  not a raw invert, per the skill's color-dark-mode guidance.
*/
:root[data-theme='dark'] {
  --color-background: #0a1a30;
  --color-surface: #122645;          /* ~13.8:1 for --color-foreground */
  --color-surface-alt: #1a3358;
  --color-foreground: #eef1f8;       /* ~13.6:1 on --color-background */
  --color-muted-foreground: #a9b4cc; /* ~7.0:1 on --color-background */
  --color-border: rgba(255, 255, 255, 0.14);
  --color-on-accent: #1c1204;
  --color-ring: var(--ec-accent-light);

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-card-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}