/* BuildFutures design system: primitives -> semantics -> shared component tokens. */
:root {
  /* Color primitives */
  --color-paper-100: #f8f0e5;
  --color-paper-200: #efe5d7;
  --color-paper-300: #e4d7c7;
  --color-charcoal-900: #222222;
  --color-charcoal-700: #4a4037;
  --color-charcoal-500: #756b5e;
  --color-line-warm: #dccfbe;
  --color-copper-500: #c96d3c;
  --color-copper-600: #ad552b;
  --color-olive-500: #888977;
  --color-olive-dark-400: #8b927d;
  --color-amber-500: #c4913a;
  --color-red-500: #a84d3e;
  --color-green-600: #4f7d68;
  --color-night-950: #11100e;
  --color-night-900: #1a1713;
  --color-night-800: #242018;
  --color-night-100: #fcf6ec;
  --color-night-300: #d6ccbd;
  --color-night-500: #9d9283;
  --color-night-line: #302a22;
  --color-copper-dark-400: #dd7d4b;
  --color-copper-dark-300: #ee9465;
  --color-white: #ffffff;
  --color-black: #000000;
  --on-accent: #171411;

  /* Semantic color roles */
  --bg: var(--color-paper-100);
  --bg-2: var(--color-paper-200);
  --bg-3: var(--color-paper-300);
  --ink: var(--color-charcoal-900);
  --ink-2: var(--color-charcoal-700);
  --ink-3: var(--color-charcoal-500);
  --rule: var(--color-line-warm);
  --accent: var(--color-copper-500);
  --accent-soft: rgba(201, 109, 60, 0.13);
  --accent-hover: var(--color-copper-600);
  --success: var(--color-olive-500);
  --success-strong: var(--color-green-600);
  --warning: var(--color-amber-500);
  --danger: var(--color-red-500);
  --glass-bg: rgba(248, 240, 229, 0.62);
  --glass-edge: rgba(125, 95, 66, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.34);
  --glass-reflection: rgba(201, 109, 60, 0.08);
  --glass-shadow: rgba(78, 58, 38, 0.14);
  --body-glow-accent: rgba(201, 109, 60, 0.13);
  --body-glow-muted: rgba(136, 137, 119, 0.10);
  --shadow-float: 0 4px 20px rgba(0, 0, 0, 0.30);
  --shadow-float-hover: 0 6px 28px rgba(0, 0, 0, 0.40);
  --shadow-panel: 0 8px 40px rgba(0, 0, 0, 0.40);
  --shadow-mock: 0 24px 80px rgba(0, 0, 0, 0.26);
  --field-bg: var(--bg-2);
  --field-border: var(--rule);
  --field-hover: color-mix(in oklab, var(--bg-2) 72%, var(--bg));
  --focus-ring: color-mix(in oklab, var(--accent) 22%, transparent);
  --tech-bg: var(--color-night-950);
  --tech-surface: var(--color-night-900);
  --tech-surface-raised: var(--color-night-800);
  --tech-ink: var(--color-night-100);
  --tech-muted: var(--color-night-500);
  --tech-rule: var(--color-night-line);
  --tech-accent: var(--color-copper-dark-400);
  --tech-success: var(--color-olive-dark-400);

  /* Typography */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: "IBM Plex Mono", "SF Mono", "JetBrains Mono", Menlo, monospace;
  --serif: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-label);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-label: 0.9375rem;
  --text-control: 1rem;
  --text-body: 1.125rem;
  --text-lead: 1.22rem;

  /* Spacing and geometry */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 56px;
  --space-13: 64px;
  --space-14: 72px;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-dialog: 12px;
  --radius-pill: 999px;
  --control-height-sm: 40px;
  --control-height: 48px;

  /* Layout and motion */
  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 56px);
  --reading: 62ch;
  --topbar-h: 65px;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-reveal: 600ms;
  --duration-header-reveal: 320ms;
  --duration-wordmark: 8s;
  --duration-wordmark-resolve: 1300ms;
  --duration-wordmark-letter: 760ms;
  --stagger-wordmark-letter: 34ms;
  --ease-standard: ease;

  /* Shared component roles */
  --ds-radius: var(--radius-panel);
  --ds-border: color-mix(in oklab, var(--rule) 82%, transparent);
  --ds-surface: color-mix(in oklab, var(--bg-2) 58%, var(--bg) 42%);
  --ds-surface-soft: color-mix(in oklab, var(--bg-2) 32%, transparent);
  --ds-shadow: 0 18px 42px color-mix(in oklab, var(--glass-shadow) 62%, transparent);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: var(--color-night-950);
  --bg-2: var(--color-night-900);
  --bg-3: var(--color-night-800);
  --ink: var(--color-night-100);
  --ink-2: var(--color-night-300);
  --ink-3: var(--color-night-500);
  --rule: var(--color-night-line);
  --accent: var(--color-copper-dark-400);
  --accent-soft: rgba(221, 125, 75, 0.16);
  --accent-hover: var(--color-copper-dark-300);
  --success: var(--color-olive-dark-400);
  --glass-bg: rgba(17, 16, 14, 0.64);
  --glass-edge: rgba(252, 246, 236, 0.15);
  --glass-highlight: rgba(252, 246, 236, 0.08);
  --glass-reflection: rgba(221, 125, 75, 0.10);
  --glass-shadow: rgba(0, 0, 0, 0.32);
  --body-glow-accent: rgba(221, 125, 75, 0.12);
  --body-glow-muted: rgba(139, 146, 125, 0.08);
  --field-bg: color-mix(in oklab, var(--bg-2) 88%, var(--bg));
  --field-border: color-mix(in oklab, var(--rule) 82%, var(--ink-3));
  --field-hover: color-mix(in oklab, var(--bg-2) 78%, var(--accent-soft));
  color-scheme: dark;
}

@media (max-width: 1120px) {
  :root { --topbar-h: 73px; }
}

@media (max-width: 520px) {
  :root { --topbar-h: 65px; }
}

@media (max-width: 360px) {
  :root { --gutter: 14px; }
}