/* Replain Design Tokens — Web-Quelle (single source of truth)
   Stand: 2026-09-11. Abgeleitet aus ci-design.md (Farbe/Schrift) und Skill apple-design (Motion).
   Drei Ebenen: Primitive -> Semantic -> Component. In Komponenten NIE Rohwerte, immer var(--...).
   Themes: hell ist Default; dunkel via prefers-color-scheme UND [data-theme] (Toggle gewinnt). */

:root {
  /* ============ PRIMITIVE ============ */

  /* Farbe — exakt aus ci-design.md */
  --petrol-950: #06181F;
  --petrol-900: #0A2431;
  --petrol-800: #0F3548;
  --petrol-700: #164A60;
  --petrol-600: #1E5C77; /* interpoliert (CI-Spielraum), Hover/aktiv auf Hell */
  /* Champagner/Gold ist am 11.09.2026 aus der CI genommen (SalahEddin).
     Die Primitive sind entfernt. --color-accent-hairline bleibt als Name
     bestehen, damit bestehende Oberflaechen nicht brechen, zeigt aber auf
     die neutrale Kante. Neue Arbeit nimmt gleich --color-border-strong. */
  --petrol-tint: #E1E9ED;
  --bg-base:    #F6F8F9;
  --surface:    #FFFFFF;
  --ink:        #0B1E27;
  --ink-muted:  #475B66;
  --on-dark:        #EAF0F2;
  --on-dark-strong: #FFFFFF;
  /* Gedämpfter Text und Kanten auf dunklem Grund. Dieselben Werte, die das
     dunkle Theme weiter unten schon verwendet, hier als eigene Primitive:
     eine helle Seite kann eine dunkle Fläche tragen (Datenkarte, Sektion,
     Fußzeile), und dort braucht sie diese Werte, ohne dass das ganze Theme
     kippt. Ohne sie schreibt jede solche Komponente ihre eigenen Rohwerte,
     und die Marke franst genau dort aus, wo sie am sichtbarsten ist. */
  --on-dark-muted:  #8CA3AD;
  --rule-on-dark:        rgba(255,255,255,.14);
  --rule-on-dark-strong: rgba(255,255,255,.28);
  --fn-success: #1E6B47;
  --fn-error:   #A93338;
  --fn-warning: #8A5E1A;
  /* getönte Status-Flächen (hell) */
  --fn-success-surface: #DCEBE3;
  --fn-warning-surface: #F4ECDA;
  --fn-error-surface:   #F3DEDF;

  /* Spacing — 4px-Basis */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  /* Radius — moderat, seriös (nicht alles Pille) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Schatten/Elevation — kühl, petrol-getönt, ruhig, kein reines Schwarz */
  --shadow-1: 0 1px 2px rgba(6,24,31,.06), 0 1px 1px rgba(6,24,31,.04);
  --shadow-2: 0 2px 8px -2px rgba(6,24,31,.10), 0 1px 2px rgba(6,24,31,.06);
  --shadow-3: 0 8px 24px -8px rgba(6,24,31,.14), 0 2px 6px rgba(6,24,31,.08);
  --shadow-4: 0 24px 48px -16px rgba(6,24,31,.22), 0 8px 16px -8px rgba(6,24,31,.12);

  /* Typografie: ausschließlich Inter Variable aus brand/fonts/fonts.css */
  --font-sans: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 1rem;     /* 16 */
  --text-md: 1.125rem;   /* 18 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 2rem;      /* 32 */
  --text-3xl: 2.5rem;    /* 40 */
  --text-display: clamp(2.5rem, 5vw, 4rem);
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  /* Laufweite (Pflicht, macht den Replain-Look) */
  --tracking-heading: -0.03em;
  /* Ueberschriften unter ~40px, vor allem auf dem Telefon. Laufweite ist
     groessenabhaengig (apple-design §15): -0.03em ist erst ab grossen Graden
     richtig, bei 28px klebt der Text. Nicht als Ersatz fuer --tracking-heading
     verwenden, sondern nur dort, wo die Ueberschrift klein gesetzt ist. */
  --tracking-heading-sm: -0.02em;
  --tracking-body: -0.011em;
  --tracking-label: -0.008em;
  --tracking-wide: 0.14em; /* Uppercase-Labels/Eyebrow */

  /* Motion — apple-design als Tokens. Nie ease-in, nie transition: all. */
  --motion-fast: 100ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-decelerate: cubic-bezier(0,0,.2,1);
  /* Federn sind JS (nicht in CSS abbildbar) — Presets stehen in tokens.json und design-system.md */

  /* Chart / Data-Viz — kühl, seriös, unterscheidbar (Dashboards) */
  --chart-1: #164A60; /* Petrol */
  --chart-2: #2F7E7A; /* Teal */
  --chart-3: #5B7C99; /* Slate-Blau */
  --chart-4: #3F7A54; /* Gedämpftes Grün */
  --chart-5: #6E8CA0; /* Stahl */
  --chart-6: #4E5F8A; /* Indigo */
  /* Sequenziell (ein Ton, hell -> dunkel) */
  --chart-seq-1: #E1E9ED; --chart-seq-2: #A9C0C9; --chart-seq-3: #5E8698; --chart-seq-4: #2B647C; --chart-seq-5: #0A2431;
  /* Divergierend (Petrol <-> Teal über Neutral) */
  --chart-div-1: #0F3548; --chart-div-2: #5E8698; --chart-div-3: #E1E9ED; --chart-div-4: #8AB8B3; --chart-div-5: #2F7E7A;

  /* Layout */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --container-prose: 65ch;
  --container-content: 1120px;
  --touch-min: 44px;

  /* ============ SEMANTIC (hell = Default) ============ */
  --color-bg: var(--bg-base);
  --color-bg-tinted: var(--petrol-tint);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-brand: var(--petrol-900);
  --color-primary: var(--petrol-700);
  --color-primary-hover: var(--petrol-800);
  --color-primary-active: var(--petrol-950);
  --color-on-primary: var(--on-dark-strong);
  --color-accent-hairline: var(--color-border-strong); /* Altname, zeigt auf die neutrale Kante */
  --color-on-dark: var(--on-dark);
  --color-on-dark-strong: var(--on-dark-strong);
  --color-border: rgba(10,36,49,.12);
  --color-border-strong: rgba(10,36,49,.20);
  --color-focus: var(--petrol-700);
  --color-success: var(--fn-success);
  --color-warning: var(--fn-warning);
  --color-error: var(--fn-error);
  --color-success-surface: var(--fn-success-surface);
  --color-warning-surface: var(--fn-warning-surface);
  --color-error-surface: var(--fn-error-surface);

  --elevation-1: var(--shadow-1);
  --elevation-2: var(--shadow-2);
  --elevation-3: var(--shadow-3);
  --elevation-4: var(--shadow-4);

  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-pill: var(--radius-full);

  /* translucentes Material (funktional, apple-design §12) */
  --material-surface: rgba(255,255,255,.78);
  --material-blur: 24px;
  --material-saturate: 180%;
  --scrim: rgba(6,24,31,.5);

  /* Chart-Support */
  --chart-grid: var(--color-border);
  --chart-axis: var(--color-text-muted);
  --chart-label: var(--color-text-muted);

  /* ============ COMPONENT ============ */
  --button-bg: var(--color-primary);
  --button-bg-hover: var(--color-primary-hover);
  --button-bg-active: var(--color-primary-active);
  --button-fg: var(--color-on-primary);
  --button-radius: var(--radius-control);
  --button-pad-y: var(--space-3);
  --button-pad-x: var(--space-4);
  --button-ghost-bg: var(--color-bg-tinted);
  --button-ghost-fg: var(--color-primary);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-shadow: var(--elevation-1);
  --card-pad: var(--space-4);

  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-radius: var(--radius-control);
  --input-focus-ring: var(--color-focus);

  --pill-radius: var(--radius-pill);
  --pill-pad-y: var(--space-1);
  --pill-pad-x: var(--space-2);
}

