/* ==========================================================================
   Vorbesichtigt — Design Tokens
   Basis: "Sunlit architectural model" (Samara-Referenz).
   Präzision eines Bauplans + Wärme von Tageslicht.
   ========================================================================== */

:root {
  /* ---------- Farben: Rohwerte ---------- */
  --color-sky-blue: #0096f7;        /* einzige Aktionsfarbe: CTAs, Links, Icons */
  --color-sky-blue-hover: #0083d8;
  --color-signal-orange: #ff4000;   /* dringende CTAs, nur auf dunklem Grund */
  --color-signal-orange-hover: #e63900;
  --color-ink: #000000;             /* Headlines, Fließtext, Labels */
  --color-pure-white: #ffffff;      /* Text auf dunkel/farbig — nie als Flächenfarbe */
  --color-parchment: #fdfdf7;       /* Seitenhintergrund */
  --color-parchment-deep: #f7f7f0;  /* Standard-Karte */
  --color-warm-sand: #f5f2de;       /* hervorgehobene Karte */
  --color-driftwood: #e7e3e1;       /* Sekundär-Buttons */
  --color-ash: #d3d3d3;             /* Deko, disabled */
  --color-stone: #999999;           /* feine Linien, Platzhalter */
  --color-graphite: #666666;        /* Sekundärtext, Metadaten */
  --color-evergreen: #375033;       /* Akzent in Visualisierungen */

  /* ---------- Farben: Rollen ---------- */
  --bg: var(--color-parchment);
  --surface: var(--color-parchment-deep);
  --surface-warm: var(--color-warm-sand);
  --surface-dark: var(--color-ink);
  --text: var(--color-ink);
  --text-muted: var(--color-graphite);
  --text-subtle: var(--color-stone);
  --text-on-dark: var(--color-pure-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.62);
  --border: rgba(0, 0, 0, 0.1);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --tint: rgba(0, 0, 0, 0.04);
  --tint-input: rgba(0, 0, 0, 0.03);
  --action: var(--color-sky-blue);
  --action-hover: var(--color-sky-blue-hover);
  --action-urgent: var(--color-signal-orange);
  --action-urgent-hover: var(--color-signal-orange-hover);
  --focus-ring: 0 0 0 3px rgba(0, 150, 247, 0.35);

  /* ---------- Typografie ---------- */
  /* Siehe TYPOGRAFIE.md — eine Familie macht alles, Mono nur für technische Mikro-Marken. */
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Genau zwei Gewichte. Ein drittes bedeutet: die Hierarchie stimmt nicht. */
  --weight-regular: 400;  /* trägt alles: Fließtext, Navigation, Marken */
  --weight-heading: 700;  /* Überschriften */
  --weight-medium: 700;   /* Buttons – die eine Stelle, die sich klein durchsetzen muss */
  --weight-light: 700;    /* Altname, zeigt weiter auf das Überschriftengewicht */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-features: 'lnum', 'tnum';

  --text-caption-sm: 12px;  --leading-caption-sm: 1.5;  --tracking-caption-sm: -0.04em;
  --text-caption: 14px;     --leading-caption: 1.5;     --tracking-caption: -0.04em;
  --text-body-sm: 16px;     --leading-body-sm: 1.50;    --tracking-body-sm: -0.014em;
  --text-body: 18px;        --leading-body: 1.50;        --tracking-body: -0.01em;
  --text-body-lg: 23px;     --leading-body-lg: 1.35;    --tracking-body-lg: -0.02em;
  --text-subheading: 30px;  --leading-subheading: 1.10; --tracking-subheading: -0.03em;
  --text-heading-sm: 36px;  --leading-heading-sm: 1.05;  --tracking-heading-sm: -0.014em;
  --text-heading: 48px;     --leading-heading: 1.00;       --tracking-heading: -0.027em;
  --text-heading-lg: 60px;  --leading-heading-lg: 0.90; --tracking-heading-lg: -0.041em;
  --text-display: 96px;     --leading-display: 0.82;     --tracking-display: -0.047em;

  /* Fluide Varianten (Mobil → Desktop) */
  --text-display-fluid: clamp(54px, 10vw, 148px);
  --text-heading-lg-fluid: clamp(38px, 5.4vw, 72px);
  --text-heading-fluid: clamp(32px, 4vw, 48px);
  --text-subheading-fluid: clamp(24px, 2.6vw, 30px);
  --text-body-lg-fluid: clamp(19px, 1.8vw, 23px);

  /* ---------- Abstände ---------- */
  --spacing-5: 5px;   --spacing-6: 6px;   --spacing-8: 8px;   --spacing-9: 9px;
  --spacing-10: 10px; --spacing-12: 12px; --spacing-14: 14px; --spacing-15: 15px;
  --spacing-16: 16px; --spacing-18: 18px; --spacing-24: 24px; --spacing-30: 30px;
  --spacing-32: 32px; --spacing-36: 36px; --spacing-42: 42px; --spacing-54: 54px;
  --spacing-72: 72px; --spacing-96: 96px; --spacing-120: 120px;
  --section-gap: clamp(96px, 12vw, 168px);   /* Sektionen trennen durch Luft, nicht Linien */
  --gutter: clamp(16px, 4vw, 40px);
  --page-max-width: 1280px;

  /* ---------- Radien ---------- */
  --radius-sm: 2px;  --radius-md: 6px;  --radius-lg: 9px;
  --radius-xl: 12px; --radius-2xl: 18px; --radius-3xl: 24px;
  --radius-cards: 12px;
  --radius-specialty: 18px;
  --radius-buttons: 12px;
  --radius-inputs: 12px;
  --radius-pills: 24px;

  /* ---------- Schatten (kurz, neutral, nie farbig) ---------- */
  --shadow-subtle: rgba(0, 0, 0, 0.12) 0px 0.5px 2px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.12) 0px 0.5px 1px 0px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.2) 0px 0.5px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px;
  --shadow-md: rgba(0, 0, 0, 0.08) 0px 2px 10px 0px;

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* Reveals: schnell rein, weich aus */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* Zustandswechsel */
  --dur-fast: 0.2s;     /* Hover, Fokus */
  --dur-base: 0.45s;    /* Wechsel von Inhalten */
  --dur-slow: 0.9s;     /* Einblenden von Blöcken */
  --dur-reveal: 1.1s;   /* Wort-für-Wort-Headlines */
  --stagger: 55ms;      /* Versatz pro Wort / Element */
}