/* ==========================================================================
   Design-Tokens – Fahrtenbuch
   Semantische Farben nach dem Vorbild der Apple-Systemfarben.
   Kontrastwerte (WCAG) stehen jeweils dahinter.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------- Schrift: SF Pro auf Apple-Geräten, Systemschrift sonst ---------- */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI Variable Text",
    "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Segoe UI Variable Display",
    "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Typo-Skala relativ zur Grundgröße (17 px auf Touch-Geräten = iOS Body) */
  --text-large-title: 2rem;      /* 34 */
  --text-title1: 1.647rem;       /* 28 */
  --text-title2: 1.294rem;       /* 22 */
  --text-title3: 1.176rem;       /* 20 */
  --text-body: 1rem;             /* 17 */
  --text-callout: 0.941rem;      /* 16 */
  --text-subhead: 0.882rem;      /* 15 */
  --text-footnote: 0.765rem;     /* 13 */
  --text-caption: 0.706rem;      /* 12 */

  /* ---------- Form & Raster ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-group: 18px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Bedienelemente: Desktop-Größen, Touch wird unten vergrößert */
  --control-h: 34px;
  --control-h-lg: 44px;
  --row-min-h: 46px;
  --icon-size: 20px;

  --sidebar-w: 288px;
  --content-max: 1080px;
  --gutter: 20px;

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  /* ---------- Farben: hell ---------- */
  --bg: #F2F2F7;                         /* systemGroupedBackground */
  --surface: #FFFFFF;                    /* Zellen, Karten */
  --surface-sunken: #F2F2F7;
  --sheet-bg: #F2F2F7;
  --sheet-surface: #FFFFFF;

  --label: #1D1D1F;                      /* 16.0:1 auf Weiß */
  --label-2: #6E6E73;                    /* 5.07:1 auf Weiß, 4.54:1 auf #F2F2F7 */
  --label-3: #8E8E93;                    /* nur Platzhalter & Dekoration */
  --separator: rgba(60, 60, 67, 0.17);
  --separator-strong: rgba(60, 60, 67, 0.29);
  --fill-1: rgba(120, 120, 128, 0.20);
  --fill-2: rgba(120, 120, 128, 0.16);
  --fill-3: rgba(118, 118, 128, 0.12);
  --fill-4: rgba(116, 116, 128, 0.07);

  /* Signalrot (angelehnt an RAL 3000 Feuerrot) – für Primäraktionen */
  --accent: #C4161C;                     /* 6.04:1 auf Weiß, 5.41:1 auf #F2F2F7 */
  --accent-fill: #C4161C;                /* Weiß darauf: 6.04:1 */
  --accent-on: #FFFFFF;
  --accent-soft: rgba(196, 22, 28, 0.10);
  --accent-ring: rgba(196, 22, 28, 0.42);

  --success: #1E7A35;                    /* 5.40:1 */
  --success-soft: rgba(30, 122, 53, 0.12);
  --live: #34C759;                       /* Statuspunkt, immer mit Text */
  --warning: #9A5200;                    /* 5.86:1 */
  --warning-soft: rgba(255, 149, 0, 0.13);
  --danger: #C4161C;
  --danger-soft: rgba(196, 22, 28, 0.10);

  /* Glas – nur für die schwebende Bedienebene (Leisten, Sidebar, Dialoge) */
  --glass: rgba(250, 250, 252, 0.66);
  --glass-strong: rgba(252, 252, 254, 0.84);
  --alert-bg: rgba(250, 250, 252, 0.94);
  --glass-highlight: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(0, 0, 0, 0.07);
  --glass-filter: saturate(180%) blur(22px);
  --scrim: rgba(0, 0, 0, 0.26);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 22px 60px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-glass: 0 10px 34px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);

  /* Kilometerzähler (Zählwerk) – das Signatur-Element */
  --odo-drum: #1D1D1F;
  --odo-digit: #FFFFFF;                  /* 17:1 */
  --odo-sheen: rgba(255, 255, 255, 0.16);
  --odo-shade: rgba(0, 0, 0, 0.55);

  /* Zweck-Farben: Text auf getönter Fläche ≥ 4.5:1, immer mit Symbol und Text */
  --p-red: #C4161C;      --p-red-soft: rgba(196, 22, 28, 0.12);
  --p-orange: #A34700;   --p-orange-soft: rgba(163, 71, 0, 0.12);
  --p-blue: #0A5CC2;     --p-blue-soft: rgba(10, 92, 194, 0.12);
  --p-brown: #6B5B4B;    --p-brown-soft: rgba(107, 91, 75, 0.12);
  --p-green: #1E7A35;    --p-green-soft: rgba(30, 122, 53, 0.12);
  --p-indigo: #5145C4;   --p-indigo-soft: rgba(81, 69, 196, 0.12);
  --p-gray: #5E5E66;     --p-gray-soft: rgba(94, 94, 102, 0.12);
}

