/* ==========================================================================
   Lucky Plucker Panel - Richtung B "Abendschicht" - DESIGN-TOKENS (Stand 1.0)
   Einzige Quelle fuer Farben, Abstaende, Radien, Schriften. app.css nutzt
   ausschliesslich diese Variablen. Keine externen Ressourcen.
   Kontrast (Text auf Flaeche) jeweils mind. 4,5:1, siehe KOMPONENTEN.md.
   ========================================================================== */
:root {
  /* Marke */
  --c-wine: #8C1A17;
  --c-red: #D62B1F;
  --c-orange: #F5A623;
  --c-cream: #FFF4E5;

  /* Flaechen (dunkel) */
  --c-bg: #180908;
  --c-bg-glow: #3A1412;
  --c-side-bg: #120606;
  --c-surface: #261110;
  --c-surface-2: #33191A;
  --c-surface-sunken: #140605;      /* Eingabefelder */
  --c-hero-from: #4A1514;           /* Status-/Hero-Karte, Verlauf */
  --c-line: #5A2B28;                /* Trennlinien, Kartenrand */
  --c-line-strong: #8A5A52;         /* Feldrand, sekundaerer Knopf */
  --c-line-accent: #7A2A25;         /* hervorgehobene Karte */

  /* Text */
  --c-ink: #FFF4E5;
  --c-muted: #D4B3A3;
  --c-on-red: #FFFFFF;
  --c-on-wine: #FFF4E5;
  --c-on-orange: #2A0F0D;

  /* Aktionen */
  --c-primary: var(--c-orange);
  --c-primary-press: #FFB93F;
  --c-on-primary: var(--c-on-orange);
  --c-focus: #8FB4FF;

  /* Zustaende (Text, Hintergrund, Rand) */
  --c-ok: #5FD38D;     --c-ok-bg: #12301F;     --c-ok-line: #2C6B47;
  --c-warn: #F5A623;   --c-warn-bg: #3A2509;   --c-warn-line: #7A5314;
  --c-danger: #FF7A6E; --c-danger-bg: #3F1412; --c-danger-line: #8F2A22;
  --c-info: #9CC2FF;   --c-info-bg: #14233F;   --c-info-line: #34568F;

  /* Effekte */
  --glow-orange: rgba(245, 166, 35, .5);
  --glow-orange-soft: rgba(245, 166, 35, .18);
  --glow-red: rgba(214, 43, 31, .55);
  --glow-green: rgba(95, 211, 141, .5);
  --shadow-dock: 0 10px 28px rgba(0, 0, 0, .55);
  --scrim: rgba(24, 9, 8, .92);
  --stamp-from: #E0361F;
  --stamp-to: #A91D14;

  /* Abstaende */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Radien */
  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-pill: 999px;

  /* Bedienelemente (Handy: mindestens 44 px) */
  --hit: 48px;
  --hit-min: 44px;

  /* Schriftgroessen */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1rem;
  --fs-nav: 1.0625rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-xxl: 2.25rem;
  --fs-stamp: 1.4rem;
  --fs-clock: 3.25rem;
  --fs-clock-l: 3.5rem;

  /* Schriften (Systemschriften, kein Download) */
  --font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-head: "Bahnschrift", "Segoe UI Semibold", "Segoe UI", system-ui, Arial, sans-serif;

  /* Layout (Umbruch Handy/Desktop bei 900 px, in app.css als Media Query) */
  --w-side: 264px;
  --w-page: 1180px;
  --w-aside: 380px;
}