/* ============================================================
   SOLARA INVESTMENT — Design Tokens
   Farbpalette: Deep Navy · Smaragdgrün · Gold
   ============================================================ */

:root {

  /* === SURFACES (Dark) === */
  --color-night:         #060D1A;   /* Tiefster Hintergrund */
  --color-deep:          #0B1628;   /* Haupt-Dunkelhintergrund */
  --color-surface:       #102040;   /* Karten auf Dunkel */
  --color-surface-2:     #162A50;   /* Erhöhte Fläche */
  --color-border:        #1E3A5F;   /* Border auf Dunkel */

  /* === SURFACES (Light) === */
  --color-light:         #EEF4FF;   /* Helle Sektionen */
  --color-light-surface: #E0EAF8;   /* Helle Karten */
  --color-light-border:  #C0D4EE;   /* Border auf Hell */

  /* === EMERALD — Primärfarbe (Wachstum · Natur) === */
  --color-emerald:       #10B981;
  --color-emerald-light: #34D399;
  --color-emerald-dark:  #059669;
  --color-emerald-dim:   rgba(16, 185, 129, 0.12);
  --color-emerald-glow:  rgba(16, 185, 129, 0.25);

  /* === GOLD — Sekundärfarbe (Sonne · Reichtum) === */
  --color-gold:          #F59E0B;
  --color-gold-light:    #FCD34D;
  --color-gold-dark:     #D97706;
  --color-gold-dim:      rgba(245, 158, 11, 0.12);
  --color-gold-glow:     rgba(245, 158, 11, 0.25);

  /* === TEXT === */
  --color-text-primary:  #EEF4FF;   /* Auf Dunkel */
  --color-text-secondary:#8BA3C7;   /* Gedämpft auf Dunkel */
  --color-text-tertiary: #5A7A9F;   /* Sehr gedämpft */
  --color-text-dark:     #0B1628;   /* Auf Hell */
  --color-text-dark-muted:#4A6890;  /* Gedämpft auf Hell */

  /* === TYPOGRAPHY === */
  --font-arabic:   'Cairo', system-ui, sans-serif;
  --font-latin:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  /* Aktive Schriften (werden per JS bei Sprachwechsel überschrieben) */
  --font-heading: var(--font-arabic);
  --font-body:    var(--font-arabic);

  /* === TYPE SCALE === */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.375rem;
  --text-2xl:     1.75rem;
  --text-3xl:     2.25rem;
  --text-4xl:     3rem;
  --text-5xl:     4rem;
  --text-display: clamp(3rem, 7vw, 6.5rem);
  --text-hero:    clamp(2.5rem, 6vw, 5.5rem);

  /* === LINE HEIGHTS === */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.65;
  --leading-relaxed: 1.85;

  /* === LETTER SPACING === */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;

  /* === SPACING === */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --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;

  --space-section: clamp(5rem, 10vw, 9rem);
  --space-gutter:  clamp(1.25rem, 4vw, 3rem);

  /* === BORDERS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-dark:    1px solid var(--color-border);
  --border-light:   1px solid var(--color-light-border);
  --border-emerald: 1px solid var(--color-emerald);
  --border-gold:    1px solid var(--color-gold);

  /* === SHADOWS === */
  --shadow-sm:      0 1px 3px rgba(6,13,26,0.35);
  --shadow-md:      0 4px 16px rgba(6,13,26,0.45);
  --shadow-lg:      0 12px 40px rgba(6,13,26,0.55);
  --shadow-emerald: 0 4px 24px rgba(16,185,129,0.22);
  --shadow-gold:    0 4px 24px rgba(245,158,11,0.22);

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-nav:    400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === LAYOUT === */
  --container-max:  1280px;
  --container-wide: 1440px;
  --nav-height:     72px;
}