/* benoufa.de — Design Tokens
   Single source of truth for color, type, spacing.
   Dark mode primary. Light mode variant exposed as .theme-light. */

:root {
  /* ───────── Color: surface (dark = default) ───────── */
  --color-bg:           #0A0A0A;  /* page */
  --color-bg-elev-1:    #111111;  /* card surface */
  --color-bg-elev-2:    #161616;  /* nested card / hover */
  --color-bg-inset:     #050505;  /* code, inset wells */

  /* ───────── Color: text ───────── */
  --color-fg:           #EDEDED;  /* primary text */
  --color-fg-muted:     #8A8A8A;  /* captions, secondary */
  --color-fg-faint:     #5A5A5A;  /* tertiary, disabled */
  --color-fg-on-accent: #FFFFFF;

  /* ───────── Color: border / hairline ───────── */
  --color-border:       #1F1F1F;  /* default */
  --color-border-strong:#2A2A2A;  /* hover, focused card */
  --color-hairline:     #161616;  /* subtle divider */

  /* ───────── Color: accent (Indigo, sparingly) ───────── */
  --color-accent:       #5B5BF5;
  --color-accent-hover: #7575F7;
  --color-accent-press: #4747D9;
  --color-accent-soft:  rgba(91, 91, 245, 0.12);
  --color-accent-ring:  rgba(91, 91, 245, 0.35);

  /* ───────── Color: semantic (subtle, never decorative) ───────── */
  --color-success: #4ADE80;
  --color-warn:    #F5A623;
  --color-error:   #F87171;

  /* ───────── Typography ───────── */
  --font-display: "Geist", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — 1.200 minor third, anchored at 16px */
  --fs-12: 0.75rem;    /* 12 — micro / mono caps */
  --fs-13: 0.8125rem;  /* 13 — caption */
  --fs-14: 0.875rem;   /* 14 — small body, ui */
  --fs-16: 1rem;       /* 16 — body */
  --fs-17: 1.0625rem;  /* 17 — body large */
  --fs-20: 1.25rem;    /* 20 — lead / h4 */
  --fs-24: 1.5rem;     /* 24 — h3 */
  --fs-32: 2rem;       /* 32 — h2 */
  --fs-44: 2.75rem;    /* 44 — h1 */
  --fs-64: 4rem;       /* 64 — hero display */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ───────── Spacing — 4px base ───────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ───────── Radii ───────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ───────── Shadows — restrained, mostly border-based ───────── */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 24px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 0 1px var(--color-accent-ring), 0 8px 32px rgba(91,91,245,0.18);

  /* ───────── Motion ───────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;

  /* ───────── Container ───────── */
  --container-max: 1120px;
  --container-pad: 24px;
}

/* Light-mode variant — for sub-pages (Impressum/Datenschutz) if needed */
.theme-light {
  --color-bg:        #FFFFFF;
  --color-bg-elev-1: #FAFAFA;
  --color-bg-elev-2: #F4F4F4;
  --color-bg-inset:  #F7F7F7;
  --color-fg:        #0A0A0A;
  --color-fg-muted:  #6B6B6B;
  --color-fg-faint:  #A0A0A0;
  --color-border:        #E8E8E8;
  --color-border-strong: #D4D4D4;
  --color-hairline:      #EFEFEF;
}

/* Base reset used across all design-system cards */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* shared card chrome used in every design-system page */
.ds-page {
  min-height: 100vh;
  padding: var(--s-12) var(--s-10);
  max-width: 1200px;
  margin: 0 auto;
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--s-3);
}
.ds-title {
  font-family: var(--font-display);
  font-size: var(--fs-44);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-3) 0;
}
.ds-lede {
  font-size: var(--fs-17);
  color: var(--color-fg-muted);
  max-width: 60ch;
  margin: 0 0 var(--s-12) 0;
}
.ds-section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-fg-faint);
  padding-top: var(--s-8);
  margin-bottom: var(--s-5);
  border-top: 1px solid var(--color-hairline);
}
.ds-section-label:first-of-type { border-top: 0; padding-top: 0; }