/* ============================================================
   Kreativa — Design Tokens (Premium Minimal · nadverts-Inspired)
   ============================================================ */

:root {
  /* === Backgrounds (Pure-White Stack) === */
  --paper:        #FAFAFA;                   /* main bg */
  --paper-2:      #FFFFFF;                   /* card / lift */
  --paper-3:      #F2F2F2;                   /* soft tone section */
  --paper-edge:   #E8E8E8;                   /* divider tone */

  /* === Ink (Text / Lines) === */
  --ink:          #0A0A0A;                   /* near-black */
  --ink-soft:     #2C2C2C;                   /* body text */
  --ink-mute:     #545454;                   /* captions — WCAG AA 5.5:1 auf paper */
  --ink-line:     #E0E0E0;                   /* hairlines */

  /* === Single Accent (sehr sparsam, nur Hover/Akzent-Punkte) === */
  --accent:       #C8163C;                   /* deep red — Druckerei-Ton, dezent */
  --accent-soft:  #F8E5EA;                   /* tint fuer leichte Flaechen */

  /* CMYK NUR fuer dezente Akzente (Print-Hommage), nicht mehr fuer Sections */
  --c:            #00A3C4;
  --m:            #C8163C;
  --y:            #F2C200;
  --k:            #0A0A0A;

  /* Section helpers (default) */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-mute:      var(--ink-mute);
  --line:         var(--ink-line);

  /* === Typography === */
  --font-display: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "Courier New", monospace;

  /* Type Scale (fluid, leicht reduziert) */
  --t-mega:  clamp(3.5rem, 11vw, 10rem);
  --t-hero:  clamp(2.75rem, 8vw, 7.5rem);
  --t-h1:    clamp(2.25rem, 6vw, 5rem);
  --t-h2:    clamp(1.75rem, 4vw, 3rem);
  --t-h3:    clamp(1.35rem, 2.4vw, 2rem);
  --t-lead:  clamp(1.125rem, 1.6vw, 1.4rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.72rem;

  /* === Spacing === */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;
  --s-48: 12rem;
  --s-56: 14rem;

  /* === Layout === */
  --max-w: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 0;
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* === Motion === */
  --ease:     cubic-bezier(0.25, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast: 220ms;
  --t-mid:  450ms;
  --t-slow: 900ms;

  /* === Cursor === */
  --cursor-size: 8px;
  --cursor-hover-size: 32px;
}

/* === Section Color Variants ===
   Reduziert: nur 3 Varianten — Paper, Soft (Light Grey), Ink (Dark Statement)  */
.sec--paper    { --bg: var(--paper);   --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-mute: var(--ink-mute); --line: var(--ink-line); }
.sec--paper-2  { --bg: var(--paper-2); --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-mute: var(--ink-mute); --line: var(--ink-line); }
.sec--paper-3  { --bg: var(--paper-3); --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-mute: var(--ink-mute); --line: var(--paper-edge); }

.sec--ink {
  --bg: var(--ink);
  --fg: #FAFAFA;
  --fg-soft: #D4D4D4;
  --fg-mute: #8E8E8E;
  --line: #2C2C2C;
}

/* === LEGACY ALIASES === Sektionen die noch sec--cyan/magenta/yellow rufen,
   bekommen jetzt monochromatischen Look mit subtiler Akzent-Border */
.sec--cyan,
.sec--magenta,
.sec--yellow {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --fg-mute: var(--ink-mute);
  --line: var(--ink-line);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}