:root {
  color-scheme: light;

  /* Brand and semantic colors */
  --color-brand-50: #edf7f1;
  --color-brand-100: #d8eee1;
  --color-brand-200: #b4dcc5;
  --color-brand-500: #25835e;
  --color-brand-600: #176b4b;
  --color-brand-700: #12543c;
  --color-brand-900: #163b2d;
  --color-navy-950: #18211c;
  --color-navy-900: #1f2923;
  --color-navy-800: #2a352e;
  --color-surface: #ffffff;
  --color-surface-subtle: #f7f8f6;
  --color-canvas: #f3f5f2;
  --color-border: #dce1dc;
  --color-border-strong: #c7cec8;
  --color-text: #202621;
  --color-text-secondary: #566058;
  --color-text-muted: #778078;
  --color-text-on-dark: #f8fbff;
  --color-focus-ring: rgba(23, 107, 75, 0.28);
  --color-overlay: rgba(5, 13, 27, 0.5);
  --color-overlay-strong: rgba(5, 13, 27, 0.58);

  /* Metric colors */
  --color-sales: #176b4b;
  --color-profit: #15966f;
  --color-hpp: #c78316;
  --color-ads: #7157d9;
  --color-risk: #d64b55;

  /* Status colors always pair with text/icon labels */
  --status-success: #0d8a62;
  --status-success-bg: #e8f7f1;
  --status-success-border: #b8e6d4;
  --status-warning: #9a640d;
  --status-warning-bg: #fff6df;
  --status-warning-border: #f1d79b;
  --status-danger: #b73540;
  --status-danger-bg: #fdecee;
  --status-danger-border: #f2bcc2;
  --status-info: #1d5fc7;
  --status-info-bg: #eaf2ff;
  --status-info-border: #bfd4fb;
  --status-neutral: #5d6b80;
  --status-neutral-bg: #eef2f7;
  --status-neutral-border: #d8e0ea;

  /* Typography */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 750;
  --weight-extrabold: 850;
  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Shape and depth */
  --radius-xs: 0.1875rem;
  --radius-sm: 0.3125rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 30, 54, 0.06);
  --shadow-sm: 0 2px 8px rgba(25, 35, 28, 0.05);
  --shadow-md: 0 8px 24px rgba(25, 35, 28, 0.09);
  --shadow-lg: 0 18px 48px rgba(16, 25, 19, 0.16);

  /* Component dimensions */
  --sidebar-width: 216px;
  --sidebar-rail-width: 56px;
  --header-height: 60px;
  --control-height-sm: 36px;
  --control-height-md: 38px;
  --control-height-lg: 44px;
  --content-max: 1600px;
  --table-row-height: 42px;
  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;

  /* Layering */
  --z-table-header: 2;
  --z-raised: 5;
  --z-sticky-filter: 30;
  --z-header: 40;
  --z-overlay: 45;
  --z-sidebar: 50;
  --z-popover: 80;
  --z-progress: 100;
  --z-tooltip: 120;
  --z-toast: 150;
  --z-modal: 180;
  --z-skip-link: 200;

  /* Backward-compatible aliases for existing components */
  --bg: var(--color-canvas);
  --panel: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --border: var(--color-border);
  --navy: var(--color-navy-900);
  --primary: var(--color-brand-600);
  --primary-soft: var(--status-info-bg);
  --success: var(--status-success);
  --success-soft: var(--status-success-bg);
  --danger: var(--status-danger);
  --danger-soft: var(--status-danger-bg);
  --warning: var(--status-warning);
  --warning-soft: var(--status-warning-bg);
  --shadow: var(--shadow-sm);
}