/* Design-Tokens: RaumDesign Rudek, Welt „Marmorierte Seide“. Quelle: DESIGN.md (wird am Ende aus dem Bau dokumentiert). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farbe: kaltes Papierweiß, Tinte, Blaugrau; Orange ist das Seidenfutter und das einzige Signal */
  --c-ground: #F1F3F4;
  --c-ground-2: #E7EAEC;
  --c-ground-3: #DADFE3;
  --c-ink: #14181F;
  --c-ink-2: #38414C;
  --c-muted: #566170;
  --c-slate: #4C5C6E;
  --c-line: #C4CBD1;
  --c-signal: #E36B0A;
  --c-signal-hover: #F07C1E;
  --c-on-signal: #14181F;
  --c-on-ink: #F1F3F4;
  --c-on-ink-2: #B7C0C9;
  --c-action: #2F4A63;
  --c-action-hover: #3D5E7D;
  --c-on-action: #F1F3F4;
  --c-focus: #14181F;
  --c-error: #A5281B;
  --c-success: #1F6B45;

  /* Schrift: eine Grotesk mit Haltung für Überschriften, eine freundliche für den Text */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-text: "Figtree", "Segoe UI", system-ui, sans-serif;

  --fs-hero: clamp(2.5rem, 1.1rem + 3.5vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2vw, 3rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-caption: 0.875rem;
  --fs-btn: 1.0625rem;

  /* Raum (4-pt-Skala) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 4.4rem + 4vw, 128px);
  --container: 1280px;
  --measure: 62ch;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 72px;
  --tap: 48px;

  /* Form und Tiefe */
  --radius: 4px;
  --radius-lg: 10px;
  --sh-soft: 0 12px 30px -12px rgba(20, 24, 31, .28);
  --sh-fold: 0 18px 40px -18px rgba(20, 24, 31, .35);

  /* Bewegung */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t-mid: 280ms;
}
@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}