/* ═══════════════════════════════════════════════════════════
   EURO Küchencenter Giebelhausen — Design Tokens
   Dark-Mode-Ready. Kein Hex-Wert außerhalb dieser Datei.
   ═══════════════════════════════════════════════════════════ */

@layer tokens {

:root {
  /* ── Brand ── */
  --color-brand:           #B81C30;
  --color-brand-dark:      #8B1524;
  --color-brand-soft:      #fef0f2;

  /* ── Surface ── */
  --color-surface:         #fff;
  --color-surface-alt:     #f5f5f7;
  --color-surface-raised:  #e8e8ec;

  /* ── Text ── */
  --color-text:            #1a1a1a;
  --color-text-body:       #4a4a4a;
  --color-text-muted:      #6b7280;

  /* ── Border ── */
  --color-border:          #e5e7eb;

  /* ── Shadows ── */
  --shadow-card:           0 4px 20px rgba(0,0,0,0.06);
  --shadow-card-hover:     0 8px 30px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg:             0 12px 48px rgba(0,0,0,0.10);

  /* ── Radii ── */
  --radius-sm:             8px;
  --radius:                12px;
  --radius-lg:             20px;
  --radius-full:           100px;

  /* ── Spacing ── */
  --max-width:             1200px;

  /* ── Typography ── */
  --font-sans:             'Inter', system-ui, -apple-system, sans-serif;

  /* ── Transitions ── */
  --ease-out:              0.3s cubic-bezier(0.4,0,0.2,1);

  /* ── Base ── */
  --color-black:           #0a0a0a;
  --color-white:           #fff;

  color-scheme: light dark;
}

/* ── Dark Mode (Prepared — inactive until Phase 3) ── */
/* @media (prefers-color-scheme: dark) { ... } */
/* [data-theme="dark"] { ... } */

/* ── Nav Active State (via body data-page) ── */
body[data-page="home"]       [data-nav="home"],
body[data-page="ueber-uns"]  [data-nav="ueber-uns"],
body[data-page="leistungen"] [data-nav="leistungen"],
body[data-page="kuechenstudio"] [data-nav="kuechenstudio"],
body[data-page="referenzen"] [data-nav="referenzen"],
body[data-page="partner"]    [data-nav="partner"],
body[data-page="angebote"]   [data-nav="angebote"],
body[data-page="kontakt"]    [data-nav="kontakt"] {
  color: var(--color-brand);
  font-weight: 600;
}

}