/* ========================================
   Design Tokens — CI 2026
   Warmes Papier-Neutral, tiefes Teal als Akzent, weiche Panels

   Designrichtung: die sachliche Redaktions-Anmutung bleibt, die Oberfläche wird
   ruhiger — schwebende Glasleiste, gerundete Panels mit weiten weichen Schatten,
   ein einziger dezenter Teal-Radial hinter der Hero. Kein Glow, keine zweite
   Akzentfarbe (Entwürfe 2a/2b).

   Die Typografie trägt: eine Textserife für Titel, eine klare Grotesk für Text,
   eine Monospace für Pseudocode, Werte und Metalabels.
   ======================================== */

:root {
  /* ----------------------------------------
     Flächen
     ---------------------------------------- */
  --color-surface: hsl(0 0% 100%);
  --color-paper: hsl(40 20% 98%); /* Seitenhintergrund */
  --color-surface-alt: hsl(40 18% 97%);
  --color-secondary: hsl(40 16% 95%);
  --color-border: hsl(30 12% 89%);
  --color-border-soft: hsl(30 12% 92%); /* Panel-Innenlinien */

  /* ----------------------------------------
     Schrift

     `--color-text-meta` ist die Untergrenze für Mono-Metalabels: darunter fällt
     der Kontrast gegen Papier unter 4.5:1. Metalabels nie kleiner als 11px.
     ---------------------------------------- */
  --color-text: hsl(30 12% 13%);
  --color-text-body: hsl(30 11% 22%);
  --color-text-muted: hsl(30 10% 30%);
  --color-text-meta: hsl(30 8% 38%);

  /* ----------------------------------------
     Akzent
     ---------------------------------------- */
  --color-primary: hsl(189 62% 24%);
  --color-primary-hover: hsl(189 68% 20%);
  --color-primary-ink: hsl(189 55% 26%); /* Teal als Textfarbe auf hell */
  --color-primary-tint: hsl(189 30% 93%); /* aktive Nav, Chips */
  --color-primary-line: hsl(189 25% 84%);
  /* Schrift auf der Akzentfläche. Hell auf dem tiefen Teal — im Dunkelmodus kehrt sich das um. */
  --color-on-primary: hsl(40 20% 98%);

  /* Verläufe — dezent, nur als Wäsche hinter Hero, Nebensäule und Chartfläche */
  --gradient-hero: radial-gradient(80% 100% at 12% -20%, hsl(189 40% 94%), transparent 60%);
  --gradient-aside: linear-gradient(120deg, hsl(189 35% 96%), hsl(40 20% 98%) 62%);
  --gradient-chart: linear-gradient(180deg, hsl(189 30% 98%), hsl(0 0% 100%));

  /* Semantic Colors */
  --color-success: hsl(142 76% 36%);
  --color-success-bg: hsl(142 76% 95%);
  --color-warning: hsl(38 92% 50%);
  --color-warning-bg: hsl(38 92% 95%);
  --color-error: hsl(0 84% 60%);
  --color-error-bg: hsl(0 84% 95%);
  --color-info: hsl(211 100% 50%);
  --color-info-bg: hsl(211 100% 95%);

  /* ----------------------------------------
     Chart-Farbrollen

     kestrel-chartkit liefert semantische Rollen, keine Farben (siehe plan/005).
     Das Mapping auf konkrete Werte passiert hier — deshalb funktioniert
     derselbe Szenen-Export in Light und Dark, ohne dass die Bibliothek etwas
     über das Theme weiß.

     Bewusst kein sattes Grün/Rot: Die Grundstimmung soll nicht nach
     Trading-Terminal aussehen (plan/003).
     ---------------------------------------- */
  --chart-bullish: hsl(168 42% 32%);
  --chart-bearish: hsl(8 52% 46%);
  --chart-neutral: hsl(30 8% 55%);
  --chart-grid: hsl(30 10% 91%);
  --chart-axis: hsl(30 8% 50%);
  --chart-series-primary: hsl(189 62% 30%);
  --chart-series-secondary: hsl(258 34% 48%);
  --chart-series-tertiary: hsl(28 62% 45%);
  --chart-zone-support: hsl(168 42% 32% / 0.14);
  --chart-zone-resistance: hsl(8 52% 46% / 0.14);
  --chart-zone-neutral: hsl(30 8% 55% / 0.12);
  --chart-annotation: hsl(30 12% 22%);
  --chart-annotation-muted: hsl(30 8% 48%);
  --chart-highlight: hsl(43 84% 52%);

  /* Eignungs-Skala (plan/006) — dreiwertig, nicht Ampel */
  --verdict-applicable: hsl(168 42% 32%);
  --verdict-applicable-bg: hsl(168 40% 95%);
  --verdict-limited: hsl(38 78% 30%);
  --verdict-limited-bg: hsl(38 78% 95%);
  --verdict-misleading: hsl(8 52% 46%);
  --verdict-misleading-bg: hsl(8 60% 96%);

  /* ----------------------------------------
     Typografie
     ---------------------------------------- */
  --font-serif: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --font-sans:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  /* Typo-Skala der Entwürfe 2a/2b */
  --text-hero: 3.625rem; /* 58px, serif 400, lh 1.06, ls -0.02em */
  --text-h1: 2.625rem; /* 42px, serif 400, lh 1.12 */
  --text-h2: 2.0625rem; /* 33px, serif 400, ls -0.015em */
  --text-h2-sub: 1.6875rem; /* 27px, Kapitel-H2 */
  --text-h3: 1.5rem; /* 24px, serif 400 */
  --text-lead: 1.25rem; /* 20px, serif, lh 1.55 */
  --text-body: 1.03125rem; /* 16.5px, sans, lh 1.72 */
  --text-body-s: 0.96875rem; /* 15.5px, lh 1.7 */
  --text-ui: 0.875rem; /* 14px */
  --text-ui-s: 0.8125rem; /* 13px */
  --text-meta: 0.71875rem; /* 11.5px mono, uppercase, ls 0.14em */

  /* Lesestrecke: Maß und Rhythmus stehen als Tokens, damit Kapitel- und
     Referenzseiten dieselbe Spalte teilen. */
  --measure-prose: 68ch;
  --measure-wide: 92ch;
  --leading-prose: 1.72;
  --leading-tight: 1.25;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 3.5rem; /* 56px — Sektions-Padding der Startseite */

  /* Border Radius — größer als vorher, das ist der „ruhige" Teil */
  --radius-sm: 0.375rem; /* 6px  Chart-Innenflächen */
  --radius-md: 0.5rem; /* 8px  Buttons, Suchfeld */
  --radius-lg: 0.625rem; /* 10px Callouts, Nav-Karten, Prev/Next */
  --radius-xl: 0.75rem; /* 12px Panels, Header-Leiste */
  --radius-2xl: 0.875rem; /* 14px Hero-Chart-Panel */
  --radius-pill: 999px;

  /* ----------------------------------------
     Schatten

     Alle mit negativem Spread und niedriger Deckkraft — sie sollen Tiefe
     andeuten, nicht Karten „abheben".
     ---------------------------------------- */
  --shadow-header: 0 10px 28px -22px hsl(30 20% 20% / 0.45);
  --shadow-panel: 0 14px 34px -28px hsl(30 25% 20% / 0.5);
  --shadow-panel-lg: 0 18px 40px -32px hsl(30 25% 20% / 0.5);
  --shadow-hero: 0 26px 54px -34px hsl(30 25% 20% / 0.45);
  --shadow-cta: 0 10px 22px -14px hsl(189 62% 24% / 0.9);

  /* Generische Stufen — von `.card`, Prosa-Bildern und den Tailwind-Utilities
     genutzt, deshalb weiterhin gesetzt. */
  --shadow-sm: 0 1px 2px 0 hsl(30 25% 20% / 0.05);
  --shadow-md: 0 8px 20px -16px hsl(30 25% 20% / 0.45);
  --shadow-lg: var(--shadow-panel);
  --shadow-xl: var(--shadow-panel-lg);

  /* Fuß — die einzige dunkle Fläche der hellen Seite. Als Tokens, damit sie im Dunkelmodus
     dem kühlen Neutral folgen kann statt bräunlich stehenzubleiben. */
  --color-footer: hsl(30 10% 14%);
  --color-footer-text: hsl(40 8% 78%);
  --color-footer-muted: hsl(40 6% 62%);
  --color-footer-link: hsl(40 8% 82%);

  /* Glas */
  --glass-bg: hsl(40 22% 99% / 0.78);
  --glass-blur: blur(14px);

  /* Höhe der schwebenden Kopfleiste inklusive der 16px Luft darüber.
     Die klebenden Spalten der Kapitelseite hängen daran. */
  --header-offset: 4.75rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

.dark {
  /* Der Dunkelmodus wechselt das Neutral von warm auf kühl — die Glasleiste und
     die weiten Schatten brauchen einen Grund, der nicht ins Bräunliche kippt. */
  --color-surface: hsl(205 22% 12%);
  --color-paper: hsl(205 24% 9%);
  --color-surface-alt: hsl(205 26% 11%);
  --color-secondary: hsl(205 20% 15%);
  --color-border: hsl(200 16% 22%);
  --color-border-soft: hsl(200 16% 18%);

  --color-text: hsl(190 20% 96%);
  --color-text-body: hsl(190 14% 88%);
  --color-text-muted: hsl(190 10% 72%);
  --color-text-meta: hsl(190 10% 62%);

  --color-primary: hsl(180 50% 40%);
  --color-primary-hover: hsl(180 55% 34%);
  --color-primary-ink: hsl(180 45% 72%);
  --color-primary-tint: hsl(180 40% 20% / 0.45);
  --color-primary-line: hsl(180 28% 30%);
  /* Umgekehrt zum Hellmodus: Die Akzentfläche ist hier hell, die Schrift darauf dunkel.
     Heller Text auf `hsl(180 50% 40%)` käme nur auf 3,3:1. */
  --color-on-primary: hsl(205 24% 9%);

  --color-footer: hsl(205 28% 7%);
  --color-footer-text: hsl(190 10% 72%);
  --color-footer-muted: hsl(190 8% 58%);
  --color-footer-link: hsl(190 12% 84%);

  --gradient-hero: radial-gradient(120% 90% at 8% -10%, hsl(180 45% 22% / 0.5), transparent 60%);
  --gradient-aside: linear-gradient(100deg, hsl(180 40% 18% / 0.55), hsl(205 22% 12%) 55%);
  --gradient-chart: linear-gradient(180deg, hsl(205 22% 13%), hsl(205 24% 10%));

  --glass-bg: hsl(205 24% 10% / 0.8);

  /* Semantic Colors - Dark Mode */
  --color-success: hsl(142 76% 50%);
  --color-success-bg: hsl(142 76% 15%);
  --color-warning: hsl(38 92% 60%);
  --color-warning-bg: hsl(38 92% 15%);
  --color-error: hsl(0 84% 70%);
  --color-error-bg: hsl(0 84% 15%);
  --color-info: hsl(211 100% 60%);
  --color-info-bg: hsl(211 100% 15%);

  /* Chart-Farbrollen - Dark Mode
     Die neutralen Rollen (Gitter, Achse, Annotation) folgen dem kühlen Grund,
     die Serien- und Richtungsrollen behalten ihren Farbton. */
  --chart-bullish: hsl(168 48% 52%);
  --chart-bearish: hsl(8 62% 62%);
  --chart-neutral: hsl(200 10% 58%);
  --chart-grid: hsl(200 16% 20%);
  --chart-axis: hsl(200 10% 56%);
  --chart-series-primary: hsl(180 50% 58%);
  --chart-series-secondary: hsl(258 48% 70%);
  --chart-series-tertiary: hsl(28 68% 62%);
  --chart-zone-support: hsl(168 48% 52% / 0.18);
  --chart-zone-resistance: hsl(8 62% 62% / 0.18);
  --chart-zone-neutral: hsl(200 10% 58% / 0.14);
  --chart-annotation: hsl(190 14% 88%);
  --chart-annotation-muted: hsl(200 10% 62%);
  --chart-highlight: hsl(43 88% 62%);

  /* Eignungs-Skala - Dark Mode */
  --verdict-applicable: hsl(168 48% 55%);
  --verdict-applicable-bg: hsl(168 40% 14%);
  --verdict-limited: hsl(38 82% 60%);
  --verdict-limited-bg: hsl(38 60% 14%);
  --verdict-misleading: hsl(8 62% 64%);
  --verdict-misleading-bg: hsl(8 45% 15%);

  /* Shadows - Dark Mode */
  --shadow-header: 0 10px 28px -22px hsl(0 0% 0% / 0.6);
  --shadow-panel: 0 14px 34px -28px hsl(0 0% 0% / 0.6);
  --shadow-panel-lg: 0 18px 40px -32px hsl(0 0% 0% / 0.6);
  --shadow-hero: 0 26px 54px -34px hsl(0 0% 0% / 0.6);
  --shadow-cta: 0 10px 22px -14px hsl(180 60% 40% / 0.8);
  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
  --shadow-md: 0 8px 20px -16px hsl(0 0% 0% / 0.55);
  --shadow-lg: var(--shadow-panel);
  --shadow-xl: var(--shadow-panel-lg);
}