/* ============================================================
   CLEAR-4  ·  L1 — TOKENS
   Einzige Quelle aller Werte im System.
   Kein anderes File darf Werte hardcoden.
   ============================================================ */

:root {

  /* ── Spacing · 8px Grid ──────────────────────────────────
     s4   Micro   Icon-Gap, Badge-Padding, Divider
     s8   Tight   Inline-Gap, zusammengehörige Felder
     s16  Base    Komponenten-internes Padding
     s24  Group   Zwischen Content-Gruppen
     s32  Block   Zwischen Komponenten
     s48  Section Zwischen Major Sections
     s64  Hero    Hero vertical
     s96  Page    Page-Level vertical
  ─────────────────────────────────────────────────────────── */
  --s4:  4px;
  --s8:  8px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;

  /* ── Typografie · Fibonacci-Skala ────────────────────────
     11 · 13 · 16 · 21 · 27 · 34 · 42 · 55
     Base 16px = WCAG-konform
  ─────────────────────────────────────────────────────────── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', 'Inter', system-ui, sans-serif;

  --fs-xs:   11px;   /* Micro: Legal, Timestamps, Badges   */
  --fs-sm:   13px;   /* Labels, Hints, Captions            */
  --fs-base: 16px;   /* Fliesstext                         */
  --fs-lg:   21px;   /* Lead, grosse Labels                */
  --fs-xl:   27px;   /* Subheadings                        */
  --fs-2xl:  34px;   /* H2                                 */
  --fs-3xl:  42px;   /* H1 Desktop                         */
  --fs-4xl:  55px;   /* Display / Hero                     */

  --lh-tight:   1.2;   /* Headings                         */
  --lh-normal:  1.5;   /* UI-Elemente                      */
  --lh-relaxed: 1.7;   /* Fliesstext WCAG 1.4.12           */

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;

  --measure: 66ch;     /* Optimale Zeilenlänge             */

  /* ── Radius ──────────────────────────────────────────────*/
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ── Shadows · Y/Blur folgen 8er-Skala ──────────────────*/
  --sh-soft:    0  4px 16px rgba(0,0,0,.06);
  --sh-medium:  0  8px 32px rgba(0,0,0,.10);
  --sh-deep:    0 16px 48px rgba(0,0,0,.16);
  --sh-premium: 0  1px  2px rgba(0,0,0,.04),
                0  8px 32px rgba(0,0,0,.08);

  /* ── Transitions ─────────────────────────────────────────*/
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-normal: 220ms;
  --duration-slow:   320ms;

  /* ── Layout ──────────────────────────────────────────────*/
  --page-max:      1280px;
  --page-pad:      var(--s24);
  --header-h:      64px;

  /* ── Farben · Default ────────────────────────────────────*/
  --bg:           #f5f5f4;
  --bg-alt:       #ececea;
  --surface:      #ffffff;
  --surface-soft: #fafaf9;
  --border:       #e0e0de;
  --border-light: rgba(0,0,0,.06);

  --text:         #1f2937;
  --text-soft:    #4b5563;
  --text-muted:   #9ca3af;

  --brand:        #0f766e;
  --brand-hover:  #0d6560;
  --brand-soft:   rgba(15,118,110,.08);

  --accent:       #c9a227;
  --accent-soft:  rgba(201,162,39,.12);

  --ok:    #059669;
  --warn:  #d97706;
  --error: #dc2626;
  --info:  #0284c7;
}

/* ── Theme Overrides ────────────────────────────────────────
   Nur Farb-Tokens werden überschrieben.
   Spacing, Typo, Radius, Shadows bleiben unverändert.
─────────────────────────────────────────────────────────── */

.t-handwerk {
  --bg:          #f5eee3;
  --surface:     #ffffff;
  --border:      rgba(56,44,30,.18);
  --text:        #2c2419;
  --text-soft:   rgba(44,36,25,.85);
  --text-muted:  rgba(44,36,25,.55);
  --brand:       #b47836;
  --brand-hover: #9f6327;
  --brand-soft:  rgba(180,120,54,.16);
  --accent:      #e0b37b;
  --accent-soft: rgba(224,179,123,.15);
}

.t-agri {
  --bg:          #f4f3ea;
  --surface:     #ffffff;
  --border:      rgba(51,63,39,.18);
  --text:        #253421;
  --text-soft:   rgba(37,52,33,.88);
  --text-muted:  rgba(37,52,33,.55);
  --brand:       #799b3b;
  --brand-hover: #637f30;
  --brand-soft:  rgba(121,155,59,.16);
  --accent:      #c59d4e;
  --accent-soft: rgba(197,157,78,.15);
}

.t-premium {
  --bg:          #fbfbfc;
  --surface:     #ffffff;
  --border:      rgba(2,6,23,.10);
  --text:        #0b1220;
  --text-soft:   rgba(11,18,32,.75);
  --text-muted:  rgba(11,18,32,.45);
  --brand:       #0f766e;
  --brand-hover: #0d6560;
  --brand-soft:  rgba(15,118,110,.08);
  --accent:      #c9a227;
  --accent-soft: rgba(201,162,39,.12);
}

.t-dark {
  --bg:           #0f0f0f;
  --bg-alt:       #1a1a1a;
  --surface:      #1f1f1f;
  --surface-soft: #2a2a2a;
  --border:       rgba(255,255,255,.10);
  --border-light: rgba(255,255,255,.05);
  --text:         #f5f5f5;
  --text-soft:    rgba(245,245,245,.80);
  --text-muted:   rgba(245,245,245,.50);
  --brand:        #5eead4;
  --brand-hover:  #2dd4bf;
  --brand-soft:   rgba(94,234,212,.12);
  --accent:       #fbbf24;
  --accent-soft:  rgba(251,191,36,.15);
}

/* ── System Dark Mode ───────────────────────────────────────*/
@media (prefers-color-scheme: dark) {
  :root:not([class*="t-"]) {
    --bg:           #0f0f0f;
    --bg-alt:       #1a1a1a;
    --surface:      #1f1f1f;
    --surface-soft: #2a2a2a;
    --border:       rgba(255,255,255,.10);
    --border-light: rgba(255,255,255,.05);
    --text:         #f5f5f5;
    --text-soft:    rgba(245,245,245,.80);
    --text-muted:   rgba(245,245,245,.50);
    --brand:        #5eead4;
    --brand-hover:  #2dd4bf;
    --brand-soft:   rgba(94,234,212,.12);
    --accent:       #fbbf24;
    --accent-soft:  rgba(251,191,36,.15);
  }
}