/* chiliholz.de Designsystem. GENERIERT aus tokens.json, nicht von Hand bearbeiten.
   Neu erzeugen: node build-tokens.mjs */

/* 1. Primitive: Rohwerte */
:root {
  --color-sand-50: #FAF5EC;
  --color-sand-100: #F1E7D6;
  --color-sand-200: #E6D6BC;
  --color-sand-300: #D5BE9B;
  --color-sand-400: #BC9F79;
  --color-sand-500: #9E805C;
  --color-saddle-500: #7A5440;
  --color-saddle-600: #664434;
  --color-saddle-700: #53362A;
  --color-saddle-800: #432B21;
  --color-saddle-900: #33211A;
  --color-terracotta-50: #FBEEE8;
  --color-terracotta-100: #F4D9CD;
  --color-terracotta-200: #E8B8A4;
  --color-terracotta-300: #DA9A80;
  --color-terracotta-400: #C87F64;
  --color-terracotta-500: #B0674D;
  --color-terracotta-600: #9A5540;
  --color-terracotta-700: #7C4333;
  --color-terracotta-800: #5E3326;
  --color-chili-50: #FBECE8;
  --color-chili-100: #F5D3CB;
  --color-chili-300: #E08A74;
  --color-chili-400: #C4553F;
  --color-chili-500: #AE4331;
  --color-chili-600: #963626;
  --color-chili-700: #7A2B1F;
  --color-chili-800: #5C2017;
  --color-chili-900: #3E150F;
  --color-sage-100: #E3E7DC;
  --color-sage-300: #AEB9A4;
  --color-sage-500: #7F8E74;
  --color-sage-600: #65735B;
  --color-sage-700: #4E5A46;
  --color-turquoise-300: #8CC2BC;
  --color-turquoise-500: #4E9690;
  --color-turquoise-700: #2F6A66;
  --color-ochre-300: #E3B96A;
  --color-ochre-600: #8C5E14;
  --color-night-100: #DEDBD6;
  --color-night-200: #BDB8B1;
  --color-night-300: #9A948C;
  --color-night-500: #5C5751;
  --color-night-700: #3B3733;
  --color-night-800: #2E2B28;
  --color-night-900: #242120;
  --color-night-950: #191716;
  --color-material-ahorn: #EAD7B3;
  --color-material-buche: #D9B48A;
  --color-material-eiche: #C49A62;
  --color-material-walnuss: #5E3B22;
  --color-material-schiefer: #2E333A;
  --color-material-gravur-holz: #2A170B;
  --color-material-gravur-schiefer: #D5D9DE;
  --font-family-display: 'Rye', 'Rockwell Extra Bold', 'Rockwell', Georgia, serif;
  --font-family-script: 'Kaushan Script', 'Segoe Script', 'Brush Script MT', cursive;
  --font-family-label: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
  --font-family-body: 'Libre Caslon Text', 'Big Caslon', 'Book Antiqua', Georgia, serif;
  --font-family-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  --font-size-3xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --font-size-4xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --font-size-display: clamp(3.25rem, 1.6rem + 7vw, 7.5rem);
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-leading-tight: 0.95;
  --font-leading-snug: 1.2;
  --font-leading-normal: 1.6;
  --font-leading-relaxed: 1.75;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.12em;
  --font-tracking-caps: 0.2em;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-round: 999px;
  --border-hair: 1px;
  --border-base: 1.5px;
  --border-strong: 2px;
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
  --easing-soft: cubic-bezier(0.22, 0.8, 0.3, 1);
  --easing-press: cubic-bezier(0.3, 0, 0.5, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 400;
  --z-toast: 500;
}

/* 2a. Semantik Holz (Standard, hell) */
:root,
[data-theme="holz"] {
  color-scheme: light;
  --color-bg: var(--color-sand-100);
  --color-bg-raised: var(--color-sand-50);
  --color-bg-sunken: var(--color-sand-200);
  --color-bg-inverse: var(--color-saddle-900);
  --color-fg: var(--color-saddle-900);
  --color-fg-muted: var(--color-saddle-700);
  --color-fg-subtle: var(--color-saddle-500);
  --color-fg-inverse: var(--color-sand-100);
  --color-border: var(--color-sand-300);
  --color-border-strong: var(--color-saddle-800);
  --color-outline: var(--color-saddle-800);
  --color-shadow: var(--color-saddle-900);
  --color-accent: var(--color-chili-600);
  --color-accent-hover: var(--color-chili-700);
  --color-accent-active: var(--color-chili-800);
  --color-on-accent: var(--color-sand-50);
  --color-accent-text: var(--color-chili-600);
  --color-accent-soft: var(--color-terracotta-50);
  --color-script: var(--color-terracotta-500);
  --color-ornament: var(--color-terracotta-500);
  --color-badge: var(--color-terracotta-600);
  --color-on-badge: var(--color-sand-50);
  --color-tape: var(--color-sand-300);
  --color-focus: var(--color-turquoise-700);
  --color-hatch: var(--color-sand-300);
  --color-vignette: var(--color-saddle-500);
  --color-success: var(--color-sage-700);
  --color-warning: var(--color-ochre-600);
  --color-danger: var(--color-chili-700);
  --color-selection: var(--color-terracotta-100);
  --texture-surface: radial-gradient(ellipse 80% 60% at 25% 0%, rgb(255 251 242 / 0.55), transparent 70%), radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--color-vignette) 18%, transparent) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.27 0 0 0 0 0.16 0 0 0 0.5 -0.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* 2b. Semantik Schiefer (dunkel) */
