/* ============================================================
   tokens.css — Design tokens · SilkeKleinArt v1-desktop
   Richtung A "Galerie-Raum" + Technik C (Frosted Glass)
   ADR-002. Marken-Konstanten: Bordeaux #981B1E + Gold #D4AF37 (= Logo SK).
   Ein einziger Rhythmus-Ursprung: --section-y (Anti-Fehler B).
   ============================================================ */

:root {
  /* ---- Farb-Token: "Galerie-Raum" (heller, neutraler Saal) ---- */
  --paper:        #F7F5F2;   /* warmes Off-White — Basis-Hintergrund "Saal" */
  --paper-2:      #FBFAF8;   /* leicht heller — Panels, Karten-Innenraum */
  --paper-sink:   #F0EDE7;   /* leicht tiefer — Sektions-Wechsel, Sockel */
  --ink-900:      #1F1D1B;   /* Haupttext (auf paper = AAA) */
  --ink-600:      #6B6660;   /* Sekundärtext */
  --ink-400:      #9A938B;   /* Meta / Captions / disabled */
  --line:         #E7E2DB;   /* Trennlinien, Passepartout-Rahmen */
  --line-strong:  #D9D2C8;

  /* ---- Marken-Akzente (eingefroren) ---- */
  --bordeaux:       #981B1E;   /* Marke: Links, aktiv, Eyebrow, CTA-Fläche */
  --bordeaux-deep:  #7A1417;   /* Hover / gedrückt */
  --bordeaux-tint:  rgba(152,27,30,.08);
  --gold:           #D4AF37;   /* Premium = Logo SK. Nur Dekor/Linien/Fokus */
  --gold-deep:      #A8841F;   /* Gold-Text auf hell (AA-tauglich, größer) */
  --gold-soft:      rgba(212,175,55,.22);

  /* ---- Optionale "Materialität"-Dunkelzone (punktuell, nicht Dominante) ---- */
  --ink-950:        #16140F;
  --ink-850:        #221F18;
  --on-dark:        #F3EFE7;
  --on-dark-soft:   #B7AF9E;

  /* ---- Frosted Glass (Technik C — Flächen limitieren, Perf!) ---- */
  --glass-bg:        rgba(251,250,248,.62);
  --glass-bg-dark:   rgba(22,20,15,.42);
  --glass-border:    rgba(255,255,255,.55);
  --glass-blur:      14px;
  --glass-shadow:    0 18px 50px -28px rgba(31,29,27,.45);

  /* ---- Schrift (self-hosted; siehe base.css @font-face) ---- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Typo-Skala (editorial, oversized; clamp = responsive) ---- */
  --fs-eyebrow: .72rem;                          /* Eyebrow / Kicker (uppercase, tracking) */
  --fs-meta:    .8125rem;                         /* Werk-Tafel Meta */
  --fs-chip:    .72rem;                           /* Status-Chips */
  --fs-body:    1.0625rem;                        /* 17px Fließtext */
  --fs-lead:    clamp(1.15rem, 1.6vw, 1.35rem);   /* Intro / Lead */
  --fs-h4:      clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-h2:      clamp(2rem, 4.2vw, 3.4rem);
  --fs-display: clamp(2.6rem, 6.2vw, 5.6rem);     /* Hero-Claim */

  /* ---- Zeilenhöhen (DE-Komposita: Headings >=1.05, Anti-Fehler A) ---- */
  --lh-display: 1.06;
  --lh-head:    1.08;
  --lh-body:    1.72;
  --tracking-eyebrow: .18em;
  --tracking-chip:    .06em;

  /* ---- Vertikaler Rhythmus — EINZIGE Quelle (Anti-Fehler B) ---- */
  --section-y:  clamp(5rem, 10vw, 9rem);
  --block-y:    clamp(2.5rem, 5vw, 4.5rem);
  --gap:        clamp(1.5rem, 3vw, 2.75rem);

  /* ---- Layout ---- */
  --maxw:       1280px;
  --maxw-text:  68ch;
  --pad-x:      clamp(1.75rem, 7vw, 7rem);
  --header-h:   76px;

  /* ---- Radien / Schatten (sanft — Kontrast zu as-is "spitze Ecken") ---- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-card: 0 14px 40px -26px rgba(31,29,27,.42);
  --shadow-lift: 0 26px 60px -28px rgba(31,29,27,.50);

  /* ---- Motion (L2 — galerie-sanft) ---- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-1: .35s;
  --dur-2: .6s;
  --dur-3: .9s;

  --z-header: 100;
  --z-cookie: 200;
  --z-lightbox: 300;
}

/* Bewegung aus, wenn vom System gewünscht (a11y) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .001s; --dur-2: .001s; --dur-3: .001s; }
}