/* ==========================================================================
   Studio Ory — Design Tokens
   Typo/Layout: DESIGN.md / tokens.json (Motto®-Stilreferenz)
   Auren-Farben: alter Ory-Entwurf (ausschließlich für Hintergrund-Gradients)
   ========================================================================== */

:root {
  /* Auren — Pastelltöne, NUR als Hintergrund-Atmosphäre, nie für UI/Text */
  --aura-rosa: 245, 175, 210;
  --aura-flieder: 199, 178, 240;
  --aura-mint: 183, 228, 199;
  --aura-pfirsich: 250, 200, 160;
  --aura-himmel: 185, 216, 242;

  /* Colors — UI bleibt monochrom, keine chromatischen Akzente */
  --color-ink: #000000;          /* Primärtext, Headlines, Wortmarke, Borders */
  --color-soft-carbon: #1b1b1c;  /* Sekundär-Neutral, CTA-Fill, dunkle Flächen */
  --color-bone-paper: #ffffff;   /* Card-Flächen, Text auf dunklen Fills */
  --color-parchment: #f2f2f2;    /* Seiten-Canvas, Default-Hintergrund */
  --color-ash-rule: #d8d8d8;     /* Haarlinien-Trenner, Avatar-Fill */
  --color-slate: #717476;        /* Sekundärer Fließtext, Muted */
  --color-graphite: #4d5153;     /* Fließtext auf invertierten Flächen */
  --color-smoke: #848484;        /* Deaktivierte Nav-Items, Scroll-Cues */
  --color-fog-border: #c8cacd;   /* Input-Borders */
  --color-pewter: #666666;       /* Tertiärtext, Fußnoten */

  /* Typography — Font Families (Substitute laut Design-Datei) */
  --font-disp: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.4;
  --text-body: 17px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.6;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --text-heading-sm: 25px;
  --leading-heading-sm: 1.3;
  --text-heading: 34px;
  --leading-heading: 1.26;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.14;

  /* Display — responsiv via clamp; Desktop-Zielwerte 61/99/154px */
  --text-display-sm: clamp(40px, 7vw, 61px);
  --leading-display-sm: 1.1;
  --text-display: clamp(48px, 9vw, 99px);
  --leading-display: 1.05;
  --text-display-lg: clamp(52px, 11.5vw, 154px);
  --leading-display-lg: 1;

  /* Typography — Weight: das gesamte System läuft auf 500 */
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-21: 21px;
  --spacing-23: 23px;
  --spacing-24: 24px;
  --spacing-29: 29px;
  --spacing-38: 38px;
  --spacing-48: 48px;
  --spacing-58: 58px;
  --spacing-67: 67px;
  --spacing-70: 70px;
  --spacing-77: 77px;
  --spacing-96: 96px;
  --spacing-158: 158px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 77px;
  --card-padding: 29px;
  --element-gap: 19px;

  /* Radius — genau ein Radius für Interaktives, Karten bleiben eckig */
  --radius-pill: 9999px;
  --radius-card: 0px;
  --radius-input: 0px;
}