[data-theme="schiefer"] {
  color-scheme: dark;
  --color-bg: var(--color-night-900);
  --color-bg-raised: var(--color-night-800);
  --color-bg-sunken: var(--color-night-950);
  --color-bg-inverse: var(--color-sand-100);
  --color-fg: var(--color-sand-100);
  --color-fg-muted: var(--color-sand-300);
  --color-fg-subtle: var(--color-night-300);
  --color-fg-inverse: var(--color-saddle-900);
  --color-border: var(--color-night-700);
  --color-border-strong: var(--color-sand-200);
  --color-outline: var(--color-sand-200);
  --color-shadow: var(--color-night-950);
  --color-accent: var(--color-chili-500);
  --color-accent-hover: var(--color-chili-600);
  --color-accent-active: var(--color-chili-700);
  --color-on-accent: var(--color-sand-50);
  --color-accent-text: var(--color-terracotta-300);
  --color-accent-soft: var(--color-night-800);
  --color-script: var(--color-terracotta-300);
  --color-ornament: var(--color-terracotta-300);
  --color-badge: var(--color-terracotta-700);
  --color-on-badge: var(--color-sand-50);
  --color-tape: var(--color-sand-400);
  --color-focus: var(--color-turquoise-300);
  --color-hatch: var(--color-night-700);
  --color-vignette: var(--color-night-950);
  --color-success: var(--color-sage-300);
  --color-warning: var(--color-ochre-300);
  --color-danger: var(--color-chili-300);
  --color-selection: var(--color-terracotta-800);
  --texture-surface: radial-gradient(ellipse 70% 50% at 80% 0%, rgb(240 230 210 / 0.06), transparent 70%), radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--color-vignette) 45%, transparent) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.8 0 0 0 0.55 -0.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}

/* Schiefer folgt dem Dark Mode des Systems, solange nicht ausdrücklich Holz gesetzt ist. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="holz"]) {
    color-scheme: dark;
    --color-bg: var(--color-night-900);
    --color-bg-raised: var(--color-night-800);
    --color-bg-sunken: var(--color-night-950);
    --color-bg-inverse: var(--color-sand-100);
    --color-fg: var(--color-sand-100);
    --color-fg-muted: var(--color-sand-300);
    --color-fg-subtle: var(--color-night-300);
    --color-fg-inverse: var(--color-saddle-900);
    --color-border: var(--color-night-700);
    --color-border-strong: var(--color-sand-200);
    --color-outline: var(--color-sand-200);
    --color-shadow: var(--color-night-950);
    --color-accent: var(--color-chili-500);
    --color-accent-hover: var(--color-chili-600);
    --color-accent-active: var(--color-chili-700);
    --color-on-accent: var(--color-sand-50);
    --color-accent-text: var(--color-terracotta-300);
    --color-accent-soft: var(--color-night-800);
    --color-script: var(--color-terracotta-300);
    --color-ornament: var(--color-terracotta-300);
    --color-badge: var(--color-terracotta-700);
    --color-on-badge: var(--color-sand-50);
    --color-tape: var(--color-sand-400);
    --color-focus: var(--color-turquoise-300);
    --color-hatch: var(--color-night-700);
    --color-vignette: var(--color-night-950);
    --color-success: var(--color-sage-300);
    --color-warning: var(--color-ochre-300);
    --color-danger: var(--color-chili-300);
    --color-selection: var(--color-terracotta-800);
    --texture-surface: radial-gradient(ellipse 70% 50% at 80% 0%, rgb(240 230 210 / 0.06), transparent 70%), radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--color-vignette) 45%, transparent) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.8 0 0 0 0.55 -0.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  }
}

/* 2c. Geteilte Rollen + 3. Komponenten. Stehen auf jedem Themen-Container,
   damit var()-Verweise dort neu aufgelöst werden (Holz-Band in Schiefer-Seite usw.). */
