/* ═══════════════════════════════════════════════════════════════════════════
   QI-ATSU — Design Tokens
   Farben übernommen 1:1 aus der Squarespace-Seite (Stand 2026-05-25)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben ─────────────────────────────────────────────────────────────── */
  --c-violet:           #815086;  /* Primär — Headlines, Logo-Schrift */
  --c-violet-light:     #b193bd;  /* Sekundär — Buttons, Icon, Akzente */
  --c-violet-soft:      #d8c9de;  /* Sehr hell — Hover-States, Cards */
  --c-violet-tint:      #f1ebf3;  /* Hintergrund-Wash */

  --c-ink:              #454545;  /* Body-Text (dunkles Anthrazit) */
  --c-ink-soft:         #6b6b6b;  /* Sekundärtext, Captions */
  --c-ink-muted:        #9a9a9a;  /* Hilfstext, Meta */

  --c-white:            #ffffff;
  --c-cream:            #f5efea;  /* warmer Off-White (Hero-Bg) */
  --c-bone:            #faf7f4;  /* dezenter Section-Bg */

  --c-border:          #e8e2dd;  /* dezente Trennlinien */

  /* ── Typografie ─────────────────────────────────────────────────────────── */
  /* Originalseite nutzt "Museo" (Adobe Fonts, lizenzpflichtig).
     Substitution: Cormorant Garamond (warm, serif, ähnlicher Charakter)
     bzw. PT Serif als Fallback. */
  --font-display:       'Cormorant Garamond', 'PT Serif', Georgia, serif;
  --font-body:          'Fira Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-eyebrow:       'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Größen ───────────────────────────────────────────────────────────────── */
  --fs-eyebrow:         0.78rem;     /* 12.5px — H3 mit hohem letter-spacing */
  --fs-body:            1rem;        /* 16px (war 15px – wir gehen auf 16px für Lesbarkeit) */
  --fs-body-lg:         1.125rem;    /* 18px — Lead-Absätze */
  --fs-h4:              1.25rem;     /* 20px */
  --fs-h3:              1.625rem;    /* 26px */
  --fs-h2:              2.25rem;     /* 36px */
  --fs-h1:              3rem;        /* 48px */
  --fs-h1-xl:           4.25rem;     /* 68px — Hero */

  --lh-tight:           1.15;
  --lh-snug:            1.3;
  --lh-normal:          1.6;
  --lh-loose:           1.8;

  --ls-eyebrow:         0.22em;
  --ls-display:         -0.02em;
  --ls-body:            -0.005em;

  /* ── Spacing-Skala (Powers of 2 + 1.5) ──────────────────────────────────── */
  --sp-1:               0.25rem;   /* 4 */
  --sp-2:               0.5rem;    /* 8 */
  --sp-3:               0.75rem;   /* 12 */
  --sp-4:               1rem;      /* 16 */
  --sp-5:               1.5rem;    /* 24 */
  --sp-6:               2rem;      /* 32 */
  --sp-7:               3rem;      /* 48 */
  --sp-8:               4rem;      /* 64 */
  --sp-9:               6rem;      /* 96 */
  --sp-10:              8rem;      /* 128 — Section-Padding desktop */
  --sp-11:              10rem;     /* 160 */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container:          72rem;     /* 1152px */
  --container-narrow:   48rem;     /* 768px — für reine Lesetexte */
  --container-wide:     85rem;     /* 1360px — für Hero/Galerie */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-pill:        999px;

  /* ── Schatten (sehr dezent) ─────────────────────────────────────────────── */
  --shadow-sm:          0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:          0 4px 12px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
  --shadow-lg:          0 20px 60px rgba(0,0,0,.10);

  /* ── Animation ──────────────────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(.2, .6, .2, 1);
  --t-fast:             150ms;
  --t-base:             250ms;
  --t-slow:             450ms;

  /* ── Header-Höhen ───────────────────────────────────────────────────────── */
  --header-h:           96px;
  --header-h-mobile:    72px;
}

/* Mobile-Anpassungen der Skala */
@media (max-width: 768px) {
  :root {
    --fs-h1-xl:         2.5rem;     /* 40px */
    --fs-h1:            2rem;       /* 32px */
    --fs-h2:            1.625rem;   /* 26px */
    --sp-10:            4rem;       /* mobile Section-Padding */
    --sp-9:             3rem;
  }
}