/* Talana Tinta · Palma Fizzy Blau · Warme Markenwelt — Tokens 3.1.0-blau-warm · 24.10.2026. */
:root, [data-theme="light"] {
  --surface: #FBF9F4;
  --surface-raised: #FFFDFA;
  --surface-sunken: #E9DFD0;
  --line: #DED5C7;
  --line-strong: #66718A;
  --ink: #18202E;
  --ink-muted: #3D475A;
  --tinta: #22377A;
  --on-tinta: #FFFFFF;
  --tinta-soft: #E2E8F7;
  --mare: #0B6E6A;
  --granito: #9AA3AF;
  --lentisco: #0F7466;
  --lentisco-soft: #D8EFEA;
  --miele: #B07300;
  --miele-ink: #774B00;
  --miele-soft: #FBEFD6;
  --porfido: #B8402A;
  --porfido-ink: #A6381F;
  --porfido-soft: #F9E3DE;
  --brand: var(--tinta);
  --on-brand: var(--on-tinta);
  --brand-soft: var(--tinta-soft);
  --accent: var(--tinta-soft);
  --on-accent: var(--tinta);
  --status-good: var(--lentisco);
  --status-good-ink: var(--lentisco);
  --status-good-soft: var(--lentisco-soft);
  --status-fair: var(--miele);
  --status-fair-ink: var(--miele-ink);
  --status-fair-soft: var(--miele-soft);
  --status-poor: var(--porfido);
  --status-poor-ink: var(--porfido-ink);
  --status-poor-soft: var(--porfido-soft);
  --data: var(--tinta);
  --data-track: var(--surface-sunken);
  --ornament: var(--tinta);
  --status-neutral: var(--line-strong);
  --status-neutral-ink: var(--ink-muted);
  --status-neutral-soft: var(--surface-sunken);
  --error-ink: var(--ink);
  --error-line: var(--ink);
  --focus: var(--brand);
  --brand-surface: #FBF9F4;
  --brand-surface-ink: #18202E;
  --brand-artwork-fill: #22377A;
  --hero-artwork-fill: #F4EEE4;
  --showcase: #FBF9F4;
  --surface-linen: #F4EEE4;
  --surface-peach: #F3E4DA;
  --surface-sage: #E8ECE3;
  --brand-caption-ink: #3D475A;
  --shadow-sm: 0 1px 2px #18202e14, 0 2px 6px #18202e0f;
  --shadow-md: 0 6px 20px -4px #22377a29;
  --focus-ring: 0 0 0 3px #fbf9f4, 0 0 0 6px #22377a;
  --shadow-none: none;
  color-scheme: light;
}
[data-theme="dark"] {
  --surface: #0E1524;
  --surface-raised: #172034;
  --surface-sunken: #0A101C;
  --line: #2A3550;
  --line-strong: #7D8AA6;
  --ink: #E9EDF5;
  --ink-muted: #AEB8CA;
  --tinta: #A9BDFF;
  --on-tinta: #0E1524;
  --tinta-soft: #1C2A55;
  --mare: #5FD0C6;
  --granito: #56627A;
  --lentisco: #4FD1B6;
  --lentisco-soft: #0E302B;
  --miele: #F0B54A;
  --miele-ink: #F0B54A;
  --miele-soft: #3A2C0E;
  --porfido: #FF907A;
  --porfido-ink: #FF907A;
  --porfido-soft: #3D1D18;
  --brand: var(--tinta);
  --on-brand: var(--on-tinta);
  --brand-soft: var(--tinta-soft);
  --accent: var(--tinta-soft);
  --on-accent: var(--tinta);
  --status-good: var(--lentisco);
  --status-good-ink: var(--lentisco);
  --status-good-soft: var(--lentisco-soft);
  --status-fair: var(--miele);
  --status-fair-ink: var(--miele-ink);
  --status-fair-soft: var(--miele-soft);
  --status-poor: var(--porfido);
  --status-poor-ink: var(--porfido-ink);
  --status-poor-soft: var(--porfido-soft);
  --data: var(--tinta);
  --data-track: var(--surface-sunken);
  --ornament: var(--tinta);
  --status-neutral: var(--line-strong);
  --status-neutral-ink: var(--ink-muted);
  --status-neutral-soft: var(--surface-sunken);
  --error-ink: var(--ink);
  --error-line: var(--ink);
  --focus: var(--brand);
  --brand-surface: #FBF9F4;
  --brand-surface-ink: #18202E;
  --brand-artwork-fill: #22377A;
  --hero-artwork-fill: #F4EEE4;
  --showcase: #FBF9F4;
  --surface-linen: #F4EEE4;
  --surface-peach: #F3E4DA;
  --surface-sage: #E8ECE3;
  --brand-caption-ink: #3D475A;
  --shadow-sm: 0 1px 3px #000000a6;
  --shadow-md: 0 10px 28px -4px #000000cc;
  --focus-ring: 0 0 0 3px #0e1524, 0 0 0 6px #a9bdff;
  --shadow-none: none;
  color-scheme: dark;
}
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 999rem;
  --target-min: 3rem;
  --control-height: 3.5rem;
  --tabbar-height: 4.75rem;
  --ring-size: 13rem;
  --icon-size: 1.5rem;
  --content-max: 76rem;
  --reading-max: 42rem;
  --card-min: 17rem;
  --page-gutter: 1.5rem;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --duration-brand: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --z-base: 0;
  --z-sticky: 10;
  --z-popover: 30;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --font-brand: "PP Palma Fizzy", sans-serif;
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* --font-brand dokumentiert nur die Marke. PP Palma Fizzy ist nicht als Live-Font verfügbar. */
  --text-display-xl: 3.5rem;
  --leading-display-xl: 1.12;
  --weight-display-xl: 500;
  --tracking-display-xl: -0.035em;
  --text-display: 2.5rem;
  --leading-display: 1.2;
  --weight-display: 500;
  --tracking-display: -0.03em;
  --text-title: 1.75rem;
  --leading-title: 1.22;
  --weight-title: 600;
  --tracking-title: -0.02em;
  --text-heading: 1.375rem;
  --leading-heading: 1.36;
  --weight-heading: 600;
  --tracking-heading: -0.01em;
  --text-body-lg: 1.25rem;
  --leading-body-lg: 1.6;
  --weight-body-lg: 400;
  --tracking-body-lg: 0;
  --text-body: 1.125rem;
  --leading-body: 1.555556;
  --weight-body: 400;
  --tracking-body: 0;
  --text-control: 1.125rem;
  --leading-control: 1.333333;
  --weight-control: 700;
  --tracking-control: 0;
  --text-label: 1rem;
  --leading-label: 1.375;
  --weight-label: 700;
  --tracking-label: 0;
  --text-caption: 1rem;
  --leading-caption: 1.375;
  --weight-caption: 400;
  --tracking-caption: 0;
  --text-metric-xl: 3rem;
  --leading-metric-xl: 1.083333;
  --weight-metric-xl: 700;
  --tracking-metric-xl: -0.02em;
  --text-metric: 2.125rem;
  --leading-metric: 1.176471;
  --weight-metric: 700;
  --tracking-metric: -0.01em;
  --text-coord: 1rem;
  --leading-coord: 1.375;
  --weight-coord: 400;
  --tracking-coord: 0.01em;
  --focus-offset: 0.1875rem;
  --focus-width: 0.1875rem;
  --border-width: 0.0625rem;
  --icon-stroke: 0.125rem;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-brand: 0ms; }
}