/* ============ DARK THEME ============ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--petrol-950);
    --color-bg-tinted: var(--petrol-800);
    --color-surface: var(--petrol-900);
    --color-text: var(--on-dark);
    --color-text-muted: var(--on-dark-muted);
    --color-brand: var(--on-dark-strong);
    --color-primary: var(--petrol-600);
    --color-primary-hover: #2A6E8A;
    --color-primary-active: var(--petrol-700);
    --color-on-primary: var(--on-dark-strong);
    --color-accent-hairline: var(--color-border-strong);
    --color-border: var(--rule-on-dark);
    --color-border-strong: var(--rule-on-dark-strong);
    --color-focus: var(--on-dark-strong);
    --color-success-surface: rgba(30,107,71,.20);
    --color-warning-surface: rgba(138,94,26,.22);
    --color-error-surface: rgba(169,51,56,.22);
    --material-surface: rgba(15,53,72,.72);
    --scrim: rgba(2,10,14,.6);
  }
}
:root[data-theme="light"] {
  --color-bg: var(--bg-base);
  --color-bg-tinted: var(--petrol-tint);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-brand: var(--petrol-900);
  --color-primary: var(--petrol-700);
  --color-primary-hover: var(--petrol-800);
  --color-primary-active: var(--petrol-950);
  --color-accent-hairline: var(--color-border-strong);
  --color-border: rgba(10,36,49,.12);
  --color-border-strong: rgba(10,36,49,.20);
  --color-focus: var(--petrol-700);
  --material-surface: rgba(255,255,255,.78);
  --scrim: rgba(6,24,31,.5);
}
:root[data-theme="dark"] {
  --color-bg: var(--petrol-950);
  --color-bg-tinted: var(--petrol-800);
  --color-surface: var(--petrol-900);
  --color-text: var(--on-dark);
  --color-text-muted: var(--on-dark-muted);
  --color-brand: var(--on-dark-strong);
  --color-primary: var(--petrol-600);
  --color-primary-hover: #2A6E8A;
  --color-primary-active: var(--petrol-700);
  --color-accent-hairline: var(--color-border-strong);
  --color-border: var(--rule-on-dark);
  --color-border-strong: var(--rule-on-dark-strong);
  --color-focus: var(--on-dark-strong);
  --material-surface: rgba(15,53,72,.72);
  --scrim: rgba(2,10,14,.6);
}

/* ============ REDUCED PREFERENCES (apple-design §14) ============ */
@media (prefers-reduced-transparency: reduce) {
  :root { --material-surface: var(--color-surface); --material-blur: 0px; }
}

/* Reduced motion wird pro Komponente bedient (Federn/Slides durch Cross-Fade ersetzen):
   --motion-* Dauern bleiben nutzbar, Feder-Presets (JS) auf gedaempft schalten. */