/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — virt.arete ZENTRALE
   Single Source of Truth fuer alle Farben, Fonts, Spacing, Shadows
   Importiert von JEDER Seite: <link rel="stylesheet" href="design-tokens.css">
   Stand: 2026-04-02
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────── LIGHT MODE (DEFAULT) ──────────────────── */
:root {
  /* Backgrounds */
  --va-bg:              #F8F5F0;
  --va-bg-card:         #FFFFFF;
  --va-bg-card-hover:   #F5F3F0;
  --va-bg-elevated:     #FFFFFF;
  --va-bg-input:        #FFFFFF;
  --va-bg-sidebar:      #F2F0ED;
  --va-bg-overlay:      rgba(0,0,0,0.4);

  /* Borders */
  --va-border:          #E5E2DD;
  --va-border-light:    #EBE8E4;
  --va-border-focus:    var(--va-gold);

  /* Brand Gold — dunkler für Light Mode (Kontrast) */
  --va-gold:            #9C8463;
  --va-gold-hover:      #7A6A50;
  --va-gold-dim:        rgba(156,132,99,0.08);
  --va-gold-glow:       rgba(156,132,99,0.15);
  --va-gold-text:       #9C8463;

  /* Text */
  --va-text:            #1A1A1A;
  --va-text-secondary:  #4A4744;
  --va-text-muted:      #716D68;
  --va-text-heading:    #1F1D1A;
  --va-text-inverse:    #FFFFFF;

  /* Status Colors */
  --va-green:           #2E8055;
  --va-green-dim:       rgba(46,128,85,0.08);
  --va-green-text:      #2E8055;

  --va-yellow:          #D4A843;
  --va-yellow-dim:      rgba(220,160,50,0.08);
  --va-yellow-text:     #D4A843;

  --va-red:             #E05555;
  --va-red-dim:         rgba(220,50,50,0.08);
  --va-red-text:        #E05555;

  --va-blue:            #4A78A8;
  --va-blue-dim:        rgba(100,130,180,0.10);
  --va-blue-text:       #4A78A8;

  /* Typography */
  --va-font-heading:    'Montserrat', sans-serif;
  --va-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --va-font-size-base:  17px;
  --va-line-height:     1.65;

  /* Spacing */
  --va-space-xs:        0.25rem;
  --va-space-sm:        0.5rem;
  --va-space-md:        1rem;
  --va-space-lg:        1.5rem;
  --va-space-xl:        2rem;
  --va-space-2xl:       2.5rem;
  --va-space-3xl:       3rem;

  /* Radii */
  --va-radius:          12px;
  --va-radius-sm:       8px;
  --va-radius-lg:       16px;
  --va-radius-full:     9999px;

  /* Shadows — Light-Mode */
  --va-shadow:          0 1px 3px rgba(0,0,0,0.06);
  --va-shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --va-shadow-lg:       0 8px 32px rgba(0,0,0,0.12);
  --va-shadow-gold:     0 0 0 3px var(--va-gold-glow);

  /* Navigation */
  --va-nav-height:      64px;

  /* Transitions */
  --va-transition:      0.2s ease;
  --va-transition-slow: 0.4s ease;
}

/* ──────────────────── DARK MODE (OPTIONAL) ──────────────────── */
:root.dark-mode,
body.dark-mode,
:root[data-theme="dark"],
html[data-theme="dark"] body {
  --va-bg:              #0A0A0A;
  --va-bg-card:         #191919;
  --va-bg-card-hover:   #1E1E1E;
  --va-bg-elevated:     #242424;
  --va-bg-input:        #1A1A1A;
  --va-bg-sidebar:      #111111;
  --va-bg-overlay:      rgba(0,0,0,0.85);

  --va-border:          #2E2E2E;
  --va-border-light:    #383838;

  --va-gold:            #DBC5A0;
  --va-gold-hover:      #C4A97D;
  --va-gold-dim:        rgba(219,197,160,0.16);
  --va-gold-glow:       rgba(219,197,160,0.24);
  --va-gold-text:       #DBC5A0;

  --va-text:            #F0F0F0;
  --va-text-secondary:  #999590;
  --va-text-muted:      #7A756F;
  --va-text-heading:    #F5F5F5;
  --va-text-inverse:    #0A0A0A;

  --va-green:           #4ADE80;
  --va-green-dim:       rgba(74,222,128,0.10);
  --va-green-text:      #4ADE80;

  --va-yellow:          #FBBF24;
  --va-yellow-dim:      rgba(251,191,36,0.10);
  --va-yellow-text:     #FBBF24;

  --va-red:             #F87171;
  --va-red-dim:         rgba(248,113,113,0.10);
  --va-red-text:        #F87171;

  --va-blue:            #60A5FA;
  --va-blue-dim:        rgba(96,165,250,0.10);
  --va-blue-text:       #60A5FA;

  --va-shadow:          0 1px 0 rgba(255,255,255,0.04), 0 1px 4px rgba(0,0,0,0.5);
  --va-shadow-md:       0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.6);
  --va-shadow-lg:       0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.7);
  --va-shadow-gold:     0 0 0 3px var(--va-gold-glow);
}

