/* =============================================================================
   EVIL OFFICE – Design Tokens  (css/tokens.css)
   Single Source of Truth für alle CSS Custom Properties.

   Geladen von: index.html, shop.html, 404.html (IMMER als erstes Stylesheet).
   Ersetzen den :root-Block in style.css und shop.css.
   ============================================================================= */

/*
 * ── BREAKPOINT CONTRACT ────────────────────────────────────────────────────
 * xs:  480px  — Small phone (iPhone SE, Galaxy A)
 * sm:  768px  — Tablet portrait / large phone  ← PRIMARY breakpoint
 * md: 1024px  — Tablet landscape / small laptop
 * lg: 1280px  — Standard desktop
 * xl: 1440px  — Wide desktop
 *
 * Legacy values (existing code only – do not add new rules at these):
 *   540px, 600px, 640px, 680px, 900px
 * ──────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Farben CI ─────────────────────────────────────────────────────────────── */
  --nav-bg:         #111111;
  --nav-bg-light:   #1e1e1e;
  --nav-text:       #ffffff;
  --nav-active-bg:  #ffffff;
  --nav-active-tx:  #111111;

  --bg-page:        #F6F4EF;
  --bg-white:       #ffffff;
  --bg-cream:       #F3EEE6;
  --bg-cream-dark:  #EAE4D8;
  --bg-dark:        #1A1A1A;
  --bg-darker:      #1A1A1A;

  /* Palette ergänzend */
  --cream-light:    #F3EEE6;
  --shop-bg:        #F6F4EF;
  --panel-beige:    #EAE4D8;
  --text-on-dark:   #F5F2EC;
  --divider:        #D7D0C6;
  --badge-green:    #3E8E5B;
  --badge-yellow:   #D5A93A;

  /* Rot – CI-Akzent (exakt CI-Dokument) */
  --red:            #C61F26;
  --red-dark:       #A9191F;
  --red-hover:      #A9191F;
  --red-light:      rgba(198, 31, 38, 0.08);
  --red-border:     rgba(198, 31, 38, 0.18);
  --shadow-red:     0 4px 16px rgba(198, 31, 38, 0.12);

  /* Blau – sekundärer Akzent */
  --blue:           #4a6580;
  --blue-dark:      #3a4f62;
  --blue-light:     rgba(74, 101, 128, 0.08);
  --blue-border:    rgba(74, 101, 128, 0.20);

  /* Text */
  --text:           #202020;
  --text-dark:      #202020;
  --text-mid:       #5E5E5E;
  --text-soft:      #7a7a7a;
  --text-muted:     #ababab;
  --text-light:     #888888;

  /* Borders */
  --border:         #DDD6CB;
  --border-soft:    rgba(0, 0, 0, 0.07);
  --brick:          #8b5a4a;

  /* Hero-Variante */
  --hero-bg:        #1A1A1A;
  --hero-text:      #F5F2EC;

  /* ── Typografie ───────────────────────────────────────────────────────────── */
  --font-brand:     "Bevan", "Alfa Slab One", "Rockwell Extra Bold", "Roboto Slab", serif;
  --font-head:      var(--font-brand);
  --font-display:   "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Radius ───────────────────────────────────────────────────────────────── */
  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius:         12px;
  --radius-lg:      20px;
  --radius-xl:      28px;

  /* ── Schatten ─────────────────────────────────────────────────────────────── */
  --shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow:         0 4px 16px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.09);
  --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);

  /* ── Layout ───────────────────────────────────────────────────────────────── */
  --header-h:       72px;
  --topbar-h:       32px;
  --max-w:          1440px;
  --col:            min(calc(100% - 40px), var(--max-w));
  --sticky-bar-min-h: 44px;
  --page-hero-pad-top-mobile: 42px;
  --page-hero-pad-bottom-mobile: 28px;
  --contact-panel-pad: 36px;
  --contact-panel-pad-mobile: 24px;
  --content-space-mobile: 32px;
  --form-label-contrast: #4b4b4b;
  --product-card-gap-mobile: 12px;

  /* ── Animationen ──────────────────────────────────────────────────────────── */
  --transition:     200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.0, 0, 0.2, 1);

  /* ── Z-Index Schichten ────────────────────────────────────────────────────── */
  --z-base:         0;
  --z-raised:       10;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-header:       300;
  --z-overlay:      400;
  --z-modal:        500;
  --z-toast:        600;
}

/* Reduziert seitliches Padding auf kleinen Smartphones */
@media (max-width: 480px) {
  :root {
    --col: min(calc(100% - 24px), var(--max-w));
  }
}

/* Respektiert Systemeinstellungen für Bewegungsreduzierung */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}