/* ============================================================
   Lex Sportiva — Design Tokens (Single Source of Truth)
   Light = Default · Dark = reiner Token-Swap via [data-theme="dark"]
   Keine rohen Hex/Radien/Shadows außerhalb dieser Datei.
   ============================================================ */

:root {
  /* Native Controls/Scrollbars folgen dem Theme (Light = Default). */
  color-scheme: light;

  /* ---- Raw palette: cool neutral gray scale ---- */
  --gray-0: #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f4f6f8;
  --gray-100: #eaedf1;
  --gray-150: #e1e5ea;
  --gray-200: #d6dbe1;
  --gray-300: #c0c6cf;
  --gray-400: #98a0ab;
  --gray-500: #767e8a;
  --gray-600: #59616d;
  --gray-700: #3d444e;
  --gray-800: #262b32;
  --gray-900: #14171c;
  --gray-950: #0c0e12;

  /* ---- Raw palette: accent (klassisches Blau) ---- */
  --blue-50: #e9f0fe;
  --blue-100: #d3e2fd;
  --blue-200: #a9c6fa;
  --blue-300: #7aa6f6;
  --blue-400: #4787f0;
  --blue-500: #1a73e8;
  --blue-600: #1765cf;
  --blue-700: #1453ac;
  --blue-800: #123f80;

  /* ---- Raw palette: semantic hues (muted, never garish) ---- */
  --green-500: #1e7a46;
  --green-100: #dcefe3;
  --green-300: #6fbf8e;
  --amber-600: #8a6100;
  --amber-100: #f6ecd2;
  --amber-300: #d7a843;
  --red-500: #c5221f;
  --red-100: #f7dedd;
  --red-300: #e08583;

  /* ============ Semantic tokens (LIGHT) ============ */
  --bg: var(--gray-50); /* app canvas */
  --bg-subtle: var(--gray-25);
  --surface: var(--gray-0); /* cards, panels */
  --surface-2: var(--gray-25); /* rail, inset areas */
  --surface-3: var(--gray-100); /* hover fills */
  --overlay-scrim: rgba(20, 23, 28, 0.32);

  --border: var(--gray-200);
  --border-subtle: var(--gray-150);
  --border-strong: var(--gray-300);

  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-on-accent: #ffffff;

  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-active: var(--blue-700);
  --accent-fg: #ffffff;
  --accent-tint: var(--blue-50); /* selection / active row */
  --accent-tint-2: var(--blue-100);
  --accent-quiet: var(--blue-700); /* accent text on light */

  --focus-ring: var(--blue-500);

  --success: var(--green-500);
  --success-bg: var(--green-100);
  --warning: var(--amber-600);
  --warning-bg: var(--amber-100);
  --danger: var(--red-500);
  --danger-bg: var(--red-100);
  --info: var(--blue-700);
  --info-bg: var(--blue-50);

  /* heatmap tints (muted, AA text) */
  --cell-good: #e4f1e9;
  --cell-mid: #f6ecd2;
  --cell-bad: #f7e3e2;
  --cell-good-fg: #155f36;
  --cell-mid-fg: #6f4e07;
  --cell-bad-fg: #94201d;

  /* ============ Radii (eng) ============ */
  --r-xs: 4px; /* inputs, buttons, tags */
  --r-sm: 6px; /* cards, popovers, dialogs */
  --r-md: 8px; /* large modals (max) */
  --r-full: 999px; /* avatars, status dots only */

  /* ============ Spacing (4px grid) ============ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-16: 64px;

  /* ============ Layout ============ */
  --content-max: 1280px;
  --reading-col: 720px;
  --rail-collapsed: 56px;
  --rail-expanded: 240px;
  --topbar-h: 56px;

  /* ============ Typography ============ */
  --font-sans:
    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-caption: 12px;
  --t-body: 14px;
  --t-reading: 16px;
  --t-h3: 18px;
  --t-h2: 22px;
  --t-h1: 28px;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.55;
  --lh-read: 1.65;

  /* ============ Elevation (borders before shadows) ============ */
  --shadow-popover:
    0 2px 8px rgba(20, 23, 28, 0.1), 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-dialog:
    0 12px 32px rgba(20, 23, 28, 0.18), 0 2px 8px rgba(20, 23, 28, 0.1);

  /* ============ Motion ============ */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ============ DARK — pure token swap ============ */
[data-theme="dark"] {
  /* Native Controls/Scrollbars folgen dem dunklen Theme. */
  color-scheme: dark;

  --bg: var(--gray-950);
  --bg-subtle: #0f1217;
  --surface: #15191f;
  --surface-2: #11151a;
  --surface-3: #1d222a;
  --overlay-scrim: rgba(0, 0, 0, 0.55);

  --border: #272d36;
  --border-subtle: #1f242c;
  --border-strong: #353c47;

  --text: #e7eaef;
  --text-secondary: #aab2bd;
  --text-muted: #7d8590;
  --text-disabled: #555c66;
  --text-on-accent: #0c0e12;

  --accent: var(--blue-400);
  --accent-hover: #5d97f2;
  --accent-active: #7aa6f6;
  --accent-fg: #0c0e12;
  --accent-tint: rgba(71, 135, 240, 0.14);
  --accent-tint-2: rgba(71, 135, 240, 0.22);
  --accent-quiet: var(--blue-300);

  --focus-ring: var(--blue-400);

  --success: #5ec487;
  --success-bg: rgba(94, 196, 135, 0.14);
  --warning: #d7a843;
  --warning-bg: rgba(215, 168, 67, 0.15);
  --danger: #ef6f6c;
  --danger-bg: rgba(239, 111, 108, 0.15);
  --info: var(--blue-300);
  --info-bg: rgba(71, 135, 240, 0.12);

  --cell-good: rgba(94, 196, 135, 0.16);
  --cell-mid: rgba(215, 168, 67, 0.16);
  --cell-bad: rgba(239, 111, 108, 0.16);
  --cell-good-fg: #7fd3a1;
  --cell-mid-fg: #e0bd6a;
  --cell-bad-fg: #f49592;

  --shadow-popover: 0 2px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-dialog: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}