/* Fabrik design tokens — Scandinavian atelier */
:root {
  /* Neutrals */
  --bg: #eef1ef;
  --bg-tint: #e4e9e6;
  --surface: #ffffff;
  --surface-2: #f7f9f8;
  --surface-3: #eef3f1;
  --text: #14201c;
  --text-2: #3d4f48;
  --text-3: #6b7c74;
  --border: #d5ddd8;
  --border-strong: #b8c4bd;

  /* Accent — pine teal */
  --accent: #0f6b5c;
  --accent-hover: #0b5448;
  --accent-soft: #d8efe9;
  --accent-ink: #08443a;

  /* Semantic */
  --success: #1f7a4c;
  --success-soft: #ddf3e7;
  --warning: #9a6700;
  --warning-soft: #fff3d6;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --info: #175cd3;
  --info-soft: #e8f1fc;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(20, 32, 28, 0.05), 0 1px 3px rgba(20, 32, 28, 0.04);
  --shadow-2: 0 4px 16px rgba(20, 32, 28, 0.08), 0 1px 3px rgba(20, 32, 28, 0.04);

  /* Radius & space */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type */
  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Georgia", serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh-tight: 1.2;
  --lh-body: 1.55;

  /* Shell */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 68px;
  --header-h: 56px;
  --focus: 0 0 0 3px var(--accent-soft);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
}

[data-theme="nocturne"] {
  --bg: #121816;
  --bg-tint: #1a221e;
  --surface: #1c2622;
  --surface-2: #24302b;
  --surface-3: #2c3a34;
  --text: #e8efeb;
  --text-2: #b7c5be;
  --text-3: #84948c;
  --border: #334039;
  --border-strong: #45564d;
  --accent: #3dbaa6;
  --accent-hover: #5ccdbb;
  --accent-soft: #1a3d36;
  --accent-ink: #a8ebe0;
  --success: #3dba7a;
  --success-soft: #1a3328;
  --warning: #e0b44a;
  --warning-soft: #3a3014;
  --danger: #f07066;
  --danger-soft: #3a1c1a;
  --info: #6ba3f5;
  --info-soft: #1a2a40;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="graphite"] {
  --bg: #090a0c;
  --bg-tint: #121419;
  --surface: #17191e;
  --surface-2: #20232a;
  --surface-3: #2a2e36;
  --text: #f2f3f5;
  --text-2: #c7cbd2;
  --text-3: #9299a3;
  --border: #343943;
  --border-strong: #4b515d;
  --accent: #b9c0ca;
  --accent-hover: #d7dbe1;
  --accent-soft: #30343c;
  --accent-ink: #f4f5f7;
  --success: #74c69d;
  --success-soft: #1d3529;
  --warning: #d6b36a;
  --warning-soft: #382f1d;
  --danger: #f08c86;
  --danger-soft: #3a2021;
  --info: #91a7c7;
  --info-soft: #252e3c;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}