/* ============================================================
   Maklerinnen Wandlitz — Design Tokens
   Bewusste Differenzierung von kopmann.immobilien:
   weißer Grund, kräftiges Blau, moderne Grotesk statt Serif.
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  /* Pure white page. */
  --color-white:        #FFFFFF;
  /* Snow: the only "off-white" — used for subtle elevated surfaces, not as page bg. */
  --color-snow:         #F4F6F9;
  /* Ink: deep neutral with a faint blue undertone. */
  --color-ink:          #0E1726;
  /* Wandlitz Blue: the brand. Confident, not pastel. */
  --color-blue:         #1E48E0;
  --color-blue-deep:    #1635AC;     /* hover / pressed */
  --color-blue-tint:    #E5EBFB;     /* subtle surface */
  /* Stone: cool secondary neutral (replaces the warm Sand). */
  --color-stone:        #DDE2EA;
  --color-stone-deep:   #B7BFCB;
  /* Signal: kept as a deep coral for errors only (very rarely used). */
  --color-signal:       #D64545;

  /* ---------- Semantic ---------- */
  --bg:                 var(--color-white);
  --bg-elevated:        var(--color-snow);
  --surface-tint:       var(--color-blue-tint);
  --surface-muted:      var(--color-snow);
  --fg:                 var(--color-ink);
  --fg-muted:           #4B5566;
  --fg-subtle:          #7A8497;
  --border:             var(--color-stone);
  --border-strong:      var(--color-ink);
  --accent:             var(--color-blue);
  --accent-deep:        var(--color-blue-deep);
  --signal:             var(--color-signal);

  /* ---------- Typography ----------
     Display: Space Grotesk — modern, geometric grotesk with character.
     Body: Manrope — clean, contemporary humanist sans. Excellent on screens.
     Both are Google-Fonts open-source and clearly distinct from kopmann.immobilien (serif).
  */
  --font-display: "Space Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Backward alias (if anyone still references --font-serif) */
  --font-serif:   var(--font-display);

  /* Modular scale, base 16px, ratio 1.250 */
  --fs-caption: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    1rem;
  --fs-lead:    1.25rem;
  --fs-h3:      1.5rem;
  --fs-h2:      2.25rem;
  --fs-h1:      3rem;
  --fs-display: 5rem;

  --lh-display: 0.96;
  --lh-heading: 1.08;
  --lh-lead:    1.45;
  --lh-body:    1.6;
  --lh-tight:   1.2;

  --ls-display: -0.035em; /* tighter — grotesk likes it tight at large sizes */
  --ls-heading: -0.025em;
  --ls-body:    -0.005em;
  --ls-eyebrow: 0.18em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* ---------- Layout ---------- */
  --max-prose:   38rem;
  --max-content: 45rem;
  --max-wide:    78rem;
  --gutter:      clamp(1.75rem, 6vw, 3rem);
  --section-py:        var(--space-10);
  --section-py-mobile: var(--space-8);

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px; /* used only for the large blue CTA button */

  /* ---------- Shadows ---------- */
  --shadow-focus: 0 0 0 3px rgba(30, 72, 224, 0.22);
  --shadow-soft:  0 1px 2px rgba(14, 23, 38, 0.06);

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--border);
  --border-rule:     1px solid var(--color-ink);

  /* ---------- Transitions ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:    140ms var(--ease-out);
  --t-base:    220ms var(--ease-out);
  --t-slow:    420ms var(--ease-out);
}