:root {
  --brand-primary: #1F2A44;
  --brand-accent: #C8A15A;
  --brand-soft: #F4EEE3;
  --bg-app: #F6F4F0;
  --bg-card: #FFFFFF;
  --sidebar-bg: var(--brand-primary);
  --text-main: #1A1A1A;
  --text-muted: #6B7280;
  --border: #ECE8E1;
  --status-new: #3B82F6;
  --status-confirmed: #6366F1;
  --status-awaiting-payment: #F59E0B;
  --status-paid: #10B981;
  --status-in-production: #8B5CF6;
  --status-out-for-delivery: #F97316;
  --status-delivered: #16A34A;
  --status-cancelled: #EF4444;
  --status-on-hold: #6B7280;
  --neutral-white: #FFFFFF;
  --neutral-black: #000000;
  --text-on-brand: var(--neutral-white);
  --text-on-accent: var(--brand-primary);
  --text-on-soft: var(--brand-primary);
  --text-on-app: var(--text-main);
  --text-secondary-on-app: color-mix(in srgb, var(--text-muted) 92%, var(--text-main));
  --field-border: color-mix(in srgb, var(--text-muted) 78%, var(--bg-card));
  --focus-ring: var(--brand-primary);
  --danger: color-mix(in srgb, var(--status-cancelled) 70%, var(--neutral-black));
  --success: color-mix(in srgb, var(--status-delivered) 68%, var(--neutral-black));
  --shadow-colour: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  --shadow-card: 0 4px 24px var(--shadow-colour), 0 1px 3px var(--shadow-colour);
  --radius-card: 22px;
  --radius-control: 12px;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --sidebar-width: 240px;
  --motion-fast: 150ms;
  --swatch-checker: repeating-conic-gradient(var(--bg-card) 0% 25%, var(--border) 0% 50%) 50% / 8px 8px;
}

:root[data-mode='dark'] {
  color-scheme: dark;
  --bg-app: color-mix(in srgb, var(--brand-primary) 65%, var(--neutral-black));
  --bg-card: color-mix(in srgb, var(--brand-primary) 85%, var(--neutral-black));
  --text-main: color-mix(in srgb, var(--brand-soft) 15%, var(--neutral-white));
  --text-muted: color-mix(in srgb, var(--text-main) 75%, var(--bg-card));
  --border: color-mix(in srgb, var(--text-main) 22%, var(--bg-card));
  --text-secondary-on-app: var(--text-muted);
  --field-border: color-mix(in srgb, var(--text-main) 50%, var(--bg-card));
  --focus-ring: var(--brand-accent);
  --danger: color-mix(in srgb, var(--status-cancelled) 60%, var(--neutral-white));
  --success: color-mix(in srgb, var(--status-delivered) 65%, var(--neutral-white));
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; }
}