/*
 * tokens.css — Design-Tokens für die AGM Scrollpage
 * Quelle: Creative Giants Design System (Refero Styles)
 * "oversized editorial poster on cream paper"
 * Enthält: Schrift-Import, Farb-, Typo-, Spacing- und Form-Variablen + Reset.
 */

/* Switzer — Single-family system (Weight 300 für Display/Headlines, 400 für Body/UI) */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400&display=swap");

:root {
  /* ---- Farben: Neutrale ---- */
  --color-bone-white: #fffef7;   /* Canvas — warmes Off-White, nie reines #ffffff */
  --color-ink-black: #000000;    /* Text, Icons, starker Kontrast */
  --color-graphite: #666666;     /* Sekundärtext, Captions, Meta */
  --color-ash: #aaaaaa;          /* Borders, inaktive Links, Divider */
  --color-charcoal: #4d4c4a;     /* Mid-Neutral, dunkler Gradient-Track */

  /* ---- Farben: Chromatische Akzente (rationiert, nur als Rahmen/Einzelfläche) ---- */
  --color-magenta-bloom: #8a0467;
  --color-forest-teal: #03624c;
  --color-powder-blue: #a5c8eb;
  --color-candy-pink: #ffacea;
  --color-mint-wash: #a5ebd6;
  --color-navy-ink: #101731;     /* einziges dunkles Feld, sparsam als Featured-Block */
  --color-signal-yellow: #ffd001;

  /* ---- Typo: Familie ---- */
  --font-switzer: "Switzer", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Typo: Skala (Minor Third 1.2), fluid via clamp ---- */
  --text-display: clamp(3.25rem, 8vw, 5.25rem);   /* ~52 → 84px */
  --text-heading: clamp(2.25rem, 5vw, 3.375rem);  /* ~36 → 54px */
  --text-heading-sm: clamp(1.75rem, 3.5vw, 2.125rem); /* ~28 → 34px */
  --text-subheading: 1.25rem;  /* 20px */
  --text-body: 1rem;           /* 16px */
  --text-body-sm: 0.875rem;    /* 14px */
  --text-caption: 0.75rem;     /* 12px */

  --leading-tight: 1;
  --leading-snug: 1.25;
  --leading-relaxed: 1.4;

  /* ---- Typo: Tracking (negativ, verschärft mit Größe) ---- */
  --tracking-display: -0.04em;
  --tracking-heading: -0.023em;
  --tracking-heading-sm: -0.02em;
  --tracking-body: -0.018em;

  --weight-light: 300;
  --weight-regular: 400;

  /* ---- Spacing (Base 8px) ---- */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-112: 112px;

  /* ---- Layout ---- */
  --section-gap: clamp(3rem, 8vw, 4rem); /* 48 → 64px */
  --card-padding: 24px;
  --page-pad: clamp(16px, 4vw, 32px);    /* Full-bleed Seitenrand */

  /* ---- Form: Radius (Pill für Interaktiv, scharf für Editorial) ---- */
  --radius-pill: 1440px;
  --radius-card: 0px;
  --radius-image: 0px;

  /* ---- Bewegung ---- */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 0.9s;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bone-white);
  color: var(--color-ink-black);
  font-family: var(--font-switzer);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Tastatur-Fokus sichtbar halten (Akzent statt Browser-Default-Blau) */
:focus-visible {
  outline: 2px solid var(--color-forest-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}