/* ============================================
   Capyverum Design-Tokens · v1.0
   ============================================ */
:root {
  /* --- Markenfarben --- */
  --cv-blue-900: #141E25;  /* Dark-Mode-Hintergrund */
  --cv-blue-800: #1E2D37;  /* Nachtblau · Pantone 7546 C */
  --cv-blue-600: #2C4150;
  --cv-blue-400: #4A5D6B;  /* Sekundärtext */
  --cv-blue-200: #A7B4BD;
  --cv-blue-100: #D8DEE2;
  --cv-blue-50:  #EDF0F2;
  --cv-gold-700: #856938;  /* Text-Gold: Links auf Hell */
  --cv-gold-500: #C1AA7F;  /* Gold · Pantone 465 C / 7502 C */
  --cv-gold-300: #D6C7A9;
  --cv-gold-100: #EAE2D0;
  --cv-gold-50:  #F5F1E7;
  --cv-white:    #FFFFFF;
  --cv-offwhite: #F7F5F0;  /* Warmweiß: Seitenhintergrund */
  --cv-anthracite: #0E0F11; /* Dunkler Logo-Untergrund — Logo NIE auf Nachtblau! */

  /* --- Hintergrund-Ebenen (tief → hoch), z. B. für Tailwind-Themes --- */
  --cv-light-0: #E9E5DA;  /* Leinen · abgesetzte Bereiche */
  --cv-light-1: #F0EDE5;  /* Sand · Sektionen, Hover */
  --cv-light-2: #F7F5F0;  /* Warmweiß · Seitenhintergrund */
  --cv-light-3: #FBFAF7;  /* Papier · erhöhte Panels */
  --cv-light-4: #FFFFFF;  /* Weiß · Karten, Dialoge */
  --cv-dark-0:  #0A0B0D;  /* Tiefschwarz · Seitenhintergrund — Logo ✓ */
  --cv-dark-1:  #0E0F11;  /* Anthrazit · Logo-Untergrund — Logo ✓ */
  --cv-dark-2:  #16181B;  /* Graphit · Karten — Logo nur im Notfall */
  --cv-dark-3:  #1E2124;  /* Schiefer · erhöhte Flächen — KEIN Logo */
  --cv-dark-4:  #26292D;  /* Stein · Dialoge — KEIN Logo */

  /* --- Funktionsfarben --- */
  --cv-success: #2E7D5B;
  --cv-warning: #B7791F;
  --cv-error:   #B54834;
  --cv-info:    #2C6E8F;

  /* --- Rollen (Light Mode) --- */
  --cv-bg:          var(--cv-offwhite);
  --cv-surface:     var(--cv-white);
  --cv-text:        var(--cv-blue-800);
  --cv-text-muted:  var(--cv-blue-400);
  --cv-accent:      var(--cv-gold-500);
  --cv-accent-text: var(--cv-gold-700);
  --cv-border:      #E4DECF;

  /* --- Typografie --- */
  --cv-font: 'Poppins','Segoe UI','Helvetica Neue',Arial,sans-serif;

  /* --- Abstände (8-px-Raster) --- */
  --cv-space-1: 4px;   --cv-space-2: 8px;
  --cv-space-3: 12px;  --cv-space-4: 16px;
  --cv-space-5: 24px;  --cv-space-6: 32px;
  --cv-space-7: 48px;  --cv-space-8: 64px;
  --cv-space-9: 96px;

  /* --- Form --- */
  --cv-radius-s:    8px;
  --cv-radius-m:    14px;
  --cv-radius-pill: 999px;
  --cv-shadow-s: 0 1px 3px rgba(20,30,37,.08);
  --cv-shadow-m: 0 6px 24px rgba(20,30,37,.10);
  --cv-shadow-l: 0 16px 48px rgba(20,30,37,.16);
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --cv-bg:          var(--cv-blue-900);
  --cv-surface:     var(--cv-blue-800);
  --cv-text:        #EDEAE3;
  --cv-text-muted:  var(--cv-blue-200);
  --cv-accent:      var(--cv-gold-500);
  --cv-accent-text: var(--cv-gold-500);
  --cv-border:      var(--cv-blue-600);
}