/* ============================================================
   IMMOCODEX — Design System: Colors & Typography
   Kapitalanlage. Mit Struktur.
   Palette v2: Warm Silver + Cool Silver + Kupfer
   
   ⚑  WICHTIGSTE FARBREGEL:
   Kein Schwarz (#000 / #1A1A1A) als großflächiger Hintergrund.
   Espresso (#2A1F14) NUR für Text & Headlines.
   Flächen = Creme · Leinen · Warm Silver · Cool Silver · Kupfer (sparsam).
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Color Tokens ─────────────────────────────────────────── */
:root {
  /* ── Neutrals (warm-tinted, sand/cream family) ──────── */
  --color-espresso:       #2A1F14;   /* NUR Text & Headlines — NIE als Hintergrund */
  --color-creme:          #F5EFE6;   /* Primärer Seitenhintergrund */
  --color-white:          #FFFFFF;   /* Karten, Panels, Kontrast-Flächen */
  --color-leinen:         #EDE4D6;   /* Tabellen, Trennlinien, Borders */
  --color-sand:           #C4A882;   /* Subtext, sekundäre Labels */
  --color-mid-brown:      #9A7B5A;   /* Ergänzende Infos, Captions */

  /* ── Silber-Töne (Zwischenflächen, Slide-Sektionen) ─── */
  --color-warm-silver:    #C4C0BB;   /* Warm-neutral — für Flächen, Slides */
  --color-cool-silver:    #B8BEC4;   /* Leicht blau-silbrig — für Flächen, Slides */

  /* ── Kupfer (Akzent + sparsame Premium-Fläche) ──────── */
  --color-copper:         #B87333;   /* Akzent: Linien, Icons, CTAs, kleine Flächen */
  --color-copper-dark:    #956025;   /* Hover, gedrückt */
  --color-copper-pressed: #7A4E1D;   /* Pressed State */
  --color-copper-tint:    #F9F0E8;   /* Warme Panels, Tabellen-Header */

  /*
   * ⚑  KEINE DUNKLEN HINTERGRÜNDE:
   * --color-espresso darf NICHT als background verwendet werden.
   * Kein #000, #111, #1A1A1A als Flächenfarbe.
   * Dunkle Wirkung wird durch Kupfer-Akzente + Silber-Flächen erzielt.
   */

  /* ── Semantic aliases ───────────────────────────────── */
  --fg-primary:           var(--color-espresso);
  --fg-secondary:         var(--color-mid-brown);
  --fg-tertiary:          var(--color-sand);
  --fg-inverse:           var(--color-white);
  --fg-accent:            var(--color-copper);

  --bg-page:              var(--color-creme);
  --bg-card:              var(--color-white);
  --bg-subtle:            var(--color-leinen);
  --bg-warm:              var(--color-copper-tint);
  --bg-silver-warm:       var(--color-warm-silver);
  --bg-silver-cool:       var(--color-cool-silver);
  --bg-accent:            var(--color-copper);      /* Statement-Flächen, Heroes, CTAs */

  --border-default:       var(--color-leinen);
  --border-accent:        var(--color-copper);
  --border-subtle:        rgba(42, 31, 20, 0.10);
}

/* ── Typography Tokens ────────────────────────────────────── */
:root {
  --font-primary:   'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --text-display:   clamp(48px, 5vw, 64px);
  --text-h1:        clamp(32px, 3.5vw, 40px);
  --text-h2:        clamp(24px, 2.5vw, 28px);
  --text-h3:        20px;
  --text-body:      17px;
  --text-small:     14px;
  --text-label:     12px;

  /* Weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Tracking */
  --tracking-display: 0.04em;
  --tracking-heading: 0.05em;
  --tracking-label:   0.12em;
  --tracking-body:    0.01em;

  /* Line height */
  --leading-tight:    1.15;
  --leading-heading:  1.25;
  --leading-body:     1.65;
  --leading-relaxed:  1.8;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl:  128px;

  /* Borders & Radii */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(42,31,20,0.07);
  --shadow-md:  0 2px 12px rgba(42,31,20,0.09);
  --shadow-lg:  0 4px 24px rgba(42,31,20,0.11);

  /* Accent line */
  --accent-line: 3px solid var(--color-copper);
}

/* ── Base styles ──────────────────────────────────────────── */
body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-size: var(--text-display); font-weight: var(--weight-black);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
}
h1, .h1 {
  font-size: var(--text-h1); font-weight: var(--weight-bold);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-md);
}
h2, .h2 {
  font-size: var(--text-h2); font-weight: var(--weight-bold);
  line-height: var(--leading-heading); letter-spacing: 0.03em;
  margin: 0 0 var(--space-sm);
}
h3, .h3 {
  font-size: var(--text-h3); font-weight: var(--weight-semibold);
  line-height: var(--leading-heading); letter-spacing: 0.02em;
  margin: 0 0 var(--space-sm);
}
p, .body { font-size: var(--text-body); line-height: var(--leading-body); margin: 0 0 var(--space-md); }
.body-sm  { font-size: var(--text-small); color: var(--fg-secondary); }
.label, label {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg-secondary);
}
.label--accent { color: var(--fg-accent); }
.accent-text   { color: var(--color-copper); }

/* ── Structural motifs ────────────────────────────────────── */
.copper-border-left { border-left: var(--accent-line); padding-left: var(--space-md); }
.copper-rule { border: none; border-top: 1px solid var(--color-copper); margin: var(--space-xl) 0; }
.divider     { border: none; border-top: 1px solid var(--color-leinen); margin: var(--space-lg) 0; }

/* ── Surface helpers ──────────────────────────────────────── */
.surface-copper      { background: var(--bg-accent);       color: var(--fg-inverse); }
.surface-warm-silver { background: var(--bg-silver-warm);  color: var(--fg-primary); }
.surface-cool-silver { background: var(--bg-silver-cool);  color: var(--fg-primary); }
.surface-creme       { background: var(--bg-page);         color: var(--fg-primary); }
.surface-warm        { background: var(--bg-warm);         color: var(--fg-primary); }

/* ── Utility ──────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--fg-secondary); }
.text-accent  { color: var(--fg-accent); }
.text-inverse { color: var(--fg-inverse); }
.caps         { text-transform: uppercase; letter-spacing: var(--tracking-label); }