/* ──────────────────── PILLAR COLORS ──────────────────── */
:root {
  /* Koerper (Body) — Green */
  --va-pillar-koerper:      var(--va-green);
  --va-pillar-koerper-dim:  var(--va-green-dim);

  /* Kopf (Mind) — Gold */
  --va-pillar-kopf:         var(--va-gold);
  --va-pillar-kopf-dim:     var(--va-gold-dim);

  /* Struktur (Structure) — Blue */
  --va-pillar-struktur:      var(--va-blue);
  --va-pillar-struktur-dim:  var(--va-blue-dim);
}

/* ──────────────────── BASE RESETS ──────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--va-font-body);
  font-size: var(--va-font-size-base);
  line-height: var(--va-line-height);
  color: var(--va-text);
  background: var(--va-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--va-font-heading);
  color: var(--va-text-heading);
  line-height: 1.25;
}

a {
  color: var(--va-gold);
  text-decoration: none;
  transition: color var(--va-transition);
}
a:hover {
  color: var(--va-gold-hover);
}

button {
  font-family: var(--va-font-body);
  cursor: pointer;
  border: none;
  transition: all var(--va-transition);
}

input, select, textarea {
  font-family: var(--va-font-body);
  font-size: 14px;
  border: 1px solid var(--va-border);
  border-radius: var(--va-radius-sm);
  padding: 10px 14px;
  background: var(--va-bg-input);
  color: var(--va-text);
  outline: none;
  transition: border-color var(--va-transition), box-shadow var(--va-transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--va-gold);
  box-shadow: var(--va-shadow-gold);
}
input::placeholder, textarea::placeholder {
  color: var(--va-text-muted);
}

/* ──────────────────── UTILITY CLASSES ──────────────────── */
.va-label {
  font-family: var(--va-font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--va-gold-text);
  display: block;
  margin-bottom: var(--va-space-sm);
}

.va-card {
  background: var(--va-bg-card);
  border: 1px solid var(--va-border);
  border-radius: var(--va-radius);
  padding: var(--va-space-lg);
  transition: background var(--va-transition), box-shadow var(--va-transition);
}
.va-card:hover {
  background: var(--va-bg-card-hover);
}

.va-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--va-radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--va-transition);
}
.va-btn-gold {
  background: var(--va-gold);
  color: var(--va-text-inverse);
}
.va-btn-gold:hover {
  background: var(--va-gold-hover);
}
.va-btn-outline {
  background: transparent;
  border: 1px solid var(--va-gold);
  color: var(--va-gold-text);
}
.va-btn-outline:hover {
  background: var(--va-gold-dim);
}
.va-btn-ghost {
  background: transparent;
  color: var(--va-text-secondary);
}
.va-btn-ghost:hover {
  color: var(--va-text);
  background: var(--va-bg-card);
}

/* Status Badges */
.va-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--va-radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.va-badge-green  { background: var(--va-green-dim);  color: var(--va-green-text); }
.va-badge-yellow { background: var(--va-yellow-dim); color: var(--va-yellow-text); }
.va-badge-red    { background: var(--va-red-dim);    color: var(--va-red-text); }
.va-badge-gold   { background: var(--va-gold-dim);   color: var(--va-gold-text); }
.va-badge-blue   { background: var(--va-blue-dim);   color: var(--va-blue-text); }

/* Progress Bar */
.va-progress {
  height: 6px;
  background: var(--va-border);
  border-radius: var(--va-radius-full);
  overflow: hidden;
}
.va-progress-fill {
  height: 100%;
  background: var(--va-gold);
  border-radius: var(--va-radius-full);
  transition: width 0.3s ease;
}

/* Scrollbar Styling (Dark Mode) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--va-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--va-text-muted); }