:root {
  /* ═══ House of Adsperiment Brand Colors ═══ */
  --color-primary: #008080;          /* Adsperiment Teal */
  --color-primary-light: #e6f3f3;    /* Teal tint for backgrounds */
  --color-primary-medium: #2AA198;   /* Teal Light */
  --color-primary-dark: #006666;     /* Teal Dark */
  --color-primary-hover: #2AA198;
  --color-accent: #FDB701;           /* Action Gold */
  --color-accent-light: #fef3cd;     /* Gold tint */

  /* Experiment status */
  --color-winner: #16a34a;
  --color-winner-bg: #f0fdf4;
  --color-winner-border: #bbf7d0;
  --color-loser: #dc2626;
  --color-loser-bg: #fef2f2;
  --color-loser-border: #fecaca;
  --color-neutral: #d97706;
  --color-neutral-bg: #fffbeb;
  --color-neutral-border: #fde68a;
  --color-running: #008080;
  --color-running-bg: #e6f3f3;
  --color-running-border: #99cccc;

  /* Neutrals — Clean white + teal/tan accents */
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-border: #EEC8A6;           /* Shadow Tan */
  --color-border-light: #f0e4d8;
  --color-bg: #FFFFFF;               /* White main background */
  --color-bg-subtle: #f9f7f5;        /* Warm off-white */
  --color-bg-sidebar: #FFFFFF;
  --color-bg-hover: #e6f3f3;         /* Teal tint hover */
  --color-white: #FFFFFF;

  /* Typography — Montserrat */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Spacing */
  --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;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --sidebar-width: 280px;
  --content-max-width: 800px;
  --header-height: 64px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Brand Shadows — offset style */
  --shadow-brand: -4px 4px var(--color-border);
  --shadow-brand-hover: -6px 6px var(--color-border);
  --shadow-sm: -2px 2px var(--color-border);
  --shadow-md: -4px 4px var(--color-border);
  --shadow-lg: -6px 6px var(--color-border);
  --shadow-xl: -8px 8px var(--color-border);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 1rem;
  --radius-xl: 1rem;
  --radius-full: 2rem;
}