:root,
[data-theme] {
  --font-display: var(--font-family-display);
  --font-script: var(--font-family-script);
  --font-label: var(--font-family-label);
  --font-body: var(--font-family-body);
  --font-mono: var(--font-family-mono);
  --text-display: var(--font-size-display);
  --text-h1: var(--font-size-4xl);
  --text-h2: var(--font-size-3xl);
  --text-h3: var(--font-size-2xl);
  --text-h4: var(--font-size-xl);
  --text-lead: var(--font-size-lg);
  --text-body: var(--font-size-base);
  --text-small: var(--font-size-sm);
  --text-micro: var(--font-size-xs);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 3px 8px -3px color-mix(in srgb, var(--color-shadow) 22%, transparent);
  --shadow-md: 0 2px 4px color-mix(in srgb, var(--color-shadow) 12%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--color-shadow) 45%, transparent);
  --shadow-lg: 0 4px 8px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 26px 50px -20px color-mix(in srgb, var(--color-shadow) 55%, transparent);
  --texture-hatch: repeating-linear-gradient(-45deg, var(--color-hatch) 0 1px, transparent 1px 7px);
  --texture-torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 18)' d='M0 18V7l6 3 5-5 7 4 6-3 4 5 8-6 5 3 7-4 4 6 6-2 5 4 7-7 6 5 5-2 8 5 4-6 7 3 5-4 6 6 5-3 8 4 4-5 6 2 7-5 5 6 6-3 4 4 8-6 5 5 6-4 5 3 7-2 4 5 6-6 7 4 5-3 6 5 5-4 8 3 4-5 6 6 7-4 V18z'/%3E%3C/svg%3E");
  --texture-torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V7l6 3 5-5 7 4 6-3 4 5 8-6 5 3 7-4 4 6 6-2 5 4 7-7 6 5 5-2 8 5 4-6 7 3 5-4 6 6 5-3 8 4 4-5 6 2 7-5 5 6 6-3 4 4 8-6 5 5 6-4 5 3 7-2 4 5 6-6 7 4 5-3 6 5 5-4 8 3 4-5 6 6 7-4 V18z'/%3E%3C/svg%3E");
  --layout-container: 76rem;
  --layout-prose: 40rem;
  --layout-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --layout-section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --motion-hover: var(--duration-base) var(--easing-soft);
  --motion-press: var(--duration-fast) var(--easing-press);
  --button-font: var(--font-label);
  --button-tracking: var(--font-tracking-wide);
  --button-radius: var(--radius-sm);
  --button-bg: var(--color-accent);
  --button-bg-hover: var(--color-accent-hover);
  --button-bg-active: var(--color-accent-active);
  --button-fg: var(--color-on-accent);
  --button-border: var(--color-accent);
  --button-shadow: var(--shadow-sm);
  --button-shadow-hover: var(--shadow-md);
  --button-height-sm: 2.5rem;
  --button-height-md: 3rem;
  --button-height-lg: 3.625rem;
  --button-pad-sm: var(--space-4);
  --button-pad-md: var(--space-6);
  --button-pad-lg: var(--space-8);
  --input-height: 3rem;
  --input-pad-x: var(--space-4);
  --input-radius: var(--radius-sm);
  --input-bg: var(--color-bg-raised);
  --input-fg: var(--color-fg);
  --input-border: var(--color-fg-subtle);
  --input-border-width: var(--border-hair);
  --input-placeholder: var(--color-fg-subtle);
  --input-border-focus: var(--color-focus);
  --input-border-error: var(--color-danger);
  --card-bg: var(--color-bg-raised);
  --card-radius: var(--radius-xs);
  --card-pad: var(--space-5);
  --card-frame: var(--space-3);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --tag-font: var(--font-label);
  --tag-bg: var(--color-bg-raised);
  --tag-fg: var(--color-fg);
  --tag-radius: var(--radius-sm);
  --nav-height: 4.75rem;
  --nav-bg: var(--color-bg);
  --badge-size: 9rem;
  --badge-bg: var(--color-badge);
  --badge-fg: var(--color-on-badge);
}