/* Design-Tokens Webwerkstatt Stocker
   Quelle: Claude-Design-Projekt (Design-System.dc.html, Startseite.dc.html, Admin.dc.html), Stand 10.11.2026.
   Gemeinsame Grundlage für website/, plattform/ und baukasten/. Werte nur hier ändern und dann übernehmen.
   Text in Akzentfarbe immer mit --accent-ink, Flächen mit --accent. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url('fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url('fonts/instrument-sans-latin-standard-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url('fonts/instrument-sans-latin-standard-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* Farben hell */
  --bg: #F3F2EE;
  --bg-2: #E9E7E0;
  --surface: #FFFFFF;
  --ink: #0E0E10;
  --ink-2: #4A4A52;
  --line: #D6D4CC;
  --field: #8A877F;
  --accent: #FF4F1A;
  --accent-ink: #B8320A;
  --on-accent: #0E0E10;
  --lake: #5B45D6;
  --lake-bg: #ECE7FF;
  --sun: #D4FF3F;
  --lilac: #CDBEFF;
  --ok: #1C6B3A;
  --ok-bg: #E2F1E6;
  --err: #B3261E;
  --err-bg: #FBE7E5;
  --warn-bg: #FFF1DA;
  --focus: #2F5BEA;

  /* Schriften */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-text: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Schriftgrössen (fliessend) */
  --fs-display: clamp(44px, 7vw, 100px);
  --fs-h2: clamp(34px, 4.5vw, 60px);
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-lead: clamp(17px, 1.6vw, 22px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-kicker: 13px;
  --lh-body: 1.6;
  --track-display: -0.045em;
  --track-h2: -0.035em;
  --track-h3: -0.02em;
  --track-kicker: 0.12em;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 10vw, 128px);

  /* Radien */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Schatten */
  --shadow-card: 0 18px 40px -24px rgba(20, 18, 30, .35);
  --shadow-hover: 0 24px 48px -28px rgba(20, 18, 30, .4);

  /* Bedienelemente */
  --control-h: 52px;

  color-scheme: light;
}

/* Dunkel: Systemeinstellung, ausser ausdrücklich hell gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E10;
    --bg-2: #17171A;
    --surface: #1F1F23;
    --ink: #F3F2EE;
    --ink-2: #B4B2AB;
    --line: #2E2E33;
    --field: #77757F;
    --accent: #FF5A26;
    --accent-ink: #FF8A5C;
    --on-accent: #0E0E10;
    --lake: #B6A6FF;
    --lake-bg: #262046;
    --lilac: #B6A6FF;
    --ok: #5BD08A;
    --ok-bg: #16301F;
    --err: #FF8A80;
    --err-bg: #3A1D1B;
    --warn-bg: #33270F;
    --focus: #8FB0FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E10;
  --bg-2: #17171A;
  --surface: #1F1F23;
  --ink: #F3F2EE;
  --ink-2: #B4B2AB;
  --line: #2E2E33;
  --field: #77757F;
  --accent: #FF5A26;
  --accent-ink: #FF8A5C;
  --on-accent: #0E0E10;
  --lake: #B6A6FF;
  --lake-bg: #262046;
  --lilac: #B6A6FF;
  --ok: #5BD08A;
  --ok-bg: #16301F;
  --err: #FF8A80;
  --err-bg: #3A1D1B;
  --warn-bg: #33270F;
  --focus: #8FB0FF;
  color-scheme: dark;
}
/* Hinweis: --ok-bg, --err-bg, --warn-bg im Dunkelmodus sind im Design nicht definiert
   und hier ergänzt (Kontrast mit --ok/--err gegen AA prüfen). Kampagnenwerk nutzt --sun mit #111. */