/* ===========================================================================
   Scalableloops — Design Tokens
   Single source of truth for colors, typography, spacing, motion.
   Override-Reihenfolge: tokens.css → main.css → modules.css.
   =========================================================================== */

:root {
  /* === Colors — Brand === */
  --ink: #0a0a0a;
  --ink-deep: #050505;
  --paper: #ECEAE4;
  --paper-line: rgba(10, 10, 10, 0.1);
  --ink-line: rgba(255, 255, 255, 0.1);
  --accent: #A78BFA;             /* primary accent — purple */
  --accent-soft: rgba(167, 139, 250, 0.18);
  --accent-glow: rgba(167, 139, 250, 0.45);
  --accent-rule: rgba(167, 139, 250, 0.35);

  /* === Colors — System === */
  --white: #ffffff;
  --white-85: rgba(255, 255, 255, 0.85);
  --white-75: rgba(255, 255, 255, 0.75);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-04: rgba(255, 255, 255, 0.04);

  --error: #ff5a52;
  --success: #34ffb0;

  /* === Typography === */
  --font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-micro: 11px;
  --fs-body: 15px;
  --fs-body-lg: 17px;
  --fs-lead: 18px;
  --fs-h3: 24px;
  --fs-h2-clamp: clamp(28px, 3.4vw, 42px);
  --fs-h1-clamp: clamp(34px, 5vw, 68px);
  --fs-hero-clamp: clamp(34px, 5.2vw, 72px);

  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-tighter: -0.03em;
  --tracking-micro: 0.18em;
  --tracking-mono: 0.08em;

  /* === Spacing === */
  --container-max: 1480px;
  --container-pad-x: 1.5rem;
  --container-pad-x-md: 2.5rem;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* === Layout === */
  --frame-pad: 16px;            /* outer black frame around sections */
  --frame-pad-md: 24px;
  --section-py: 96px;
  --section-py-md: 144px;
  --nav-height: 56px;
  --card-radius: 0;             /* sharp edges = premium aesthetic */
  --button-radius: 0;
  --max-readable: 720px;

  /* === Motion === */
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
  --dur-reveal: 0.9s;
}