/* Layerborn design tokens — palette "workshop" (kit), light-first. Edit here, not in components. */
:root {
  --color-bg: #EEEDE9;
  --color-surface: #FAFAF8;
  --color-surface2: #E1E0DB;
  --color-border: #C6C4BD;
  --color-text: #1A1C1A;
  --color-muted: #545752;
  --color-accent: #3E5C4A;
  --color-onAccent: #FFFFFF;
  --color-accentText: #3A5645;
  --color-secondary: #FF6A13;
  --color-onSecondary: #1A1C1A;
  --color-success: #2E6E3A;
  --color-warning: #8F5800;
  --color-danger: #B52A1C;
  --color-info: #2E5D82;
  --shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.18);
  --logo-top: #BDB8B3;
  --logo-base: #4A4A4C;
  color-scheme: light;

  /* type */
  --font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.5rem + 6vw, 6rem);

  /* space & shape */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px;
  --max-w: 1200px;
  --gutter: 24px;
  --control-h: 44px;

  /* motion */
  --dur-instant: 80ms; --dur-quick: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-deliberate: 560ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 40ms; --distance-sm: 4px; --distance-md: 12px; --distance-lg: 32px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #141615; --color-surface: #1B1E1C; --color-surface2: #232724; --color-border: #343935;
    --color-text: #E9EAE6; --color-muted: #A0A49F; --color-accent: #7FA38B; --color-onAccent: #141615;
    --color-accentText: #96B8A1; --color-secondary: #FF7A2E; --color-onSecondary: #141615;
    --color-success: #7FCB8B; --color-warning: #FFC72C; --color-danger: #FF6D5C; --color-info: #8DB6DC;
    --shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.5);
    --logo-top: #E9E6E2; --logo-base: #8A8A8E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #141615; --color-surface: #1B1E1C; --color-surface2: #232724; --color-border: #343935;
  --color-text: #E9EAE6; --color-muted: #A0A49F; --color-accent: #7FA38B; --color-onAccent: #141615;
  --color-accentText: #96B8A1; --color-secondary: #FF7A2E; --color-onSecondary: #141615;
  --color-success: #7FCB8B; --color-warning: #FFC72C; --color-danger: #FF6D5C; --color-info: #8DB6DC;
  --shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.5);
  --logo-top: #E9E6E2; --logo-base: #8A8A8E;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-deliberate: 0ms; --stagger: 0ms;
          --distance-sm: 0px; --distance-md: 0px; --distance-lg: 0px; }
}
@media (max-width: 640px) { :root { --gutter: 16px; } }