/* Franz Klassen e.K. – Design-Tokens
   Quelle: Design System „Franz Klassen e.K.". Farben, Schrift, Abstände und
   Radien nur hier ändern; site.css greift ausschließlich auf diese Werte zu. */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben */
  --surface: #ffffff;          /* Seitengrund */
  --surface-raised: #f4f2ee;   /* ruhige Flächen */
  --ink: #141214;              /* Text auf surface */
  --ink-muted: #5c575a;        /* Nebentext auf surface */
  --gold: #ce903a;             /* Markenfarbe: Flächen, Linien, Logo */
  --gold-text: #8a5d14;        /* goldene Schrift auf Weiß */
  --on-gold: #141214;          /* Text auf Gold, immer Schwarz */
  --panel: #141214;            /* schwarze Gegenfläche */
  --panel-raised: #211e22;     /* Karten auf panel */
  --on-panel: #ffffff;         /* Text auf panel */
  --on-panel-muted: #c8c4bf;   /* Nebentext auf panel */
  --hairline: var(--gold);     /* dünne Linien, rein dekorativ */
  --line-soft: #dedad2;        /* Feldrahmen und Trenner auf Weiß */
  --line-panel: #3a363a;       /* Trenner auf Schwarz */
  --field-line: #6b666a;       /* Feldrahmen auf Schwarz */
  --placeholder: #8f8a8d;      /* Platzhaltertext in Feldern */
  --ink-legal: #2f2b2e;        /* Fließtext der Rechtstexte */
  --todo-bg: #fff3c4;          /* Markierung offener Angaben (nur bis zum Livegang) */

  /* Schrift */
  --font-sans: "Outfit", "Avenir Next", "Century Gothic", system-ui, sans-serif;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-section: clamp(64px, 9vw, 104px);
  --divider-h: clamp(44px, 6.5vw, 96px);   /* Höhe der geschwungenen Übergänge */

  /* Radien */
  --radius-none: 0px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* Bewegung: ruhig und kurz, nie verspielt */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .2s;
  --dur-base: .7s;
  --dur-slow: 1.4s;
  --reveal-shift: 24px;
  --stagger: 80ms;

  /* Layout */
  --maxw: 1180px;
  --gutter: 24px;
}