/* Design-Tokens — 1:1 aus Figma „Concept Cockpit" (165:2312) gezogen.
   CLAAS UI Library / Angular Material Theming. Siehe konzept/10. */

/* Offizielle Hausschrift CLAAS Cultiva — lokal gehostet (src/assets/fonts/), kein CDN (D-024).
   Geliefert wurden Regular (400) und Bold (700); „Medium" (500) fällt mangels Schnitt auf 400. */
@font-face {
  font-family: "CLAAS Cultiva";
  src: url("assets/fonts/CLAASCultiva-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CLAAS Cultiva";
  src: url("assets/fonts/CLAASCultiva-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand / Primär */
  --claas-lime:        #b3c618;   /* primary/main  — die „CLAAS-Grün"-Primärfarbe */
  --claas-lime-dark:   #8d9d00;   /* primary/inherit — Hover/Active der Brand-Lime (Buttons/Toggles/Fokus) */
  --table-chip:        #6b7613;   /* Tisch-Chip (D-040) — Quelle: Figma CLAAS-Temp 26:1591/28:1735; dunkles Oliv, Weiß darauf 4.98:1 */
  /* Datenvisualisierung — DS Additional-Palette (Figma 77:6642), dunklere ≥3:1-Stufen. NUR Diagramm-Linien
     (nicht Status/Marke). Alle 6 auf weißem Grund ≥3:1 (WCAG 1.4.11): ~9.1/8.2/4.4/4.6/6.4/5.3:1. */
  --chart-1:           #254e5a;   /* Petrol 900 */
  --chart-2:           #44498b;   /* Blueberry 800 */
  --chart-3:           #977210;   /* Brown 500 */
  --chart-4:           #cc4c02;   /* Rust-Red 500 */
  --chart-5:           #016c59;   /* Sea-Green 800 */
  --chart-6:           #7556ce;   /* Blue-Violet 500 */
  --claas-logo-red:    #fe0001;

  /* D-021: KEIN Weiß auf Lime. Primärtext auf Lime = schwarz (primary/contrast). */
  --on-primary:        rgba(0,0,0,0.87);   /* #000000de */
  /* primary/contrastText (#FFFFFF) existiert im DS, wird hier bewusst NICHT auf Lime genutzt. */

  /* Status = DS NOTIFICATION-Farben (Figma 77:6642) — bewusst GETRENNT von der Brand-Lime: Lime = Aktion/Button
     (s. --claas-lime), Notification-Grün/-Rot = NUR Status/Häkchen/Badge/Status-Flächen. */
  --status-ok:       #00853e;   /* Notification Green 500 — i.O./fertig; weißer Text darauf 4.74:1, auf Weiß als Marke 4.74:1. NICHT für Buttons. */
  --status-ok-soft:  #eff7ee;   /* Notification Green Soft-BG (hellgrüner Grund/Chip) */
  --status-ok-dark:  #1b5e20;   /* dunkles OK-Grün — Marke/Text auf hellem Grund (7.8:1) */
  --status-nok:      #e31b0c;   /* Notification Red 500 — Fehler/n.i.O.-Fläche (weißer Text 4.74:1) */
  --status-nok-text: #c62828;   /* rotes Textniveau auf hellem Grund (5.6:1 — kleiner roter Text/Heading) */
  --status-nok-soft: #fde1df;   /* Notification Red Soft-BG (hellrote Fläche) */
  --status-warn:     #eb6405;   /* Notification Orange — Warnung / Range-Gesamtbereich */
  --status-none:     #8f8f8f;   /* keine Daten = neutrales DS-Grau (Grey 500) */

  /* Text */
  --text-primary:   rgba(0,0,0,0.87);
  --text-secondary: rgba(0,0,0,0.64);   /* secondary/main — DS text/secondary */
  --text-disabled:  rgba(0,0,0,0.30);

  /* Flächen / Linien */
  --surface:        #ffffff;   /* background/paper */
  --surface-grey:   #f5f5f5;   /* Surface/Grey_2 */
  --surface-rail:   #fafafa;   /* DS Grey 50 */
  --avatar-fill:    #ededed;   /* DS Grey 200 — avatar/fill, Stepper-Badge & aktive Modul-Karte */
  --divider:        #e0e0e0;   /* DS Grey 300 */
  --border-faint:   rgba(0,0,0,0.12);  /* other/divider 12% — Panel-/Karten-Rahmen */
  --outline:        #8f8f8f;   /* Gray4 — other/outline-border */
  --outline-input:  #8f8f8f;
  --selected:       rgba(0,0,0,0.08);  /* action/selected */

  /* Typografie */
  --font-body:   "CLAAS Cultiva", "Segoe UI", system-ui, Arial, sans-serif;
  --font-header: "CLAAS Cultiva", "Segoe UI", system-ui, Arial, sans-serif;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-body2:   14px;  --lh-body2:   20px;
  --fs-body1:   16px;  --lh-body1:   24px;
  --fs-h6:      18px;  --lh-h6:      26px;   /* Panel-Sektions-Überschriften (TEST SEQUENCE …) */
  --fs-h5:      20px;  --lh-h5:      28px;
  --fs-h3:      24px;  --lh-h3:      32px;   /* Schrittname (Eyebrow über der Beschreibung) */
  --fs-h1:      32px;  --lh-h1:      40px;   /* Schritt-Beschreibung (große Überschrift) */
  --fs-heading: 28px;             /* Schritt-Überschrift (Main Area) */

  /* Flash-Karte — eigene, profil-skalierende Stufen (D-037-Vereinheitlichung), abgeleitet aus der globalen
     --fs-*-Skala, je +1 Stufe ggü. den vorherigen Roh-px (caption→body2, body2→body1). Damit liegt Flash-Text
     im selben Größen-Rhythmus wie Stepper/Schrittname statt punktuell winzig. Minimal NICHT < 14 (Floor). */
  --fs-flash-title-full:    20px;   /* ≈ --fs-h5  (Full bleibt ~20) */
  --fs-flash-title-kompakt: 18px;   /* ≈ --fs-h6  (16→18) */
  --fs-flash-title-minimal: 16px;   /* (14→16) */
  --fs-flash-title-single:  24px;   /* ≈ --fs-h3  (Single bleibt ~24) */
  --fs-flash-sec:           16px;   /* Sub/CTA/Buttons/Msg (body2 14→16) */
  --fs-flash-label:         14px;   /* Badge/Restzeit/Status-Wort (caption 12→14) */

  /* Spacing */
  --sp-xxs: 4px; --sp-xs: 8px; --sp-1_5: 12px; --sp-m: 16px; --sp-l: 24px; --sp-xl: 32px;

  /* Radius / Elevation */
  --radius-s: 4px;
  --radius-full: 128px;
  --elevation-1: 0 2px 1px -1px #00000033, 0 1px 1px #00000024, 0 1px 3px #0000001f;

  /* Anatomie-Maße (Compact 24″) */
  --header-h: 80px;          /* Figma „Header" 217:2637 */
  --footer-h: 80px;          /* Figma „Footer" 223:2363 */
  --rail-left-w:  288px;     /* Sequence-/Settings-Panel (≈10 % schmaler als 320) */
  --rail-right-w: 288px;
  --action-h: 68px;          /* große Schritt-Buttons (Figma 138:3104) */
  --touch-min: 40px;
  --logo-h: 28px;            /* CLAAS-Logo-Höhe im Header (Desktop) */
}

/* ---------- Kompakt-Breakpoint (< 1280px) ----------
   Bildschirme < 1280px: Typografie, Abstände, Panel-/Button-Maße verkleinern (Screendesign 402:5607).
   Da fast alles über Tokens läuft, skaliert das Überschreiben hier breitflächig mit. */
@media (max-width: 1280px) {
  :root {
    --fs-caption: 12px; --lh-caption: 16px;
    --fs-body2:   13px; --lh-body2:   18px;
    --fs-body1:   15px; --lh-body1:   22px;
    --fs-h6:      16px; --lh-h6:      22px;
    --fs-h5:      18px; --lh-h5:      24px;
    --fs-h3:      20px; --lh-h3:      28px;
    --fs-h1:      26px; --lh-h1:      32px;
    --fs-heading: 24px;

    /* Flash eine Stufe kleiner als Desktop, Label aber NICHT < 14 (Floor). */
    --fs-flash-title-full:    18px;
    --fs-flash-title-kompakt: 16px;
    --fs-flash-title-minimal: 15px;
    --fs-flash-title-single:  22px;
    --fs-flash-sec:           15px;
    --fs-flash-label:         14px;

    --sp-1_5: 10px; --sp-m: 12px; --sp-l: 18px; --sp-xl: 24px;

    --header-h: 64px;
    --footer-h: 64px;
    --rail-left-w:  248px;
    --rail-right-w: 248px;
    --action-h: 56px;
    --touch-min: 36px;
    --logo-h: 24px;
  }
}

/* ---------- Groß-Breakpoint (> 2000px) ----------
   Sehr breite/hochauflösende Bildschirme: Typografie, Abstände und Anatomie-Maße hochskalieren
   (Screendesign 446:12958). Werte aus dem Figma-Großlayout. */
@media (min-width: 2000px) {
  :root {
    --fs-caption: 16px; --lh-caption: 22px;
    --fs-body2:   18px; --lh-body2:   26px;
    --fs-body1:   20px; --lh-body1:   30px;
    --fs-h6:      20px; --lh-h6:      28px;
    --fs-h5:      24px; --lh-h5:      32px;
    --fs-h3:      24px; --lh-h3:      32px;    /* Werte (Settings/Meta), 3xl */
    --fs-h1:      60px; --lh-h1:      68px;    /* Schritt-Beschreibung (große Überschrift) */
    --fs-heading: 44px;

    --fs-flash-title-full:    24px;
    --fs-flash-title-kompakt: 22px;
    --fs-flash-title-minimal: 20px;
    --fs-flash-title-single:  30px;
    --fs-flash-sec:           20px;
    --fs-flash-label:         16px;

    --sp-xxs: 6px; --sp-xs: 10px; --sp-1_5: 16px; --sp-m: 20px; --sp-l: 32px; --sp-xl: 44px;

    --header-h: 104px;
    --footer-h: 104px;
    --rail-left-w:  420px;
    --rail-right-w: 320px;
    --action-h: 80px;
    --touch-min: 52px;
    --logo-h: 36px;
  }
}

/* ---------- Profil: Hall View (55″, Distanz) ----------
   DS deckt Hall nicht ab (D-021) → bewusste Abwandlung, CLAAS-Designsprache bleibt:
   größere Typo, dickere Linien, prominenter Status, Button-Row dezent. */
[data-profile="hall"] {
  --fs-caption: 16px; --lh-caption: 22px;
  --fs-body2:   20px; --lh-body2:   28px;
  --fs-body1:   24px; --lh-body1:   34px;
  --fs-h5:      28px; --lh-h5:      36px;
  --fs-heading: 48px;
  /* Flash am größten (Distanz): Titel/Sekundärtext deutlich hoch, Minimal-Label ≥ 18. */
  --fs-flash-title-full:    28px;
  --fs-flash-title-kompakt: 24px;
  --fs-flash-title-minimal: 22px;
  --fs-flash-title-single:  34px;
  --fs-flash-sec:           22px;
  --fs-flash-label:         18px;
  --header-h: 84px;
  --footer-h: 84px;
  --rail-left-w:  288px;
  --rail-right-w: 288px;
  --logo-h: 40px;            /* Hall: aus Distanz größer */
}

/* ---------- Profil: In-Cabin Tablet (Touch) ----------
   große Touch-Targets, kompaktere Meta. */
[data-profile="tablet"] {
  --fs-heading: 30px;
  /* Flash-Schriftgrößen = Desktop (normaler Betrachtungsabstand); Touch über größeres --touch-min (s. .fcard__btn). */
  --action-h: 76px;
  --touch-min: 48px;
  --rail-left-w:  288px;
  --rail-right-w: 288px;
  --logo-h: 26px;            /* Tablet: kompakt */
}