:root {
  /* Brand Trapani CP */
  --brand-yellow: #FAE100;
  --brand-yellow-hover: #e5cc00;
  --brand-yellow-subtle: rgba(250, 225, 0, 0.14);
  --brand-dark: #2C2A29;
  --brand-dark-2: #3d3b39;
  --brand-dark-3: #524f4d;
  --brand-cream: #F5F4F0;
  --brand-cream-2: #eceae4;
  --brand-white: #ffffff;

  /* Semantic — Light */
  --bg-base: var(--brand-cream);
  --bg-surface: var(--brand-white);
  --bg-surface-hover: #f3f1ec;
  --bg-elevated: var(--brand-white);
  --bg-sidebar: var(--brand-dark);
  --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
  --bg-sidebar-active: var(--brand-yellow);
  --bg-input: var(--brand-white);

  --border-subtle: #ddd9cf;
  --border-default: #c4bfb3;
  --border-strong: #8a857c;

  --text-primary: var(--brand-dark);
  --text-secondary: #524f4d;
  --text-tertiary: #736e66;
  --text-inverse: var(--brand-white);
  --text-on-yellow: var(--brand-dark);

  --accent: var(--brand-yellow);
  --accent-hover: var(--brand-yellow-hover);
  --accent-subtle: var(--brand-yellow-subtle);

  --success: #15803d;
  --success-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;

  /* Chart palette */
  --chart-1: #FAE100;
  --chart-2: #15803d;
  --chart-3: #c2410c;
  --chart-4: #0e7490;
  --chart-5: #6d28d9;
  --chart-6: #a16207;
  --chart-bar-primary: #3d3b39;
  --chart-bar-muted: #8a857c;
  --chart-grid: rgba(44, 42, 41, 0.1);
  --chart-tick: #524f4d;

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-1: 0 1px 3px rgba(44, 42, 41, 0.08), 0 1px 2px rgba(44, 42, 41, 0.05);
  --shadow-2: 0 4px 12px rgba(44, 42, 41, 0.1), 0 2px 4px rgba(44, 42, 41, 0.06);
  --shadow-3: 0 8px 24px rgba(44, 42, 41, 0.14);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(250, 225, 0, 0.35);

  /* Layout */
  --sidebar-collapsed: 64px;
  --sidebar-expanded: 272px;
  --sidebar-gutter: var(--space-2);
  --nav-icon-size: 40px;
  --nav-icon-glyph: 18px;
  --nav-icon-gap: 10px;
  --nav-icon-gap-tight: 6px;
  --nav-indent-step: 12px;
  --nav-text-col: calc(var(--nav-icon-size) + var(--nav-icon-gap-tight));
  --nav-bullet-inline: 15px;
  --nav-dash-inline: 13px;
  --nav-focus-area: var(--brand-yellow-subtle);
  --nav-focus-module: rgba(250, 225, 0, 0.09);
  --nav-focus-module-edge: rgba(250, 225, 0, 0.52);
  --header-height: 64px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-base: #181716;
  --bg-surface: #242220;
  --bg-surface-hover: #2e2c2a;
  --bg-elevated: #2e2c2a;
  --bg-sidebar: #121110;
  --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
  --bg-input: #2e2c2a;

  --border-subtle: #3a3836;
  --border-default: #4f4c49;
  --border-strong: #6b6760;

  --text-primary: #f5f2ec;
  --text-secondary: #c8c4bc;
  --text-tertiary: #9a9590;

  --accent-subtle: rgba(250, 225, 0, 0.18);
  --nav-focus-area: rgba(250, 225, 0, 0.18);
  --nav-focus-module: rgba(250, 225, 0, 0.11);
  --nav-focus-module-edge: rgba(250, 225, 0, 0.58);

  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.14);

  --chart-bar-primary: #9a9590;
  --chart-bar-muted: #6b6760;
  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-tick: #c8c4bc;
  --chart-2: #4ade80;
  --chart-4: #22d3ee;

  --focus-ring: 0 0 0 3px rgba(250, 225, 0, 0.28);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
}