/* ==========================================================================
   SAFRII v3 — Design Tokens
   Single source of truth fuer Farben, Typografie, Abstaende, Schatten, Z-Layer.
   Wird auf jeder Seite als ERSTE Stylesheet eingebunden.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Color System — Light Mode (Default)
     Cream BG + harter Ink + signature Lime + dezente Sekundaer-Akzente.
     -------------------------------------------------------------------------- */

  /* Surface */
  --bg:           #f6f4ec;          /* Page background — warm cream */
  --bg-soft:      #efece2;          /* Slightly deeper cream for sections */
  --surface:      #ffffff;          /* Cards, panels */
  --surface-2:    #fbf7e3;          /* Tinted card variant */

  /* Ink (text) — in dark mode this flips to a light tone for readability */
  --ink:          #111111;          /* Primary text */
  --ink-soft:     #2a2a2a;          /* Body text on bright bgs */
  --ink-dim:      #6b6b6b;          /* Captions, meta */
  --ink-faint:    #a5a5a0;          /* Hints, disabled */
  --ink-on-accent:#0d0d0d;          /* Text on accent fills (always near-black) */

  /* Stroke — always near-black for borders + hard shadows (Neobrutalism) */
  --stroke:       #111111;

  /* Signature Accent — Lime */
  --accent:       #d1fe17;          /* Signature lime (fresh, tech, y2k) */
  --accent-deep:  #b8e80a;          /* Hover/active darker variant */
  --accent-soft:  #ecffb0;          /* Tinted background variant */

  /* Secondary accents — sparingly, for visual variety in cards */
  --c-pink:       #ff90b3;
  --c-pink-soft:  #ffd4e1;
  --c-blue:       #5b8cff;
  --c-blue-soft:  #c9d8ff;
  --c-yellow:     #ffde59;
  --c-yellow-soft:#fff1a8;
  --c-coral:      #ff7a5c;

  /* Semantic */
  --success:      #2ecc71;
  --warning:      #f39c12;
  --danger:       #ff4d4f;

  /* Borders — hard black edges in light and dark */
  --bd-1:         1px solid var(--stroke);
  --bd-2:         2px solid var(--stroke);
  --bd-3:         3px solid var(--stroke);
  --bd-4:         4px solid var(--stroke);

  /* Hard Shadows — NO blur, offset; always black for consistent brutalist depth */
  --shadow-color: var(--stroke);
  --sh-xs:        2px 2px 0 0 var(--shadow-color);
  --sh-sm:        4px 4px 0 0 var(--shadow-color);
  --sh-md:        6px 6px 0 0 var(--shadow-color);
  --sh-lg:       10px 10px 0 0 var(--shadow-color);
  --sh-xl:       14px 14px 0 0 var(--shadow-color);

  /* Inset / Pressed — when a button "snaps down" */
  --sh-press:     0 0 0 0 var(--shadow-color);

  /* --------------------------------------------------------------------------
     Typography
     Display: Archivo Black     | Body: Space Grotesk     | Mono: JetBrains Mono
     -------------------------------------------------------------------------- */

  --ff-display:   "Archivo Black", "Inter", system-ui, sans-serif;
  --ff-body:      "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono:      "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-display-1: clamp(3rem, 9vw, 8rem);     /* hero title */
  --fs-display-2: clamp(2.25rem, 6vw, 5rem);  /* big section title */
  --fs-h1:        clamp(2rem, 4vw, 3.5rem);
  --fs-h2:        clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3:        clamp(1.25rem, 2vw, 1.625rem);
  --fs-h4:        1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-mono:      0.875rem;
  --fs-kicker:    0.75rem;     /* uppercase eyebrow */

  --lh-tight:     0.95;
  --lh-snug:      1.15;
  --lh-base:      1.55;
  --lh-loose:     1.75;

  --ls-tight:     -0.03em;
  --ls-base:      0;
  --ls-wide:      0.06em;
  --ls-extra:     0.18em;       /* kickers / labels */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-black:     900;

  /* --------------------------------------------------------------------------
     Spacing scale — 4px base
     -------------------------------------------------------------------------- */

  --sp-0:   0;
  --sp-1:   0.25rem;   /*  4 */
  --sp-2:   0.5rem;    /*  8 */
  --sp-3:   0.75rem;   /* 12 */
  --sp-4:   1rem;      /* 16 */
  --sp-5:   1.25rem;   /* 20 */
  --sp-6:   1.5rem;    /* 24 */
  --sp-8:   2rem;      /* 32 */
  --sp-10:  2.5rem;    /* 40 */
  --sp-12:  3rem;      /* 48 */
  --sp-16:  4rem;      /* 64 */
  --sp-20:  5rem;      /* 80 */
  --sp-24:  6rem;      /* 96 */
  --sp-32:  8rem;      /* 128 */

  /* Layout containers */
  --container:    1200px;
  --container-md: 960px;
  --container-sm: 720px;
  --gutter:       clamp(1rem, 4vw, 2.5rem);

  /* --------------------------------------------------------------------------
     Radii — neobrutalism keeps edges hard. One soft, one pill.
     -------------------------------------------------------------------------- */

  --r-0:    0;
  --r-soft: 8px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------------
     Z-layers
     -------------------------------------------------------------------------- */

  --z-base:    1;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 1000;
  --z-drawer:  1100;
  --z-modal:   1200;
  --z-toast:   1300;

  /* --------------------------------------------------------------------------
     Motion — short, snappy, brutalist
     -------------------------------------------------------------------------- */

  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --dur-quick:   120ms;
  --dur:         220ms;
  --dur-slow:    360ms;
  --dur-xslow:   600ms;

  /* --------------------------------------------------------------------------
     Component-shared knobs
     -------------------------------------------------------------------------- */

  --press-shift: 4px;       /* how far buttons "snap down" on :active */
  --header-h:    72px;
  --header-h-sm: 64px;
}

/* ==========================================================================
   Dark Mode — flips bg/ink for text; --stroke stays black for edges.
   Activated via [data-theme="dark"] on <html>.
   ========================================================================== */

[data-theme="dark"] {
  /* Page bg lighter than --stroke (#111) so hard-shadow borders read clearly */
  --bg:           #1a1a1e;
  --bg-soft:      #222228;
  --surface:      #2a2a32;
  --surface-2:    #32323c;

  --ink:          #f4f4ee;
  --ink-soft:     #d8d8d2;
  --ink-dim:      #8a8a85;
  --ink-faint:    #555550;
  --ink-on-accent:#0d0d0d;     /* lime stays bright, text on it stays dark */

  --accent:       #d1fe17;
  --accent-deep:  #e0ff4a;     /* in dark, hover goes brighter */
  --accent-soft:  #2c3608;

  --c-pink-soft:  #3a1a26;
  --c-blue-soft:  #1a2548;
  --c-yellow-soft:#3a3010;

  /* --stroke and --shadow-color stay black (defined in :root) */
}

/* ==========================================================================
   Accessibility: respect reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur:       0ms;
    --dur-slow:  0ms;
    --dur-xslow: 0ms;
  }
}