/*
 * Aktar Transport – Design-Tokens
 * Richtung „Anthrazit & Signalorange“, Version 1.1 (04.10.2026: Status Warnung; G1 Teil 1 bestanden am 03.10.2026);
 * Logo-Reinzeichnung in logo/ (07.10.2026, Regeln in logo/README.md; Werte hier unverändert)
 * Gemeinsame Quelle für Webseite (www-aktar) und interne Software (app-aktar).
 * Kontraste geprüft mit tools/kontrast.js (WCAG 2.2: Text ≥ 4,5:1, Nicht-Text ≥ 3:1).
 *
 * Regeln:
 * - Komponenten verwenden NUR die semantischen Tokens (--ak-bg, --ak-text, --ak-action-…),
 *   nie die Rohfarben direkt. So funktioniert der Dunkelmodus automatisch.
 * - Orange heißt Handeln: --ak-action-* nur für die EINE Hauptaktion je Ansicht (≈ ≤ 10 % Fläche).
 * - Rot heißt Problem: --ak-status-problem* nur für Verspätung und Fehler.
 * - „Eil“ ist kein Fehler: eigenes Schild in Anthrazit (--ak-eil-*), nie rot oder orange.
 * - Gelb heißt Achtung: --ak-status-warnung* für Fristen und bestätigte Sonderfälle, immer mit Warnsymbol und Text.
 */

