/* =====================================================================
   HEM Dienstplan — Design Tokens
   HEM-Tankstelle · Pächterin Melisa Kiraz · Ludwigshafen am Rhein
   Markenfarben HEM: Anthrazit-Grund, Flamme aus Grün + Orange,
   graue Wortmarke. Abgedunkelte/aufgehellte Abstufungen sind
   barrierekonforme Ableitungen (WCAG AA), keine neuen Markenfarben.
   ===================================================================== */

:root {
  /* --- Markenfarben (HEM) -------------------------------------------- */
  --color-anthracite:  #333131;   /* Markengrund (Logo-Hintergrund) */
  --color-anthracite-2:#3D3B3B;
  --color-green-bright: #86BC25;   /* HEM-Grün (Flamme/Vordach) – Flächen/Punkte, nicht für Text */
  --color-orange-bright:#F39A2E;   /* HEM-Orange (Flamme) */
  --color-hem-grey:     #C6C6C6;   /* Wortmarke „hem" auf Dunkel */

  /* --- Primär (Grün) – Aktionen, aktive Nav, positiv ----------------- */
  --color-primary:      #4C8B1E;   /* Button-Grün, weißer Text (AA) */
  --color-primary-hover:#57991F;
  --color-primary-active:#3E7418;
  --color-primary-ink:  #3C6E15;   /* grünes Textniveau auf Weiß (AA) */
  --color-primary-soft: #EAF3DC;   /* grüne Flächen-Tönung */

  /* --- Akzent (Orange) – Hinweise, Highlights, Warnungen ------------- */
  --color-accent:       #EF7D00;
  --color-accent-ink:   #B25900;   /* Orange-Text auf Weiß (AA) */
  --color-accent-soft:  #FDECD6;

  /* --- Status -------------------------------------------------------- */
  --color-green-ink:  #3C6E15;
  --color-green-soft: #EAF3DC;
  --color-danger:     #C0362C;
  --color-danger-soft:#FBEAE8;
  --color-info-ink:   #2A4B8D;
  --color-info-soft:  #E9EEF8;

  /* --- Text ---------------------------------------------------------- */
  --text-strong:  #1A1919;
  --text-default: #24211F;
  --text-muted:   #5C5A57;
  --text-on-primary: #FFFFFF;
  --text-disabled:#A9AAAA;

  /* --- Flächen ------------------------------------------------------- */
  --surface-page:  #F6F6F4;
  --surface-card:  #FFFFFF;
  --surface-sunken:#EEEFEA;
  --border-subtle: #E5E6E1;
  --border-strong: #D2D4CD;

  /* --- Typografie ---------------------------------------------------- */
  --font-primary: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: 28px;
  --fs-h1:      22px;
  --fs-h2:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  --lh-tight: 1.25;
  --lh-body:  1.5;

  /* --- Radius -------------------------------------------------------- */
  --radius-card:   16px;
  --radius-button: 12px;
  --radius-input:  12px;
  --radius-pill:   999px;

  /* --- Abstände (8px-Raster) ---------------------------------------- */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* --- Schatten ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.12);
  --focus-ring: 0 0 0 3px rgba(76,139,30,.32);

  /* --- Motion -------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* --- Layout -------------------------------------------------------- */
  --tap-min:      48px;
  --bottomnav-h:  66px;
  --sidebar-w:    248px;
  --content-max:  1240px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:   #17181A;
    --surface-card:   #202224;
    --surface-sunken: #292B2E;
    --border-subtle:  #303336;
    --border-strong:  #3C4045;

    --text-strong:  #FFFFFF;
    --text-default: #ECEEF0;
    --text-muted:   #A6A9AD;

    --color-primary-ink:  #9FD65C;
    --color-primary-soft: #1A2A0F;
    --color-accent-ink:   #F6A94D;
    --color-accent-soft:  #2E2210;
    --color-green-ink:    #9FD65C;
    --color-green-soft:   #1A2A0F;
    --color-danger-soft:  #2C1714;
    --color-info-soft:    #141C2E;
    --color-info-ink:     #7FA0E8;
  }
}

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