/* ══════════════════════════════════════════════
   HANK! — Design Tokens
   Corporate Design System
   ══════════════════════════════════════════════ */

:root {

  /* ── Colors: Ink (Dark) ────────────────────── */
  --ink:          #0A0A08;
  --ink-mid:      #141412;
  --ink-soft:     #1E1E1A;
  --ink-muted:    #2A2A26;

  /* ── Colors: Paper (Light) ─────────────────── */
  --paper:        #E8E4DC;
  --paper-warm:   #D4CFC5;
  --paper-cool:   #F5F2ED;

  /* ── Colors: Accent (Terrakotta) ───────────── */
  --accent:       #D06030;
  --accent-light: #E07A4D;
  --accent-dark:  #1A1210;
  --accent-glow:  rgba(196, 87, 42, 0.12);

  /* ── Colors: Muted ─────────────────────────── */
  --muted:        #908A7F;
  --muted-light:  #A8A398;
  --muted-lighter:#C0BCB2;

  /* ── Colors: Semantic ──────────────────────── */
  --success:      #3D6555;
  --error:        #C4572A;
  --warning:      #B8923A;

  /* ── Colors: Dividers ──────────────────────── */
  --divider-dark:  rgba(255, 255, 255, 0.06);
  --divider-light: rgba(10, 10, 8, 0.08);

  /* ── Typography: Families ──────────────────── */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Typography: Scale (5 Stufen) ──────────── */
  --text-sm:   0.875rem;                        /* 14px — Meta, Labels, Eyebrows, Nav, Footer */
  --text-base: 1.125rem;                        /* 18px — Body, Buttons, Inputs */
  --text-lg:   clamp(1.75rem, 3.5vw, 2.75rem); /* 28–44px — Section Headings H2/H3 */
  --text-xl:   clamp(2.5rem, 5.5vw, 4.5rem);   /* 40–72px — Stat Numbers, Subheads */
  --text-2xl:  clamp(3.5rem, 9vw, 8.5rem);     /* 56–136px — Hero Title, Statements */

  /* ── Typography: Marquee ─────────────────────
     Kein eigener Token — Marquee nutzt --text-lg.
     Wenn visuell groesser noetig: inline clamp().
     ─────────────────────────────────────────── */

  /* ── Typography: Weights ───────────────────── */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ── Typography: Line Heights ──────────────── */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.7;
  --leading-relaxed:  1.85;

  /* ── Typography: Letter Spacing ────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.2em;
  --tracking-wider:   0.3em;

  /* ── Spacing (8px Grid) ────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ────────────────────────────────── */
  --max-width: 1200px;
  --max-text:  680px;
  --max-wide:  960px;
  --pad:       clamp(1.5rem, 5vw, 6rem);

  /* ── Effects: Transitions ──────────────────── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ── Effects: Shadows ──────────────────────── */
  --shadow-subtle:   0 1px 2px rgba(10, 10, 8, 0.08);
  --shadow-elevated: 0 8px 32px rgba(10, 10, 8, 0.12);
  --shadow-floating: 0 16px 64px rgba(10, 10, 8, 0.16);

  /* ── Effects: Border Radius ────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
}