/* Durchblick design tokens. Source: media/durchblick-konzept.html (navy primary, glass-cyan accent, traffic-light trio, Manrope,
   10 px radius) — refined into one system with light + dark parity. Colours in oklch; derived tints via color-mix. */
@layer tokens {
  @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Variable.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }

  :root {
    color-scheme: light;
    /* ---- brand ---- */
    --navy: oklch(0.268 0.09 261);
    --navy-deep: oklch(0.2 0.07 262);
    --glas: oklch(0.76 0.12 215);
    --glas-ink: oklch(0.52 0.11 215);         /* glass-cyan dark enough for text on light surfaces */
    /* ---- surfaces and ink ---- */
    --bg: oklch(0.985 0.004 262);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.965 0.008 262);
    --surface-3: oklch(0.94 0.012 262);
    --sidebar: oklch(0.975 0.006 262);
    --text: oklch(0.21 0.06 262);
    --text-2: oklch(0.42 0.04 262);
    --text-3: oklch(0.49 0.03 262);
    --border: oklch(0.905 0.015 262);
    --border-strong: oklch(0.82 0.02 262);
    --primary: var(--navy);
    --primary-fg: oklch(1 0 0);
    --primary-hover: oklch(0.32 0.1 261);
    --accent: var(--glas);
    --accent-fg: oklch(0.2 0.06 262);
    --link: oklch(0.47 0.17 262);
    --ring: oklch(0.6 0.19 262);
    --focus: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
    /* ---- data series (validated with the dataviz palette script, light + dark) ---- */
    --series-1: oklch(0.45 0.16 262);
    --series-2: oklch(0.6 0.12 215);
    --series-3: oklch(0.6 0.03 262);
    --series-neg: oklch(0.56 0.19 27);
    --grid: oklch(0.92 0.01 262);
    /* ---- status / traffic light (reserved, never used as series colours) ---- */
    --good: oklch(0.6 0.16 150);        --good-bg: oklch(0.95 0.045 155);        --good-fg: oklch(0.38 0.11 155);
    --good-mid: oklch(0.68 0.15 118);   --good-mid-bg: oklch(0.955 0.06 118);    --good-mid-fg: oklch(0.4 0.1 118);
    --warn: oklch(0.78 0.16 82);        --warn-bg: oklch(0.96 0.07 88);          --warn-fg: oklch(0.42 0.1 70);
    --crit: oklch(0.56 0.2 27);         --crit-bg: oklch(0.95 0.04 25);          --crit-fg: oklch(0.44 0.17 27);
    --info-bg: oklch(0.945 0.022 260);  --info-fg: var(--navy);
    --neutral-bg: var(--surface-2);     --neutral-fg: var(--text-2);
    /* ---- type ---- */
    --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.625rem; --fs-2xl: 2.125rem;
    --fs-3xl: clamp(2rem, 1.2rem + 2.6vw, 2.9rem); --fs-hero: clamp(3.2rem, 2rem + 5vw, 4.6rem);
    --lh: 1.5; --lh-tight: 1.15;
    --tracking-tight: -0.02em; --tracking-caps: 0.08em;
    /* ---- space, radius, elevation ---- */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
    --sh-1: 0 1px 2px oklch(0.2 0.05 262 / 0.06), 0 1px 1px oklch(0.2 0.05 262 / 0.04);
    --sh-2: 0 1px 2px oklch(0.2 0.05 262 / 0.05), 0 8px 24px -12px oklch(0.2 0.05 262 / 0.14);
    --sh-3: 0 2px 4px oklch(0.2 0.05 262 / 0.06), 0 18px 40px -14px oklch(0.3 0.1 262 / 0.28);
    --sh-pop: 0 10px 30px -10px oklch(0.2 0.06 262 / 0.35), 0 0 0 1px var(--border);
    /* ---- motion ---- */
    --t-fast: 150ms; --t: 220ms; --t-slow: 400ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    /* ---- layout ---- */
    --sidebar-w: 248px; --content-max: 1180px; --gutter: clamp(16px, 2.5vw, 32px);
    --topbar-h: 60px;
  }

  /* Dark mode: a selected set of steps, not an automatic flip. Applies on system preference unless the user chose light,
     and always when the user chose dark. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --_dark: 1; } }
  :root[data-theme='dark'] { --_dark: 1; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      color-scheme: dark;
      --bg: oklch(0.165 0.03 262); --surface: oklch(0.205 0.035 262); --surface-2: oklch(0.245 0.04 262); --surface-3: oklch(0.29 0.045 262);
      --sidebar: oklch(0.15 0.03 262);
      --text: oklch(0.95 0.015 262); --text-2: oklch(0.8 0.025 262); --text-3: oklch(0.69 0.03 262);
      --border: oklch(0.3 0.04 262); --border-strong: oklch(0.4 0.045 262);
      --primary: oklch(0.78 0.11 255); --primary-fg: oklch(0.18 0.05 262); --primary-hover: oklch(0.84 0.1 255);
      --accent: oklch(0.78 0.12 215); --accent-fg: oklch(0.16 0.05 262); --glas-ink: oklch(0.8 0.11 215);
      --link: oklch(0.78 0.11 255); --ring: oklch(0.72 0.14 255);
      --series-1: oklch(0.72 0.13 258); --series-2: oklch(0.78 0.11 205); --series-3: oklch(0.7 0.03 262); --series-neg: oklch(0.7 0.17 25);
      --grid: oklch(0.28 0.03 262);
      --good: oklch(0.72 0.15 150); --good-bg: oklch(0.3 0.06 155); --good-fg: oklch(0.87 0.12 150);
      --good-mid: oklch(0.76 0.14 118); --good-mid-bg: oklch(0.31 0.06 118); --good-mid-fg: oklch(0.88 0.12 118);
      --warn: oklch(0.82 0.15 85); --warn-bg: oklch(0.33 0.06 85); --warn-fg: oklch(0.9 0.1 88);
      --crit: oklch(0.68 0.18 27); --crit-bg: oklch(0.32 0.08 25); --crit-fg: oklch(0.87 0.1 25);
      --info-bg: oklch(0.29 0.06 262); --info-fg: oklch(0.88 0.06 255);
      --sh-1: 0 1px 2px oklch(0 0 0 / 0.5); --sh-2: 0 1px 2px oklch(0 0 0 / 0.4), 0 10px 26px -12px oklch(0 0 0 / 0.6);
      --sh-3: 0 18px 40px -14px oklch(0 0 0 / 0.7); --sh-pop: 0 14px 34px -10px oklch(0 0 0 / 0.7), 0 0 0 1px var(--border-strong);
    }
  }
  :root[data-theme='dark'] {
    color-scheme: dark;
    --bg: oklch(0.165 0.03 262); --surface: oklch(0.205 0.035 262); --surface-2: oklch(0.245 0.04 262); --surface-3: oklch(0.29 0.045 262);
    --sidebar: oklch(0.15 0.03 262);
    --text: oklch(0.95 0.015 262); --text-2: oklch(0.8 0.025 262); --text-3: oklch(0.69 0.03 262);
    --border: oklch(0.3 0.04 262); --border-strong: oklch(0.4 0.045 262);
    --primary: oklch(0.78 0.11 255); --primary-fg: oklch(0.18 0.05 262); --primary-hover: oklch(0.84 0.1 255);
    --accent: oklch(0.78 0.12 215); --accent-fg: oklch(0.16 0.05 262); --glas-ink: oklch(0.8 0.11 215);
    --link: oklch(0.78 0.11 255); --ring: oklch(0.72 0.14 255);
    --series-1: oklch(0.72 0.13 258); --series-2: oklch(0.78 0.11 205); --series-3: oklch(0.7 0.03 262); --series-neg: oklch(0.7 0.17 25);
    --grid: oklch(0.28 0.03 262);
    --good: oklch(0.72 0.15 150); --good-bg: oklch(0.3 0.06 155); --good-fg: oklch(0.87 0.12 150);
    --good-mid: oklch(0.76 0.14 118); --good-mid-bg: oklch(0.31 0.06 118); --good-mid-fg: oklch(0.88 0.12 118);
    --warn: oklch(0.82 0.15 85); --warn-bg: oklch(0.33 0.06 85); --warn-fg: oklch(0.9 0.1 88);
    --crit: oklch(0.68 0.18 27); --crit-bg: oklch(0.32 0.08 25); --crit-fg: oklch(0.87 0.1 25);
    --info-bg: oklch(0.29 0.06 262); --info-fg: oklch(0.88 0.06 255);
    --sh-1: 0 1px 2px oklch(0 0 0 / 0.5); --sh-2: 0 1px 2px oklch(0 0 0 / 0.4), 0 10px 26px -12px oklch(0 0 0 / 0.6);
    --sh-3: 0 18px 40px -14px oklch(0 0 0 / 0.7); --sh-pop: 0 14px 34px -10px oklch(0 0 0 / 0.7), 0 0 0 1px var(--border-strong);
  }
}