/* Design-Tokens — übernommen aus dem Threesides-Kit (Farben, Typografie,
   Abstände, Radien/Schatten, Bewegungswerte). Zentral hier pflegen, damit
   Portal und späterer Lead-Funnel dieselbe Optik teilen. */

/* Geist (SIL Open Font License 1.1, Lizenztext: assets/fonts/OFL.txt), selbst gehostet statt von Google.
   Variable Schrift: eine Datei deckt die Schnitte 400 und 500 ab. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-core: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Primärpalette */
  --white: #FFFFFF;
  --matte-black: #171717;
  --blue-bright: #085CF0;
  --blue-dark: #062677;
  --blue-baby: #B0E9FE;
  --wine: #462738;

  /* Graustufen — bewusst mit leichtem Blaustich, nie neutrales Grau */
  --graphite: #6E7180;
  --space: #9DA2B3;
  --steel: #BCBFCC;
  --smoke: #D3D6E0;
  --cloud: #EDEFF7;

  --gradient-action: linear-gradient(135deg, #462738 0%, #171717 100%);
  --gradient-action-hover: linear-gradient(135deg, #5A3247 0%, #242424 100%);
  --gradient-action-active: linear-gradient(135deg, #3A2030 0%, #0F0F0F 100%);

  --success: #0F7A52;
  --success-bg: #E8F4EF;
  --warning: #9A6510;
  --warning-bg: #FAF2E7;
  --danger: #B7291F;
  --danger-bg: #FAEBEA;
  --info: var(--blue-bright);
  --info-bg: #EDF3FE;

  --ink: var(--matte-black);
  --text-primary: var(--matte-black);
  --text-secondary: var(--graphite);
  --text-muted: var(--space);
  --text-disabled: var(--steel);
  --text-link: var(--blue-bright);
  --text-link-hover: var(--blue-dark);

  --surface-page: var(--white);
  --surface-sunken: var(--cloud);

  --line-subtle: var(--cloud);
  --line: var(--smoke);
  --line-strong: var(--matte-black);

  --n-025: #F7F8FC;

  --focus-ring: 0 0 0 3px rgba(8, 92, 240, .24);

  /* Typografie — Produktskala (dichter als die Marken-Postergrößen) */
  --fs-h1: 40px;  --lh-h1: 1.10; --ls-h1: -0.03em;
  --fs-h2: 32px;  --lh-h2: 1.15; --ls-h2: -0.03em;
  --fs-h3: 24px;  --lh-h3: 1.25; --ls-h3: -0.03em;
  --fs-h4: 20px;  --lh-h4: 1.30; --ls-h4: -0.03em;
  --fs-body-lg: 18px; --lh-body-lg: 1.60; --ls-body: -0.02em;
  --fs-body: 16px;    --lh-body: 1.60;
  --fs-body-sm: 14px; --lh-body-sm: 1.55;
  --fs-caption: 13px; --lh-caption: 1.45;
  --fs-label: 12px;   --lh-label: 1.20; --ls-label: 0.08em;

  /* Abstände */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --container-narrow: 560px;

  /* Radien/Schatten — Ecken sind eckig, außer Status-Punkte/Avatare */
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(23, 23, 23, .05);
  --shadow-2: 0 8px 24px -8px rgba(23, 23, 23, .10);
  --shadow-3: 0 24px 64px -16px rgba(23, 23, 23, .16);

  /* Bewegung */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}