:root {
  /* Brand: professional teal structure + warm botanical expression */
  --brand-950: #102f2e;
  --brand-900: #174c4b;
  --brand-800: #225f5b;
  --brand-700: #2e7168;
  --brand-600: #3d8275;
  --brand-500: #5b9988;
  --brand-300: #a9cabe;
  --brand-200: #cfe2da;
  --brand-100: #e5f0eb;
  --brand-50: #f1f7f4;

  --warm-900: #57372e;
  --warm-700: #9e5e4c;
  --warm-600: #c9745e;
  --warm-500: #e08a72;
  --warm-300: #efb9a7;
  --warm-100: #f9e7df;
  --warm-50: #fdf5f0;

  --amber-700: #895f14;
  --amber-500: #c6912e;
  --amber-100: #f6e9c9;
  --red-700: #a43d3d;
  --red-100: #f9dfdf;
  --blue-700: #35647c;
  --blue-100: #e1edf3;

  --neutral-950: #17201f;
  --neutral-800: #34403e;
  --neutral-700: #4f5c59;
  --neutral-600: #697572;
  --neutral-500: #84908c;
  --neutral-300: #cbd3d0;
  --neutral-200: #dde3e0;
  --neutral-100: #edf1ef;
  --neutral-50: #f6f8f7;
  --white: #ffffff;
  --cream: #faf8f2;

  /* Semantic colors: components must use these, not raw palette values */
  --color-primary: var(--brand-900);
  --color-primary-hover: var(--brand-800);
  --color-primary-active: var(--brand-950);
  --color-primary-soft: var(--brand-100);
  --color-on-primary: var(--white);
  --color-accent: var(--warm-600);
  --color-accent-soft: var(--warm-100);
  --color-page: #f3f4f0;
  --color-surface: var(--white);
  --color-surface-warm: var(--cream);
  --color-surface-muted: var(--neutral-50);
  --color-text: var(--neutral-950);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-600);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-focus: #167b76;
  --color-scrim: rgba(10, 24, 22, 0.58);
  --color-glass: rgba(255, 255, 255, 0.92);
  --color-transparent: rgba(255, 255, 255, 0);
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-13: rgba(255, 255, 255, 0.13);
  --color-white-11: rgba(255, 255, 255, 0.11);
  --color-brand-scrim: rgba(16, 47, 46, 0.76);
  --color-brand-scrim-strong: rgba(16, 47, 46, 0.88);
  --color-brand-panel-active: rgba(91, 153, 136, 0.24);
  --color-warm-halo: rgba(239, 185, 167, 0.3);
  --color-warm-halo-soft: rgba(239, 185, 167, 0.13);
  --color-warm-scan-glow: rgba(239, 185, 167, 0.55);
  --color-success: var(--brand-700);
  --color-success-soft: var(--brand-100);
  --color-warning: var(--amber-700);
  --color-warning-soft: var(--amber-100);
  --color-danger: var(--red-700);
  --color-danger-soft: var(--red-100);
  --color-info: var(--blue-700);
  --color-info-soft: var(--blue-100);

  /* Typography */
  --font-sans: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "Source Han Serif SC", "Songti SC", STSong, serif;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading-tight: 1.22;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-semibold: 650;
  --weight-bold: 750;

  /* 4/8 spacing rhythm */
  --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;

  /* Shape */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* Depth */
  --shadow-1: 0 1px 2px rgba(16, 47, 46, 0.05), 0 2px 8px rgba(16, 47, 46, 0.04);
  --shadow-2: 0 8px 24px rgba(16, 47, 46, 0.09);
  --shadow-3: 0 22px 64px rgba(16, 47, 46, 0.14);
  --shadow-focus: 0 0 0 3px rgba(22, 123, 118, 0.23);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Layers */
  --z-base: 0;
  --z-sticky: 20;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system-dark"] {
    --color-page: #11201f;
    --color-surface: #172a28;
    --color-surface-warm: #24302c;
    --color-surface-muted: #1c302e;
    --color-text: #f3f7f5;
    --color-text-secondary: #c5d1cd;
    --color-text-muted: #a7b7b2;
    --color-border: #344b47;
    --color-border-strong: #49605c;
  }
}