/* aktklar Designsystem 1.0 (Richtung C + B), gemeinsam für App und Website.
   Quelle: design/v3/SYSTEM.md. Schriften: brand/fonts.css (OFL).
   Regeln: Petrol führt. Rot nur Frist und Fehlt. Gold nur „wartet auf Sie“. Erledigt ist nie rot.
   Status nie nur über Farbe: jede Statusfarbe hat eine Strichart und einen Text. */

:root {
  /* ---------- Farbe: Petrol (Leitfarbe) ---------- */
  --petrol-50: #EEF5F5;
  --petrol-100: #DCEBEC;
  --petrol-200: #B7D6D9;
  --petrol-300: #86B9BF;
  --petrol-400: #4E949E;
  --petrol-500: #1D7684;
  --petrol-600: #0B5D6B;   /* Marke, Primäraktion, Linie erledigt */
  --petrol-700: #094D59;   /* Hover/gedrückt, Petrol-Text auf Papier */
  --petrol-800: #083D47;
  --petrol-900: #062E36;
  --petrol-on-dark: #7FC0C8;

  /* ---------- Graphit + Papier (Neutrals) ---------- */
  --ink: #0F2229;          /* Text primär */
  --ink-2: #3F5158;        /* Text sekundär */
  --ink-3: #5B6B71;        /* Text tertiär, kleinste noch AA-Stufe auf Papier */
  --ink-disabled: #8D999D; /* nur deaktiviert (WCAG-ausgenommen) */
  --paper: #FAF8F3;        /* Grund */
  --paper-2: #F3F0E8;      /* Fläche gedämpft, Hover Ghost */
  --paper-3: #ECE8DE;      /* deaktivierte Fläche */
  --surface: #FFFFFF;      /* Karten, Panels, Original */
  --line: #E2DDD2;         /* Haarlinie */
  --line-strong: #CFC8BA;  /* Sekundärrand, Trenner */
  --line-input: #858F92;   /* Eingaberand, 3:1 gegen Weiß (WCAG 1.4.11) */
  --line-ink: rgba(15, 34, 41, .10);
  --night: #0F1214;        /* Website-Pille, dunkle Bänder */

  /* ---------- Signal: Rot (nur Frist + Fehlt) ---------- */
  --red-50: #FBEDEA;
  --red-200: #F0C2BA;
  --red-500: #D84A3C;      /* Fläche/Rahmen Lücke, Fristmarker */
  --red-700: #A9342A;      /* Rot als Text */

  /* ---------- Signal: Gold (nur „wartet auf Sie“) ---------- */
  --gold-100: #FBF0D2;
  --gold-400: #E9B23A;     /* nur Fläche mit Tinte darauf, nie Goldtext auf Weiß */
  --gold-800: #7A5300;     /* Gold als Text */

  /* ---------- Semantische Rollen ---------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-2);
  --fg-subtle: var(--ink-3);
  --accent: var(--petrol-600);
  --accent-hover: var(--petrol-700);
  --accent-text: var(--petrol-700);
  --focus: var(--petrol-700);

  --status-done: var(--petrol-600);          /* Linie voll */
  --status-active: var(--petrol-600);        /* Linie schraffiert */
  --status-waiting-applicant: var(--ink-3);  /* Linie gestrichelt: wartet auf Nachreichung */
  --status-waiting-you: var(--gold-400);     /* Knoten gold: wartet auf Sie */
  --status-missing: var(--red-500);          /* beschriftete Lücke */
  --status-planned: var(--line-strong);      /* Linie punktiert */

  /* Strichmuster (Statussprache der Linie) */
  --stroke: 4px;
  --hatch: repeating-linear-gradient(-45deg, var(--petrol-600) 0 2px, transparent 2px 6px);
  --dash: repeating-linear-gradient(90deg, var(--ink-3) 0 8px, transparent 8px 13px);
  --dot: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 7px);

  /* Rasterpapier (Hintergrund-Token, 32px App, 56px Website) */
  --grid-ink: rgba(15, 34, 41, .035);
  --grid-paper: linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 32px 32px,
                linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 32px 32px,
                var(--paper);
  --grid-paper-web: linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 56px 56px,
                    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 56px 56px,
                    var(--paper);

  /* ---------- Schrift ---------- */
  --font-sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;   /* nur Website + Fallname */
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Skala: Größe / Zeilenhöhe / Tracking je Stufe (nie eine Zeilenhöhe für alles) */
  --t-hero-size: 84px;   --t-hero-lh: 0.95;  --t-hero-track: -0.02em;   /* Serif, Website */
  --t-display-size: 56px;--t-display-lh: 1.0; --t-display-track: -0.015em;/* Serif, Website-H2 */
  --t-case-size: 40px;   --t-case-lh: 1.05;  --t-case-track: -0.01em;    /* Serif, Fallname */
  --t-h1-size: 28px;     --t-h1-lh: 1.15;    --t-h1-track: -0.022em;    /* Sans 600 */
  --t-h2-size: 20px;     --t-h2-lh: 1.25;    --t-h2-track: -0.014em;    /* Sans 600 */
  --t-q-size: 22px;      --t-q-lh: 1.25;     --t-q-track: -0.018em;     /* Fragekarte */
  --t-h3-size: 16px;     --t-h3-lh: 1.35;    --t-h3-track: -0.006em;    /* Sans 600 */
  --t-body-size: 15px;   --t-body-lh: 1.5;   --t-body-track: 0;
  --t-small-size: 13.5px;--t-small-lh: 1.45; --t-small-track: 0;
  --t-label-size: 13px;  --t-label-lh: 1.3;  --t-label-track: 0.002em;  /* Satzschreibung, 500 */
  --t-mono-size: 12.5px; --t-mono-lh: 1.4;   --t-mono-track: 0;         /* Daten, GZ, Achse; min. 12px */
  --t-web-body-size: 18px; --t-web-body-lh: 1.55;

  /* ---------- Raum ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ---------- Radien: scharf (Arbeit, Linie) vs. weich (schwebend, Website) ---------- */
  --r-0: 0;        /* Linie, Lücke, Matrixzellen */
  --r-1: 2px;      /* Linienkappen, Fristmarker */
  --r-2: 4px;      /* Original-Seite, Tags, Tastenkappe innen */
  --r-3: 6px;      /* Fenster, Panels, Eingaben, Tastenkappe */
  --r-4: 8px;      /* App-Button (Digicust 40px r8) */
  --r-5: 11px;     /* Website-Button (Texterous r11.2), Fragekarte */
  --r-6: 16px;     /* schwebende Produktkarten Website */
  --r-pill: 999px; /* Glean-Pille, Website-CTA */

  /* ---------- Schatten (geschichtet: Kante + Ambient + direkt) ---------- */
  --sh-hairline: 0 0 0 1px var(--line-ink);
  --sh-1: 0 0 0 1px var(--line-ink);
  --sh-2: 0 0 0 1px var(--line-ink), 0 4px 12px -6px rgba(15, 34, 41, .10);
  --sh-3: 0 0 0 1px var(--line-ink), 0 16px 36px -20px rgba(15, 34, 41, .28);
  --sh-btn-primary: none;
  --sh-btn-secondary: none;
  --sh-keycap: inset 0 -2px 0 var(--line-strong);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus);

  /* ---------- Motion (Emil Kowalski) ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* Enter/Exit, Feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* Bewegung auf dem Schirm */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* Panels, Brief-Spalte */
  --ease-hover: ease;                                /* Farbwechsel */
  --d-0: 0ms;      /* Tastaturaktionen J/P/D/U, ⌘K: nie animiert */
  --d-press: 120ms;/* Button :active */
  --d-1: 150ms;    /* Hover, Tooltip */
  --d-2: 200ms;    /* Popover, Dropdown, Fehlertext */
  --d-3: 260ms;    /* Panel, Dialog, Lücke schließt sich */
  --d-exit: 160ms; /* Exit immer schneller als Enter */
  --d-web-1: 600ms;  /* Website: Text-Reveal */
  --d-web-2: 1200ms; /* Website: Linie zeichnen (DrawSVG) */
  --d-web-3: 1800ms; /* Website: Förderbeginn rückt nach rechts */
  --press-scale: 0.97;
  --loading-delay: 200ms;  /* Lädt-Anzeige erst nach 200ms */
  --loading-min: 400ms;    /* dann mindestens 400ms sichtbar */
}

/* Reduced Motion = weniger, nicht null: Bewegung raus, Deckkraft/Farbe bleiben kurz. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-3: 120ms;
    --d-web-1: 0ms;
    --d-web-2: 0ms;
    --d-web-3: 0ms;
    --press-scale: 1;
  }
}