/* ============================================
   Dachwerk Design Tokens
   Branchensoftware für Gründach & Flachdach
   ============================================ */

:root {
  /* ─── Primärfarbe: Dachwerk-Grün ─── */
  --green:          #22C55E;
  --green-light:    #4ADE80;
  --green-dark:     #16A34A;
  --green-darker:   #15803D;
  --green-glow:     rgba(34, 197, 94, 0.15);
  --green-glow-sm:  rgba(34, 197, 94, 0.08);
  --green-border:   rgba(34, 197, 94, 0.25);
  --green-bg:       rgba(34, 197, 94, 0.08);

  /* Rückwärts-Kompatibilität */
  --amber:          var(--green);
  --amber-light:    var(--green-light);
  --amber-dark:     var(--green-dark);
  --amber-glow:     var(--green-glow);
  --amber-glow-sm:  var(--green-glow-sm);
  --amber-border:   var(--green-border);

  /* ─── Backgrounds — Hell als Default ─── */
  --bg-base:        #F5F5F7;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #EBEBF0;
  --bg-overlay:     #E5E5EA;
  --bg-hover:       #DCDCE2;

  /* ─── Borders ─── */
  --border-subtle:  #E5E5EA;
  --border-default: #D1D1D6;
  --border-strong:  #AEAEB2;

  /* ─── Text ─── */
  --text-primary:   #0D0D10;
  --text-secondary: #48484A;
  --text-muted:     #AEAEB2;
  --text-inverse:   #FFFFFF;

  /* ─── Semantic Colors ─── */
  --success:        #22C55E;
  --success-bg:     rgba(34, 197, 94, 0.10);
  --success-border: rgba(34, 197, 94, 0.25);

  --danger:         #EF4444;
  --danger-bg:      rgba(239, 68, 68, 0.10);
  --danger-border:  rgba(239, 68, 68, 0.25);

  --warning:        #F59E0B;
  --warning-bg:     rgba(245, 158, 11, 0.10);
  --warning-border: rgba(245, 158, 11, 0.25);

  --info:           #3B82F6;
  --info-bg:        rgba(59, 130, 246, 0.10);
  --info-border:    rgba(59, 130, 246, 0.25);

  /* ─── Typography ─── */
  --font-display: 'Inter', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ─── Spacing ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* Aliases */
  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);

  /* ─── Border Radius ─── */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ─── Shadows — heller Stil ─── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.04);
  --shadow:       0 2px 8px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-green: 0 0 16px rgba(34,197,94,0.20), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-amber: var(--shadow-green);

  /* ─── Motion ─── */
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:    100ms;
  --duration-default: 160ms;
  --duration-slow:    260ms;
  --duration-slower:  400ms;

  /* ─── Dachwerk Aliases ─── */
  --color-primary:    var(--green);
  --color-success:    #22C55E;
  --color-warning:    #F59E0B;
  --color-error:      #EF4444;
  --color-info:       #3B82F6;
  --surface-default:  var(--bg-base);
  --surface-card:     var(--bg-surface);
  --surface-hover:    var(--bg-hover);
}

/* ============================================
   Dark Mode — opt-in via html[data-theme="dark"]
   ============================================ */

html[data-theme="dark"] {
  --bg-base:        #0A0A0B;
  --bg-surface:     #111114;
  --bg-elevated:    #18181C;
  --bg-overlay:     #1F1F26;
  --bg-hover:       #25252E;

  --border-subtle:  #1C1C23;
  --border-default: #28282F;
  --border-strong:  #38383F;

  --text-primary:   #F0F0F2;
  --text-secondary: #9898A6;
  --text-muted:     #4A4A58;
  --text-inverse:   #0A0A0B;

  --green:          #4ADE80;
  --green-light:    #86EFAC;
  --green-dark:     #22C55E;
  --green-glow:     rgba(74, 222, 128, 0.15);
  --green-glow-sm:  rgba(74, 222, 128, 0.08);
  --green-border:   rgba(74, 222, 128, 0.25);
  --green-bg:       rgba(74, 222, 128, 0.08);

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow:       0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);
  --shadow-green: 0 0 20px rgba(74,222,128,0.20), 0 4px 12px rgba(0,0,0,0.4);
}