:root {
  /* ── Rohfarben: Marke ─────────────────────────── */
  --ak-anthrazit: #1B242B;
  --ak-anthrazit-2: #26323B;
  --ak-anthrazit-3: #33414B;
  --ak-nacht: #12181C;
  --ak-orange: #C4420E;        /* Signalorange – Weiß darauf 5,08:1 */
  --ak-orange-dunkel: #A8380B; /* Hover/gedrückt – Weiß darauf 6,49:1 */
  --ak-orange-hell: #F2703A;   /* nur auf Anthrazit/Nacht (Indikator der Seitenleiste, Ziel im Logo) */

  /* ── Rohfarben: Neutral ───────────────────────── */
  --ak-weiss: #FFFFFF;
  --ak-flaeche: #F4F5F6;
  --ak-linie: #D5D9DD;
  --ak-linie-zeile: #E6E8EA;
  --ak-rahmen: #7A868F;        /* Eingabefelder – 3,73:1 auf Weiß */
  --ak-grau-text: #56626C;     /* Nebentext – 6,25:1 auf Weiß */
  --ak-grau-hell: #AEB8C0;     /* Nebentext auf Anthrazit – 7,81:1 */
  --ak-hell: #E8ECEF;          /* Text im Dunkelmodus */
  --ak-deaktiviert: #8A949C;   /* nur für deaktivierte Elemente (WCAG-Ausnahme) */

  /* ── Rohfarben: Status (hell) ─────────────────── */
  --ak-unterwegs: #2563EB;   --ak-unterwegs-flaeche: #E8EFFE;
  --ak-zoll: #7C3AED;        --ak-zoll-flaeche: #F1EAFE;
  --ak-zugestellt: #15803D;  --ak-zugestellt-flaeche: #E3F4E8;
  --ak-problem: #DC2626;     --ak-problem-text: #B91C1C; --ak-problem-flaeche: #FDECEC;
  --ak-warnung: #B07D00;     --ak-warnung-text: #854D0E; --ak-warnung-flaeche: #FDF5DC; /* gelb: Achtung, kein Fehler */
  --ak-geplant: #6B7280;     --ak-geplant-flaeche: #EEF0F2;

  /* ── Semantische Tokens (hell) ────────────────── */
  --ak-bg: var(--ak-weiss);
  --ak-bg-2: var(--ak-flaeche);
  --ak-text: var(--ak-anthrazit);
  --ak-text-muted: var(--ak-grau-text);
  --ak-border: var(--ak-linie);
  --ak-border-row: var(--ak-linie-zeile);
  --ak-border-input: var(--ak-rahmen);
  --ak-link: var(--ak-anthrazit);           /* Links: Anthrazit + Unterstreichung, nicht Orange */
  --ak-focus: var(--ak-anthrazit);          /* Fokus neutral (Nr. 86): Orange und Fehler-Rot wären bei Rot-Grün-Schwäche kaum zu unterscheiden */
  --ak-action-bg: var(--ak-orange);
  --ak-action-bg-hover: var(--ak-orange-dunkel);
  --ak-action-text: var(--ak-weiss);
  --ak-disabled: var(--ak-deaktiviert);     /* deaktivierte Elemente (WCAG-Ausnahme), nie für Inhalte */
  --ak-secondary-border: var(--ak-anthrazit);
  --ak-secondary-text: var(--ak-anthrazit);
  --ak-nav-bg: var(--ak-anthrazit);
  --ak-nav-text: var(--ak-grau-hell);
  --ak-nav-text-active: var(--ak-weiss);
  --ak-nav-active-bg: var(--ak-anthrazit-2);
  --ak-nav-indicator: var(--ak-orange-hell);
  --ak-nav-focus: var(--ak-hell);           /* Fokus auf Anthrazit (Seitenleiste, dunkles Band): neutral, 13,25:1 (Nr. 86) */
  --ak-eil-bg: var(--ak-anthrazit);
  --ak-eil-text: var(--ak-weiss);
  --ak-status-unterwegs: var(--ak-unterwegs);   --ak-status-unterwegs-bg: var(--ak-unterwegs-flaeche);
  --ak-status-zoll: var(--ak-zoll);             --ak-status-zoll-bg: var(--ak-zoll-flaeche);
  --ak-status-zugestellt: var(--ak-zugestellt); --ak-status-zugestellt-bg: var(--ak-zugestellt-flaeche);
  --ak-status-problem: var(--ak-problem);       --ak-status-problem-bg: var(--ak-problem-flaeche);
  --ak-status-problem-text: var(--ak-problem-text);
  --ak-status-warnung: var(--ak-warnung);       --ak-status-warnung-bg: var(--ak-warnung-flaeche);
  --ak-status-warnung-text: var(--ak-warnung-text);
  --ak-status-geplant: var(--ak-geplant);       --ak-status-geplant-bg: var(--ak-geplant-flaeche);

  /* ── Schrift ──────────────────────────────────── */
  --ak-font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; /* Überschriften, Beschilderung */
  --ak-font-text: 'IBM Plex Sans', system-ui, sans-serif;                 /* Fließtext, Oberfläche */
  --ak-font-mono: 'IBM Plex Mono', ui-monospace, monospace;               /* Auftragsnummern, Zeiten, Gewichte */
  /* Größenstufen (Basis 16 px, Faktor ≈ 1,25) */
  --ak-fs-xs: 0.75rem;   /* 12 */
  --ak-fs-sm: 0.875rem;  /* 14 */
  --ak-fs-base: 1rem;    /* 16 */
  --ak-fs-md: 1.125rem;  /* 18 – Einleitungen */
  --ak-fs-lg: 1.25rem;   /* 20 */
  --ak-fs-xl: 1.5rem;    /* 24 */
  --ak-fs-2xl: 1.875rem; /* 30 */
  --ak-fs-3xl: 2.375rem; /* 38 */
  --ak-fs-4xl: 3rem;     /* 48 */
  --ak-fs-5xl: 3.75rem;  /* 60 – nur Startseiten-Überschrift */
  /* Software und Fahrer-App */
  --ak-fs-app-h1: 1.75rem;     /* 28 – Software, Überschrift 1 */
  --ak-fs-app-h2: 1.375rem;    /* 22 – Software, Überschrift 2 */
  --ak-fs-app-text: 1.0625rem; /* 17 – Fließtext in der Fahrer-App */
  --ak-lh-tight: 1.05;
  --ak-lh-heading: 1.15;
  --ak-lh-text: 1.5;
  --ak-measure: 68ch;    /* maximale Zeilenlänge für Fließtext */

  /* ── Raster und Form ──────────────────────────── */
  --ak-space-1: 4px;  --ak-space-2: 8px;  --ak-space-3: 12px; --ak-space-4: 16px;
  --ak-space-5: 24px; --ak-space-6: 32px; --ak-space-7: 48px; --ak-space-8: 64px; --ak-space-9: 96px;
  --ak-radius: 2px;
  --ak-border-width: 1px;
  --ak-input-border-width: 1.5px;
  --ak-touch: 44px;      /* Mindest-Klickfläche */
  --ak-touch-app: 56px;  /* Fahrer-App: Hauptaktionen */
  --ak-shadow-overlay: 0 8px 24px rgba(27, 36, 43, 0.16); /* nur Menüs, Dialoge */
  --ak-focus-ring: 3px solid var(--ak-focus);
  --ak-focus-offset: 2px;

  /* ── Bewegung ─────────────────────────────────── */
  --ak-motion: 160ms cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

/* ── Dunkelmodus: automatisch nach Systemeinstellung … ─────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --ak-bg: var(--ak-nacht);
    --ak-bg-2: var(--ak-anthrazit);
    --ak-text: var(--ak-hell);
    --ak-text-muted: var(--ak-grau-hell);
    --ak-border: var(--ak-anthrazit-3);
    --ak-border-row: var(--ak-anthrazit-2);
    --ak-border-input: var(--ak-rahmen);
    --ak-link: var(--ak-hell);
    --ak-focus: var(--ak-hell);
    --ak-secondary-border: var(--ak-hell);
    --ak-secondary-text: var(--ak-hell);
    --ak-nav-bg: var(--ak-anthrazit);
    --ak-nav-active-bg: var(--ak-anthrazit-2);
    --ak-eil-bg: var(--ak-hell);
    --ak-eil-text: var(--ak-nacht);
    --ak-status-unterwegs: #60A5FA;   --ak-status-unterwegs-bg: #1C2B4A;
    --ak-status-zoll: #A78BFA;        --ak-status-zoll-bg: #2A2147;
    --ak-status-zugestellt: #4ADE80;  --ak-status-zugestellt-bg: #173322;
    --ak-status-problem: #F87171;     --ak-status-problem-bg: #3A1B1B; --ak-status-problem-text: #F87171;
    --ak-status-warnung: #EAB308;     --ak-status-warnung-bg: #33290F; --ak-status-warnung-text: #FACC15;
    --ak-status-geplant: #9CA3AF;     --ak-status-geplant-bg: #262D33;
    color-scheme: dark;
  }
}

/* … oder fest per Attribut (nur Software; die Webseite folgt nur dem System, ohne Schalter) */
:root[data-theme="dunkel"] {
  --ak-bg: var(--ak-nacht);
  --ak-bg-2: var(--ak-anthrazit);
  --ak-text: var(--ak-hell);
  --ak-text-muted: var(--ak-grau-hell);
  --ak-border: var(--ak-anthrazit-3);
  --ak-border-row: var(--ak-anthrazit-2);
  --ak-border-input: var(--ak-rahmen);
  --ak-link: var(--ak-hell);
  --ak-focus: var(--ak-hell);
  --ak-secondary-border: var(--ak-hell);
  --ak-secondary-text: var(--ak-hell);
  --ak-nav-bg: var(--ak-anthrazit);
  --ak-nav-active-bg: var(--ak-anthrazit-2);
  --ak-eil-bg: var(--ak-hell);
  --ak-eil-text: var(--ak-nacht);
  --ak-status-unterwegs: #60A5FA;   --ak-status-unterwegs-bg: #1C2B4A;
  --ak-status-zoll: #A78BFA;        --ak-status-zoll-bg: #2A2147;
  --ak-status-zugestellt: #4ADE80;  --ak-status-zugestellt-bg: #173322;
  --ak-status-problem: #F87171;     --ak-status-problem-bg: #3A1B1B; --ak-status-problem-text: #F87171;
  --ak-status-warnung: #EAB308;     --ak-status-warnung-bg: #33290F; --ak-status-warnung-text: #FACC15;
  --ak-status-geplant: #9CA3AF;     --ak-status-geplant-bg: #262D33;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ak-motion: 0ms; }
}