/* ============================================================
   Triathlon Club Clisson , Design tokens
   Lumière du matin sur la Sèvre
   ============================================================ */

/* ----------------------------------------------------------
   Web fonts (Google Fonts – DM Sans)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   Tokens
   ---------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Color , light defaults (warm-cool paper, ink-deep text) */
  --bg: oklch(97.2% 0.006 220);
  --surface: oklch(95.4% 0.008 220);
  --surface-elevated: oklch(99.0% 0.004 220);
  --line: oklch(88.0% 0.010 220);
  --line-strong: oklch(78.0% 0.014 220);
  --text-primary: oklch(22.0% 0.012 230);
  --text-secondary: oklch(46.0% 0.012 225);
  --text-tertiary: oklch(62.0% 0.010 222);
  --accent: oklch(68.5% 0.158 232);
  --accent-strong: oklch(56.0% 0.176 235);
  --accent-soft: oklch(94.0% 0.034 225);
  --accent-ink: oklch(36.0% 0.120 238);
  --focus-ring: oklch(68.5% 0.158 232 / 0.55);

  /* Sibling discipline tints (ledger row only) */
  --tint-na: oklch(58% 0.12 232);
  --tint-ve: oklch(54% 0.10 200);
  --tint-ca: oklch(50% 0.13 258);

  /* Typography */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display-xl: 4.75rem;
  --fs-display-l:  3.5rem;
  --fs-display-m:  2.5rem;
  --fs-heading-l:  1.875rem;
  --fs-heading-m:  1.375rem;
  --fs-body-l:     1.1875rem;
  --fs-body:       1.0625rem;
  --fs-body-s:     0.875rem;
  --fs-caption:    0.75rem;

  --lh-display-xl: 0.95;
  --lh-display-l:  1.00;
  --lh-display-m:  1.05;
  --lh-heading-l:  1.15;
  --lh-heading-m:  1.25;
  --lh-body-l:     1.55;
  --lh-body:       1.6;
  --lh-body-s:     1.5;
  --lh-caption:    1.4;

  /* Spacing (4px base) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --gutter: clamp(1.5rem, 4vw, 4.5rem);
  --measure: 68ch;
  --navbar-h: 4.5rem;
  --content-max: 76rem;

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --d-fast:   90ms;
  --d-base:   180ms;
  --d-slow:   280ms;
  --d-reveal: 600ms;

  /* Shadows (soft, restrained) */
  --shadow-1: 0 1px 2px oklch(22% 0.012 230 / 0.04);
  --shadow-2: 0 8px 24px oklch(22% 0.012 230 / 0.06), 0 2px 6px oklch(22% 0.012 230 / 0.03);

  /* Radii , sharp by default, soft only where it matters */
  --radius-1: 0;
  --radius-2: 2px;
  --radius-pill: 999px;
}

/* ----------------------------------------------------------
   Dark theme , site toggle, plus opt-in via [data-variant="night"]
   ---------------------------------------------------------- */
:root[data-theme="dark"],
[data-variant="night"] {
  color-scheme: dark;
  --bg: oklch(16.5% 0.012 232);
  --surface: oklch(20.0% 0.014 232);
  --surface-elevated: oklch(24.5% 0.016 232);
  --line: oklch(30.0% 0.018 230);
  --line-strong: oklch(40.0% 0.022 228);
  --text-primary: oklch(95.5% 0.008 220);
  --text-secondary: oklch(74.0% 0.012 222);
  --text-tertiary: oklch(56.0% 0.014 224);
  --accent: oklch(74.0% 0.150 232);
  --accent-strong: oklch(82.0% 0.140 232);
  --accent-soft: oklch(28.0% 0.060 232);
  --accent-ink: oklch(82.0% 0.140 232);
  --focus-ring: oklch(78.0% 0.150 232 / 0.65);
  --tint-na: oklch(72% 0.13 232);
  --tint-ve: oklch(70% 0.11 200);
  --tint-ca: oklch(72% 0.14 258);
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.4), 0 2px 6px oklch(0% 0 0 / 0.3);
}

/* OS dark preference when no explicit override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(16.5% 0.012 232);
    --surface: oklch(20.0% 0.014 232);
    --surface-elevated: oklch(24.5% 0.016 232);
    --line: oklch(30.0% 0.018 230);
    --line-strong: oklch(40.0% 0.022 228);
    --text-primary: oklch(95.5% 0.008 220);
    --text-secondary: oklch(74.0% 0.012 222);
    --text-tertiary: oklch(56.0% 0.014 224);
    --accent: oklch(74.0% 0.150 232);
    --accent-strong: oklch(82.0% 0.140 232);
    --accent-soft: oklch(28.0% 0.060 232);
    --accent-ink: oklch(82.0% 0.140 232);
    --focus-ring: oklch(78.0% 0.150 232 / 0.65);
    --tint-na: oklch(72% 0.13 232);
    --tint-ve: oklch(70% 0.11 200);
    --tint-ca: oklch(72% 0.14 258);
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.4), 0 2px 6px oklch(0% 0 0 / 0.3);
  }
}

:root[data-theme="light"] { color-scheme: light; }