/* ============================================================
   SOULEYA – Design Tokens v2.0
   Style Guide konform: Light (Standard) + Dark Theme
   ============================================================ */

/* ── LIGHT THEME (Standard) ────────────────────────────────── */
:root, [data-theme="light"] {

  /* Hintergrund */
  --bg-gradient: linear-gradient(145deg, #F5EFE6 0%, #EDE4D3 35%, #D8CFBE 70%, #C9C2B2 100%);
  --bg-solid:    #EDE4D3;

  /* Gold-System */
  --gold:          #C8A96E;
  --gold-text:     #9A7218;
  --gold-deep:     #7A6014;
  --gold-bg:       rgba(200,169,110,.12);
  --gold-bg-hover: rgba(200,169,110,.20);
  --gold-border:   rgba(200,169,110,.45);
  --gold-border-s: rgba(200,169,110,.25);
  --gold-glow:     rgba(200,169,110,.40);

  /* Text-Hierarchie */
  --text-h:       #1E180C;
  --text-body:    #3E3020;
  --text-sec:     #7A6040;
  --text-muted:   #9A8870;
  --text-on-gold: #FFFFFF;

  /* Glasmorphism */
  --glass:        rgba(255,255,255,.45);
  --glass-border: rgba(255,255,255,.75);
  --glass-shadow: 0 4px 20px rgba(139,105,20,.07);
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,.9);
  --glass-blur:   20px;
  --glass-nav:    rgba(255,255,255,.38);
  --glass-nav-b:  rgba(255,255,255,.55);

  /* Divider */
  --divider:   rgba(139,105,20,.15);
  --divider-l: rgba(139,105,20,.08);

  /* Sonstiges */
  --img-overlay: rgba(0,0,0,.55);
  --avatar-bg:   rgba(200,169,110,.15);
  --toggle-bg:   rgba(200,169,110,.12);
  --toggle-dot:  #C8A96E;

  /* ── Bridge-Aliase (Backward-Compat für components.css) ── */
  --gold1: #C8A96E;
  --gold2: #D4BC8B;
  --gold3: #A8894E;
  --gold-wash: rgba(200,169,110,.18);
  --vignette:  radial-gradient(ellipse at center, transparent 50%, rgba(44,42,53,.35) 100%);

  /* Text-Brücken: altes --text-light jetzt dunkler Text für Light-BG */
  --text-light:    #1E180C;
  --text-dark:     #1E180C;
  --text-dark-sub: #9A8870;

  /* Hintergrund-Brücken: alte Vars zeigen auf Sand-Töne (kein Violett) */
  --dark:    #EDE4D3;
  --darker:  #D8CFBE;
  --darkest: #C9C2B2;
  --apricot: #F5EDE4;
  --mint:    #E8F0E9;
  --rose:    #F0E8EC;
  --lavender: #EAE8F0;

  /* Schatten */
  --shadow-sm:   0 1px 3px rgba(139,105,20,.10);
  --shadow-md:   0 4px 16px rgba(139,105,20,.12);
  --shadow-lg:   0 8px 32px rgba(139,105,20,.15);
  --shadow-gold: 0 0 30px rgba(200,169,110,.3);
  --shadow-glow: 0 0 60px rgba(200,169,110,.15);

  /* Fonts */
  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-label:   'Georgia', 'Times New Roman', serif;
  --font-body:    'Georgia', 'Times New Roman', serif;
}

/* ── DARK THEME ─────────────────────────────────────────────── */
[data-theme="dark"] {

  /* Hintergrund */
  --bg-gradient: linear-gradient(160deg, #282828 0%, #1E1E1E 50%, #161616 100%);
  --bg-solid:    #1E1E1E;

  /* Gold-System */
  --gold:          #C8A96E;
  --gold-text:     #C8A96E;
  --gold-deep:     #C8A96E;
  --gold-bg:       rgba(200,169,110,.10);
  --gold-bg-hover: rgba(200,169,110,.18);
  --gold-border:   rgba(200,169,110,.30);
  --gold-border-s: rgba(200,169,110,.18);
  --gold-glow:     rgba(200,169,110,.35);

  /* Text-Hierarchie */
  --text-h:       #F0E8D8;
  --text-body:    #AAAAAA;
  --text-sec:     #888888;
  --text-muted:   #666666;
  --text-on-gold: #1A1A1A;

  /* Glasmorphism */
  --glass:        rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.09);
  --glass-shadow: none;
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,.07);
  --glass-blur:   20px;
  --glass-nav:    rgba(30,30,30,.88);
  --glass-nav-b:  rgba(255,255,255,.07);

  /* Divider */
  --divider:   rgba(255,255,255,.08);
  --divider-l: rgba(255,255,255,.05);

  /* Sonstiges */
  --img-overlay: rgba(0,0,0,.65);
  --avatar-bg:   rgba(200,169,110,.12);
  --toggle-bg:   rgba(255,255,255,.06);
  --toggle-dot:  #C8A96E;

  /* ── Bridge-Aliase ── */
  --gold1: #C8A96E;
  --gold2: #D4BC8B;
  --gold3: #A8894E;
  --gold-wash: rgba(200,169,110,.18);
  --vignette:  radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.35) 100%);

  /* Text-Brücken */
  --text-light:    #F0E8D8;
  --text-dark:     #F0E8D8;
  --text-dark-sub: #666666;

  /* Hintergrund-Brücken: neutrales Anthrazit (kein Violett) */
  --dark:    #282828;
  --darker:  #1E1E1E;
  --darkest: #161616;
  --apricot: #2A2828;
  --mint:    #212828;
  --rose:    #282225;
  --lavender: #232228;

  /* Schatten */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.5);
  --shadow-gold: 0 0 30px rgba(200,169,110,.3);
  --shadow-glow: 0 0 60px rgba(200,169,110,.15);

  /* Fonts */
  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-label:   'Georgia', 'Times New Roman', serif;
  --font-body:    'Georgia', 'Times New Roman', serif;
}

/* ── SCHRIFTGROSSEN – Fluid Scale ────────────────────────────── */
:root {
  --text-xs:    clamp(0.7rem,  0.7vw,  0.75rem);
  --text-sm:    clamp(0.8rem,  0.85vw, 0.875rem);
  --text-base:  clamp(0.95rem, 1vw,    1rem);
  --text-lg:    clamp(1.1rem,  1.2vw,  1.25rem);
  --text-xl:    clamp(1.3rem,  1.5vw,  1.5rem);
  --text-2xl:   clamp(1.6rem,  2vw,    2rem);
  --text-3xl:   clamp(2rem,    2.5vw,  2.5rem);
  --text-4xl:   clamp(2.4rem,  3.5vw,  3.5rem);
  --text-hero:  clamp(2.8rem,  6vw,    5.5rem);

  /* Headline-Max: clamp(28px, 5vw, 42px) */
  --text-headline-max: clamp(1.75rem, 5vw, 2.625rem);

  /* Zeilenhöhen */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing – nur auf Labels/Badges/Nav-Logo */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.1em;
  --tracking-wider:    0.2em;
  --tracking-widest:   0.36em;

  /* ── Abstände ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Übergänge ── */
  --transition-fast:    150ms ease;
  --transition-normal:  300ms ease;
  --transition-slow:    500ms ease;

  /* ── Layout ── */
  --max-width:        1100px;
  --max-width-narrow:  720px;
  --max-width-wide:   1300px;
}