/* ============================================================
   Cortelio Immobilien — Design Tokens
   Design-Richtung: "Ledger" · Institutional / Editorial
   Single source of truth. Komponenten NUR über diese Variablen
   stylen — keine Hex-Werte direkt in style.css.
   ============================================================ */

:root {

  /* ---- Farben: Flächen ---------------------------------- */
  --bg:            #F4F1EA;  /* Seitenhintergrund (warmes Papier) */
  --bg-raised:     #FBF9F4;  /* leicht erhöhte Flächen, CTA-Box */
  --surface:       #FFFFFF;  /* Karten, Bild-Container */

  /* ---- Farben: Text ------------------------------------- */
  --ink:           #1A1A17;  /* Überschriften, Primärtext */
  --muted:         #5D594F;  /* Fließtext, Sekundärtext */
  --faint:         #8C877A;  /* Captions, Meta, Footer */

  /* ---- Farben: Linien ----------------------------------- */
  --line:          #DDD6C9;  /* Standard-Trennlinien, Borders */
  --line-strong:   #CFC8B8;  /* betonte Linien (Hover-Underlines) */

  /* ---- Farben: Akzent (Tannengrün) ---------------------- */
  --accent:        #1F3B30;  /* Primäraktion, Marke, dunkle Bänder */
  --accent-hover:  #163027;  /* Hover auf accent */
  --on-accent:     #EFEDE4;  /* Text auf accent-Fläche */
  --accent-tint:   #A9CDB9;  /* heller Akzent auf dunkler Fläche */
  --accent-soft:   #9DB8A8;  /* Eyebrow/Meta auf dunkler Fläche */

  /* ---- Typografie: Familien ----------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;  /* Headlines, Zahlen, Zitate */
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;  /* Body, Navigation, Buttons */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* Eyebrows, Labels, Meta */

  /* ---- Typografie: Skala (Desktop) ---------------------- */
  --fs-eyebrow:   12px;   /* mono, uppercase, letter-spacing .16em */
  --fs-meta:      13px;
  --fs-body-sm:   15px;
  --fs-body:      18px;
  --fs-h3:        23px;
  --fs-h2:        42px;
  --fs-quote:     40px;
  --fs-h1:        62px;

  --lh-tight:     1.06;   /* Headlines */
  --lh-snug:      1.28;   /* Zitat */
  --lh-body:      1.65;   /* Fließtext */

  /* ---- Layout ------------------------------------------- */
  --maxw:         1200px; /* Inhaltsbreite */
  --gutter:       56px;   /* horizontaler Seitenrand (Desktop) */
  --gutter-sm:    24px;   /* horizontaler Seitenrand (Mobil) */
  --section-y:    86px;   /* vertikaler Sektionsabstand */

  /* ---- Form & Bewegung ---------------------------------- */
  --radius:       3px;    /* bewusst kantig — institutionell */
  --radius-pill:  2px;
  --shadow:       0 24px 70px rgba(0, 0, 0, .10);
  --ease:         .25s ease;
}

/* Mobile Typo-Skala */
@media (max-width: 768px) {
  :root {
    --fs-h1:    40px;
    --fs-h2:    30px;
    --fs-quote: 27px;
    --fs-body:  16px;
    --gutter:   var(--gutter-sm);
    --section-y: 60px;
  }
}


/* ============================================================
   Widescreen / große Desktops — mehr Inhaltsbreite & Skala
   ============================================================ */
@media (min-width: 1600px) {
  :root {
    --maxw:      1360px;
    --gutter:    76px;
    --section-y: 104px;
    --fs-h1:     74px;
    --fs-h2:     48px;
    --fs-quote:  46px;
    --fs-h3:     25px;
    --fs-body:   19px;
  }
}
@media (min-width: 1920px) {
  :root {
    --maxw:      1480px;
    --gutter:    96px;
    --section-y: 120px;
    --fs-h1:     84px;
    --fs-h2:     54px;
    --fs-quote:  50px;
    --fs-body:   20px;
  }
}