/* financialfootball design tokens. Direction D (DESIGN_PLAN.md §9, "Stand").
   The single source for every color, size, space and duration. Components never
   use a raw value; they read these properties.

   Themes: every color is one light-dark(light, dark) pair. The scheme follows the
   OS by default; [data-theme] on any element forces it for that subtree, so the
   styleguide can show both themes side by side and the toggle needs no reload.
   Contrast targets (checked live on /design/styleguide/): text 4.5:1, marks 3:1. */

:root {
  color-scheme: light dark;

  /* ---------- Neutrals: ten roles, warm paper / warm anthracite ---------- */
  --bg:         light-dark(#f5f2eb, #151412); /* Grund */
  --surface:    light-dark(#fcfbf8, #1d1b18); /* Fläche: inputs, tooltips, raised */
  --panel:      light-dark(#fffdf9, #201d1a); /* Block auf dem Papier: Chart-Rahmen, Kacheln, Picker */
  --surface-2:  light-dark(#ece8de, #2a2723); /* Wash: hover, pressed, tracks */
  --grid:       light-dark(#e4dfd4, #2b2824); /* Gitterlinien, Zeilentrenner */
  --border:     light-dark(#ddd8cc, #35322c); /* Ränder von Controls und Chips */
  --axis:       light-dark(#c9c3b6, #4a463f); /* Achsen, Tabellenkopf-Linie */
  --mark-muted: light-dark(#cfc8ba, #4a463f); /* Marken ohne Hervorhebung; Wert steht immer daneben */
  --text-3:     light-dark(#6a6459, #9a9386); /* leise: Achsen, Quellen, Meta */
  --text-2:     light-dark(#4f4a41, #c2bbae); /* mittel: Untertitel, Labels */
  --text-1:     light-dark(#191713, #f2eee6); /* stark: Text, Werte, Linien-Regeln */

  /* ---------- Accent: interaction and highlight, nothing else ---------- */
  --accent:        light-dark(#0b6b66, #4fc4b7);
  --accent-strong: light-dark(#064e4a, #8fddd3);
  --on-accent:     light-dark(#ffffff, #151412);
  --accent-wash:   color-mix(in oklab, var(--accent) 12%, transparent);

  /* ---------- Meaning: only for change and results ---------- */
  --positive: light-dark(#1d7036, #5cc384);
  --negative: light-dark(#b3261e, #ff7a6e);
  --warning:  light-dark(#8a5a00, #e0a63a);

  /* ---------- Leagues: fixed everywhere ---------- */
  --league-1: light-dark(#2e4a7a, #8fa8d8); /* first tier, every country */
  --league-2: light-dark(#8a6a1e, #d3b266); /* second tier, every country */

  /* ---------- Comparison palette: six slots in selection order ----------
     Validated (OKLab ΔE, adjacent pairs). Light: worst protan ΔE 7.7, which is
     legal because compare charts always carry direct labels, a logo legend and a
     data table; normal-vision ΔE 16.8; all ≥ 3:1. Dark: ΔE 8.4 / 19.3, all ≥ 3:1. */
  --series-1: light-dark(#2a78d6, #3987e5);
  --series-2: light-dark(#d2541c, #d95926);
  --series-3: light-dark(#118a62, #199e70);
  --series-4: light-dark(#a87400, #c98500);
  --series-5: light-dark(#c94f7f, #d55181);
  --series-6: light-dark(#008300, #008300);

  /* ---------- Elevation: shadow in light, hairline ring in dark ---------- */
  /* Two elevations. Cards (a chart, a table, a list) sit a little above the paper; things that float (tooltip, menus,
     search results) clearly above it. A card's shadow falls only downward and to the sides (each layer's blur minus
     its spread equals its drop), so two cards meeting edge to edge stay one surface. */
  --shadow-1: none;
  --shadow-card: 0 1px 1px light-dark(rgb(25 23 19 / 0.05), rgb(0 0 0 / 0.35)),
                 0 3px 7px -4px light-dark(rgb(25 23 19 / 0.10), rgb(0 0 0 / 0.40)),
                 0 14px 30px -16px light-dark(rgb(25 23 19 / 0.22), rgb(0 0 0 / 0.65));
  --shadow-card-hover: 0 1px 1px light-dark(rgb(25 23 19 / 0.06), rgb(0 0 0 / 0.4)),
                       0 5px 11px -6px light-dark(rgb(25 23 19 / 0.14), rgb(0 0 0 / 0.45)),
                       0 22px 40px -18px light-dark(rgb(25 23 19 / 0.28), rgb(0 0 0 / 0.7));
  --shadow-2: 0 8px 24px light-dark(rgb(25 23 19 / 0.14), rgb(0 0 0 / 0.5)),
              0 0 0 1px light-dark(rgb(25 23 19 / 0.08), var(--border));

  /* ---------- Type: two families, four weights in total ---------- */
  /* Same foundry for both faces: one voice. Instrument Sans has tabular figures (checked). */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; /* 400 */
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* 400 500 600 */

  --fs-12: 12px; --lh-12: 16px; /* Achsen, Quellen. Nie kleiner. */
  --fs-14: 14px; --lh-14: 20px; /* UI, Tabellen */
  --fs-16: 16px; --lh-16: 24px; /* Fließtext */
  --fs-18: 18px; --lh-18: 28px; /* Lead */
  --fs-22: 22px; --lh-22: 28px; /* Chart-Titel (Display ×1.12) */
  --fs-28: 28px; --lh-28: 34px; /* Aussage */
  --fs-40: 40px; --lh-40: 44px; /* Clubname, Kennzahl */
  --fs-56: 56px; --lh-56: 60px; /* Seitentitel */
  --fs-hero: clamp(64px, 10vw, 112px); /* Hero-Zahl, einmal pro Seite */
  /* Instrument Serif has a small x-height; display sizes step up by this factor. */
  --display-scale: 1.12;
  --display-tracking: -0.005em;
  --hero-tracking: -0.02em;

  /* ---------- Space, shape, layout ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  /* Flat and ruled, not boxed: rules carry the structure, corners stay sharp. */
  --radius-card: 0;
  --radius-control: 2px;
  --radius-chip: 2px;
  --rule: 2px solid var(--text-1); /* section rule */
  --hairline: 1px solid var(--grid); /* row rule */
  --rule-axis: 1px solid var(--axis); /* table head, inputs */
  --content-max: 1200px;
  --text-max: 640px;
  --gutter: 16px;
  --header-h: 64px;
  --touch: 44px;

  /* ---------- Motion: one easing, three durations ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-arrive: cubic-bezier(0.34, 1.4, 0.64, 1); /* a thing that lands: slight overshoot, only for the mark */
  --dur-hover: 120ms;
  --dur-state: 200ms;
  --dur-chart: 400ms;

  --z-sticky: 10;
  --z-overlay: 20;
  --z-tooltip: 30;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

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

/* Reduced motion: components keep opacity fades and drop every movement
   (draw-in, grow, slide). See base.css and charts.js. */