/* Ecclium Design-Tokens v1.0, erzeugt aus tokens.json mit src/build_tokens_css.py. Nicht von Hand ändern. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --surface: #F3F3EF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #E8E9E4;
  --line: #C9CBC6;
  --line-strong: #1E2124;
  --control: #7C807D;
  --ink: #1E2124;
  --ink-muted: #5E625F;
  --accent: #A57C2C;
  --accent-text: #7A5A1C;
  --accent-soft: #F1E8D6;
  --action: #1E2124;
  --action-hover: #34393E;
  --on-action: #F3F3EF;
  --focus: var(--accent);
  --success: #1D6B58;
  --success-soft: #E2EFEA;
  --warning: #8A5300;
  --warning-soft: #F8EBD3;
  --danger: #B42318;
  --danger-soft: #F9E4E1;
  --info: #1F5696;
  --info-soft: #E3EBF5;
  --brand-graphit: #1E2124;
  --brand-kalk: #F3F3EF;
  --brand-messing: #A57C2C;
  --brand-messing-hell: #C9A55A;
  --shadow-float: 0 8px 24px #1e21241f;
  --focus-ring: 0 0 0 2px #f3f3ef, 0 0 0 4px #a57c2c;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-icon: 22%;
  --radius-full: 9999px;
  --stroke-hair: 1px;
  --stroke-icon: 1.5px;
  --stroke-wall: 2px;
  --layout-max: 1200px;
  --layout-columns: 12;
  --layout-measure: 68ch;
  --motion-state: 120ms;
  --motion-fade: 200ms;
  --motion-reveal: 400ms;
  --motion-rise: 600ms;
  --motion-draw: 600ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #16181B;
    --surface-raised: #1E2124;
    --surface-sunken: #101214;
    --line: #343A3F;
    --line-strong: #F3F3EF;
    --control: #838886;
    --ink: #F3F3EF;
    --ink-muted: #A9ADAA;
    --accent: #C9A55A;
    --accent-text: #D9B971;
    --accent-soft: #3A3222;
    --action: #F3F3EF;
    --action-hover: #DADBD6;
    --on-action: #1E2124;
    --focus: var(--accent);
    --success: #6CC4A9;
    --success-soft: #16302A;
    --warning: #E3B25A;
    --warning-soft: #372B14;
    --danger: #F2877B;
    --danger-soft: #3D1D1A;
    --info: #86B2E8;
    --info-soft: #172A40;
    --brand-graphit: #1E2124;
    --brand-kalk: #F3F3EF;
    --brand-messing: #A57C2C;
    --brand-messing-hell: #C9A55A;
    --shadow-float: 0 8px 24px #000000b3;
    --focus-ring: 0 0 0 2px #16181b, 0 0 0 4px #c9a55a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #16181B;
  --surface-raised: #1E2124;
  --surface-sunken: #101214;
  --line: #343A3F;
  --line-strong: #F3F3EF;
  --control: #838886;
  --ink: #F3F3EF;
  --ink-muted: #A9ADAA;
  --accent: #C9A55A;
  --accent-text: #D9B971;
  --accent-soft: #3A3222;
  --action: #F3F3EF;
  --action-hover: #DADBD6;
  --on-action: #1E2124;
  --focus: var(--accent);
  --success: #6CC4A9;
  --success-soft: #16302A;
  --warning: #E3B25A;
  --warning-soft: #372B14;
  --danger: #F2877B;
  --danger-soft: #3D1D1A;
  --info: #86B2E8;
  --info-soft: #172A40;
  --brand-graphit: #1E2124;
  --brand-kalk: #F3F3EF;
  --brand-messing: #A57C2C;
  --brand-messing-hell: #C9A55A;
  --shadow-float: 0 8px 24px #000000b3;
  --focus-ring: 0 0 0 2px #16181b, 0 0 0 4px #c9a55a;
}