/* Vitalosoft Design-Tokens
   Quelle: docs/claude-design-template/Vitalosoft-Design-System/tokens/*.css
   Einzige Quelle für Farben, Typografie, Abstände, Radien, Schatten und Motion. */
:root {
  /* Warme Neutraltöne (Cream) */
  --cream-0: #FFFFFF; --cream-50: #FCFAF7; --cream-100: #F8F3ED; --cream-200: #F1E9E0; --cream-300: #E6DBCF; --cream-400: #CFC1B2;
  /* Ember-Orange – Akzent */
  --ember-50: #FFF5EC; --ember-100: #FFE8D4; --ember-200: #FFCFA8; --ember-300: #FFB275; --ember-400: #FF9A4D; --ember-500: #FF8232; --ember-600: #F26C14; --ember-700: #C9550A; --ember-800: #8F3D08;
  /* Navy – aus dem Logo, Tinte */
  --navy-900: #0E1E3A; --navy-800: #14294D; --navy-700: #1C3A6B; --navy-600: #28508F; --navy-500: #4D6A94; --navy-400: #7D8DA6; --navy-300: #AEB8C7;
  /* Sky – Sekundärfarbe aus dem Logo */
  --sky-600: #1F7FC1; --sky-500: #3A9AD9; --sky-300: #9CCDEE; --sky-100: #E3F2FB;
  /* Semantik */
  --green-600: #1F9D6B; --green-100: #E1F5EC; --red-600: #D64545; --red-100: #FCE7E5; --amber-600: #C98A0B; --amber-100: #FDF2D6;

  /* Semantische Aliase */
  --bg-page: var(--cream-100); --bg-page-alt: var(--cream-50); --surface-card: var(--cream-0); --surface-sunken: var(--cream-200);
  --surface-glass: rgba(255, 255, 255, .58); --surface-glass-strong: rgba(255, 255, 255, .78); --border-glass: rgba(255, 255, 255, .85);
  --surface-inverse: var(--navy-900);
  --text-strong: var(--navy-900); --text-body: #3B465A; --text-muted: #6E7789; --text-subtle: #9AA1AE; --text-on-accent: #FFFFFF; --text-on-inverse: #F8F3ED;
  --accent: var(--ember-500); --accent-hover: var(--ember-600); --accent-press: var(--ember-700); --accent-soft: var(--ember-50); --accent-soft-2: var(--ember-100); --accent-text: var(--ember-700);
  --brand-navy: var(--navy-700); --brand-sky: var(--sky-500);
  --border-subtle: rgba(14, 30, 58, .08); --border-default: rgba(14, 30, 58, .14); --border-strong: rgba(14, 30, 58, .28);
  --focus-ring: 0 0 0 3px rgba(255, 130, 50, .35);
  --success: var(--green-600); --success-soft: var(--green-100); --danger: var(--red-600); --danger-soft: var(--red-100); --warning: var(--amber-600); --warning-soft: var(--amber-100); --info: var(--sky-600); --info-soft: var(--sky-100);

  /* Typografie */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fs-display-xl: 88px; --fs-display: 68px; --fs-h1: 52px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 21px; --fs-lead: 19px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-eyebrow: 11px;
  --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-display: -0.035em; --ls-heading: -0.022em; --ls-body: 0; --ls-eyebrow: 0.18em;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Abstände, Layout, Radien, Schatten, Motion */
  --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; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
  --container-max: 1240px; --container-pad: clamp(20px, 4vw, 48px); --section-y: clamp(72px, 10vw, 128px);
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(60, 40, 20, .06);
  --shadow-sm: 0 2px 8px -2px rgba(60, 40, 20, .08), 0 1px 2px rgba(60, 40, 20, .05);
  --shadow-md: 0 12px 32px -12px rgba(60, 40, 20, .16), 0 2px 6px rgba(60, 40, 20, .05);
  --shadow-lg: 0 30px 70px -24px rgba(60, 40, 20, .24), 0 4px 12px rgba(60, 40, 20, .06);
  --shadow-accent: 0 14px 30px -10px rgba(242, 108, 20, .5);
  --shadow-glass: 0 20px 50px -20px rgba(60, 40, 20, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  --blur-glass: 18px;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-reveal: 900ms;

  /* ── Abweichungen von der Vorlage (WCAG AA, siehe docs/design-system.md) ──
     Nur hier ändern, wenn der Look angepasst werden soll. */
  --text-on-accent: var(--navy-900);          /* Vorlage: #FFF (2,5:1) → Navy auf Orange 6,7:1 */
  --accent-text: #B04A08;                     /* Vorlage: #C9550A (3,7–4,4:1) → ≥ 4,6:1 */
  --accent-text-hover: var(--ember-800);
  --text-muted: #5B6476;                      /* Vorlage: #6E7789 (3,8:1 auf Cream-200) → ≥ 4,9:1 */
  --success: #12724F; --info: #176399; --danger: #B93030; --warning: #8A5C00; /* Text auf *-soft ≥ 5:1 */
  --border-field: rgba(14, 30, 58, .5);       /* Eingabefelder/Checkbox: Rand ≥ 3:1 (WCAG 1.4.11) */
  --focus-outline: var(--ember-600);          /* sichtbarer Tastatur-Fokus */
  --border-on-inverse: rgba(255, 255, 255, .06);
  --text-on-inverse-muted: var(--navy-300);
  --focus-ring-danger: 0 0 0 3px rgba(185, 48, 48, .25);
  --fw-heading: var(--fw-semibold);          /* Vorlage: 500 – auf Wunsch kräftiger (Überschriften wirkten zu schwach) */
  --header-h: 68px; --header-top: 14px;       /* schwebender Header (PROJ-2) */
  --surface-header: rgba(255, 255, 255, .72); --surface-header-solid: rgba(255, 255, 255, .9);
  --border-on-inverse-strong: rgba(255, 255, 255, .12);
  --shadow-ink: rgb(60 40 20);                /* Grundfarbe der warmen Schatten */
  --shadow-accent-soft: 0 8px 20px -10px rgba(242, 108, 20, .45);
}