/* Touch-Geräte (iPad im Fahrzeug): größere Ziele, 17-px-Grundschrift */
@media (pointer: coarse) {
  :root {
    --control-h: 44px;
    --control-h-lg: 52px;
    --row-min-h: 56px;
    --icon-size: 22px;
  }
}

/* ---------- Farben: dunkel ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --surface-sunken: #000000;
    --sheet-bg: #1C1C1E;
    --sheet-surface: #2C2C2E;

    --label: #F5F5F7;
    --label-2: #98989F;                  /* 5.94:1 auf #1C1C1E, 4.86:1 auf #2C2C2E */
    --label-3: #7C7C82;
    --separator: rgba(84, 84, 88, 0.55);
    --separator-strong: rgba(84, 84, 88, 0.75);
    --fill-1: rgba(120, 120, 128, 0.36);
    --fill-2: rgba(120, 120, 128, 0.32);
    --fill-3: rgba(118, 118, 128, 0.24);
    --fill-4: rgba(118, 118, 128, 0.14);

    --accent: #FF6467;                   /* 5.89:1 auf #1C1C1E, 4.83:1 auf #2C2C2E */
    --accent-fill: #E0262C;              /* Weiß darauf: 4.68:1 (fett) */
    --accent-soft: rgba(255, 100, 103, 0.16);
    --accent-ring: rgba(255, 100, 103, 0.5);

    --success: #5FD47A;
    --success-soft: rgba(95, 212, 122, 0.16);
    --live: #30D158;
    --warning: #FFB340;
    --warning-soft: rgba(255, 179, 64, 0.16);
    --danger: #FF6467;
    --danger-soft: rgba(255, 100, 103, 0.16);

    --glass: rgba(30, 30, 32, 0.62);
    --glass-strong: rgba(36, 36, 38, 0.84);
    --alert-bg: rgba(44, 44, 46, 0.94);
    --glass-highlight: rgba(255, 255, 255, 0.10);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --scrim: rgba(0, 0, 0, 0.5);

    --shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.04);
    --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.07);
    --shadow-glass: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.06);

    --odo-drum: #3A3A3C;
    --odo-digit: #F5F5F7;                /* 10.4:1 */
    --odo-sheen: rgba(255, 255, 255, 0.10);
    --odo-shade: rgba(0, 0, 0, 0.6);

    --p-red: #FF6B6B;      --p-red-soft: rgba(255, 107, 107, 0.18);
    --p-orange: #FFA94D;   --p-orange-soft: rgba(255, 169, 77, 0.18);
    --p-blue: #6AB0FF;     --p-blue-soft: rgba(106, 176, 255, 0.18);
    --p-brown: #C8B29A;    --p-brown-soft: rgba(200, 178, 154, 0.18);
    --p-green: #5FD47A;    --p-green-soft: rgba(95, 212, 122, 0.18);
    --p-indigo: #A39BFF;   --p-indigo-soft: rgba(163, 155, 255, 0.18);
    --p-gray: #AEAEB5;     --p-gray-soft: rgba(174, 174, 181, 0.18);
  }
}

/* ---------- Bedienungshilfen ---------- */
@media (prefers-contrast: more) {
  :root {
    --label-2: #48484D;                  /* 8.15:1 */
    --separator: rgba(60, 60, 67, 0.45);
    --glass: var(--surface);
    --glass-strong: var(--surface);
    --alert-bg: var(--surface);
    --glass-edge: rgba(0, 0, 0, 0.35);
    --fill-3: rgba(118, 118, 128, 0.22);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --label-2: #C7C7CC;                  /* 10.1:1 */
    --separator: rgba(160, 160, 168, 0.6);
    --glass-edge: rgba(255, 255, 255, 0.4);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--surface);
    --glass-strong: var(--surface);
    --alert-bg: var(--surface);
    --glass-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}