/* ============================================================
   BRIGHTLABEL STUDIO · Design Tokens
   Eine Quelle für Farbe, Typo, Raum, Rhythmus und Motion.
   ============================================================ */

:root {
  /* ── Farbe: Basis ─────────────────────────────────────── */
  --ink:            #0A0A0B;
  --ink-raised:     #121214;
  --ink-card:       #17171A;
  --ink-line:       rgba(255, 255, 255, .10);
  --ink-line-soft:  rgba(255, 255, 255, .06);
  --ink-text:       #F5F3F0;
  --ink-muted:      rgba(245, 243, 240, .58);
  --ink-faint:      rgba(245, 243, 240, .34);

  --paper:          #F1EFEA;
  --paper-raised:   #FBFAF8;
  --paper-sunk:     #E7E4DD;
  --paper-line:     rgba(10, 10, 11, .12);
  --paper-line-soft:rgba(10, 10, 11, .07);
  --paper-text:     #0F0F11;
  --paper-muted:    rgba(15, 15, 17, .62);
  --paper-faint:    rgba(15, 15, 17, .38);

  /* ── Farbe: Akzent (ein Ton, zwei Helligkeiten) ────────── */
  --accent:         #4D7CFE;   /* auf Dunkel */
  --accent-deep:    #1E45C9;   /* auf Hell, kontraststark genug für Text */
  --accent-soft:    rgba(77, 124, 254, .16);
  --accent-glow:    rgba(77, 124, 254, .38);

  /* ── Kontextfarben (werden pro Sektion umgeschaltet) ───── */
  --bg:             var(--ink);
  --fg:             var(--ink-text);
  --muted:          var(--ink-muted);
  --faint:          var(--ink-faint);
  --line:           var(--ink-line);
  --line-soft:      var(--ink-line-soft);
  --surface:        var(--ink-card);
  --accent-ctx:     var(--accent);

  /* ── Typografie ───────────────────────────────────────── */
  --font-sans: 'Switzer', 'Switzer Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Zodiak', 'Zodiak Fallback', Georgia, 'Times New Roman', serif;

  --fs-display: clamp(3rem, 8.1vw, 7.4rem);
  --fs-h2:      clamp(2.3rem, 5.4vw, 4.6rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.15rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.32rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm:      .935rem;
  --fs-xs:      .78rem;
  --fs-micro:   .69rem;

  --lh-display: .94;
  --lh-tight:   1.06;
  --lh-body:    1.62;

  --tr-display: -.045em;
  --tr-head:    -.03em;
  --tr-label:   .16em;

  /* ── Raum & Raster ────────────────────────────────────── */
  --maxw:       1320px;
  --maxw-text:  62ch;
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --sec-y:      clamp(5.5rem, 12vh, 10.5rem);
  --gap:        clamp(1.5rem, 3vw, 3rem);
  /* Überlappung an der Kontrastnaht: helle Sektionen legen sich um
     diesen Betrag über die dunkle Ebene darüber. */
  --seam:       clamp(1.5rem, 4vw, 3.25rem);

  /* ── Radien & Kanten ──────────────────────────────────── */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-xl:  40px;
  --r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────── */
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-inout:  cubic-bezier(.76, 0, .24, 1);
  --e-soft:   cubic-bezier(.33, 1, .68, 1);
  --d-fast:   .22s;
  --d-mid:    .45s;
  --d-slow:   .9s;
  --d-reveal: 1.05s;

  /* ── Ebenen ───────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  50;
  --z-nav:     90;
  --z-menu:    95;
  --z-cursor:  120;
  --z-loader:  200;

  color-scheme: dark;
}

/* ── Sektions-Themes: eine Regel schaltet die ganze Palette ── */
[data-theme='ink'] {
  --bg:        var(--ink);
  --fg:        var(--ink-text);
  --muted:     var(--ink-muted);
  --faint:     var(--ink-faint);
  --line:      var(--ink-line);
  --line-soft: var(--ink-line-soft);
  --surface:   var(--ink-card);
  --accent-ctx: var(--accent);
}

[data-theme='paper'] {
  --bg:        var(--paper);
  --fg:        var(--paper-text);
  --muted:     var(--paper-muted);
  --faint:     var(--paper-faint);
  --line:      var(--paper-line);
  --line-soft: var(--paper-line-soft);
  --surface:   var(--paper-raised);
  --accent-ctx: var(--accent-deep);
}