/* ============================================================
   GPX Wyzwania — Design Tokens
   Single source of truth for colors, type, spacing, motion.
   See DESIGN.md for rationale.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* -----------------------------
     COLOR — raw values (light)
     Mono + jeden sygnał: neutrale prawie achromatyczne (chroma ≤ 0.006),
     akcent deep teal (hue 195). Świadome odejście od Strava-orange.
     ----------------------------- */
  --surface-l:        oklch(99%   0.002 195);
  --surface-2-l:      oklch(96%   0.003 195);
  --surface-3-l:      oklch(93%   0.004 195);
  --ink-l:            oklch(15%   0.005 195);
  --ink-muted-l:      oklch(45%   0.006 195);
  --ink-faint-l:      oklch(65%   0.005 195);
  --border-l:         oklch(88%   0.003 195);
  --border-strong-l:  oklch(72%   0.005 195);
  --accent-l:         oklch(50%   0.15  195);
  --accent-strong-l:  oklch(42%   0.16  195);
  --accent-ink-l:     oklch(99%   0.002 195);
  --success-l:        oklch(55%   0.13  150);
  --danger-l:         oklch(52%   0.22  25);
  --warning-l:        oklch(70%   0.16  85);

  /* -----------------------------
     COLOR — raw values (dark)
     ----------------------------- */
  --surface-d:        oklch(12% 0.005 195);
  --surface-2-d:      oklch(17% 0.006 195);
  --surface-3-d:      oklch(22% 0.008 195);
  --ink-d:            oklch(95% 0.004 195);
  --ink-muted-d:      oklch(72% 0.006 195);
  --ink-faint-d:      oklch(55% 0.005 195);
  --border-d:         oklch(28% 0.006 195);
  --border-strong-d:  oklch(40% 0.008 195);
  --accent-d:         oklch(75% 0.14  195);
  --accent-strong-d:  oklch(82% 0.13  195);
  --accent-ink-d:     oklch(12% 0.006 195);
  --success-d:        oklch(70% 0.14  150);
  --danger-d:         oklch(68% 0.20  25);
  --warning-d:        oklch(82% 0.15  85);

  /* -----------------------------
     COLOR — semantic tokens
     ----------------------------- */
  --color-surface:        light-dark(var(--surface-l),        var(--surface-d));
  --color-surface-2:      light-dark(var(--surface-2-l),      var(--surface-2-d));
  --color-surface-3:      light-dark(var(--surface-3-l),      var(--surface-3-d));
  --color-ink:            light-dark(var(--ink-l),            var(--ink-d));
  --color-ink-muted:      light-dark(var(--ink-muted-l),      var(--ink-muted-d));
  --color-ink-faint:      light-dark(var(--ink-faint-l),      var(--ink-faint-d));
  --color-border:         light-dark(var(--border-l),         var(--border-d));
  --color-border-strong:  light-dark(var(--border-strong-l),  var(--border-strong-d));
  --color-accent:         light-dark(var(--accent-l),         var(--accent-d));
  --color-accent-strong:  light-dark(var(--accent-strong-l),  var(--accent-strong-d));
  --color-accent-ink:     light-dark(var(--accent-ink-l),     var(--accent-ink-d));
  --color-success:        light-dark(var(--success-l),        var(--success-d));
  --color-danger:         light-dark(var(--danger-l),         var(--danger-d));
  --color-warning:        light-dark(var(--warning-l),        var(--warning-d));

  /* Karty (kafelki wyzwań, celów i każdy przyszły kafelek listy).
     W jasnym motywie bez zmian (karta = tło strony + ramka). W ciemnym karta
     stoi stopień wyżej niż tło — inaczej zlewa się z czernią strony i zbyt
     ostro kontrastuje z jasną miniaturą mapy. „inset" = pas statystyk w karcie. */
  --color-card:           light-dark(var(--surface-l),        var(--surface-2-d));
  --color-card-hover:     light-dark(var(--surface-2-l),      var(--surface-3-d));
  --color-card-inset:     light-dark(var(--surface-2-l),      var(--surface-3-d));
  --color-card-inset-hover: light-dark(var(--surface-3-l),    oklch(25% 0.008 195));

  /* -----------------------------
     TYPOGRAPHY
     ----------------------------- */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;

  --fs-2xs:  0.6875rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5625rem;
  --fs-2xl:  1.953rem;
  --fs-3xl:  2.441rem;
  --fs-hero: clamp(1.875rem, 4vw + 1rem, 4.2rem);

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.55;
  --lh-ui:      1.35;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;

  /* -----------------------------
     SPACING (4pt)
     ----------------------------- */
  --space-2xs: 0.125rem;
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  0.75rem;
  --space-lg:  1rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 6rem;

  /* -----------------------------
     SHAPE
     ----------------------------- */
  --radius-none: 0;
  --radius-sm:   0.125rem;
  --radius-md:   0.25rem;
  --radius-lg:   0.5rem;

  --border-1: 1px solid var(--color-border);
  --border-1-strong: 1px solid var(--color-border-strong);
  --border-2-accent: 2px solid var(--color-accent);

  /* -----------------------------
     ELEVATION (functional only)
     ----------------------------- */
  --shadow-popover: 0 8px 24px -8px oklch(0% 0 0 / 0.18);
  --shadow-modal:   0 24px 64px -16px oklch(0% 0 0 / 0.28);

  /* -----------------------------
     MOTION
     ----------------------------- */
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  /* -----------------------------
     LAYOUT
     ----------------------------- */
  --container-max: 80rem;
  --container-pad: clamp(1rem, 4vw, 3rem);
  --measure: 65ch;
}

/* User override via [data-theme] on <html> — wins over system preference */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }