:root {
  /* DemoSelect Component Library tokens — v1.0.0 */
  --ds-color-navy-900: #102a43;
  --ds-color-blue-600: #1e5eff;
  --ds-color-blue-700: #174aca;
  --ds-color-graphite-800: #263442;
  --ds-color-graphite-500: #637282;
  --ds-color-platinum-400: #c7cdd4;
  --ds-color-surface: #ffffff;
  --ds-color-surface-muted: #f4f7fa;
  --ds-color-success-600: #198754;
  --ds-color-warning-100: #fff3cd;
  --ds-color-warning-900: #604b00;
  --ds-color-danger-100: #fde8e8;
  --ds-color-danger-800: #8b1d1d;

  --ds-font-body: Inter, system-ui, sans-serif;
  --ds-font-heading: Manrope, system-ui, sans-serif;
  --ds-font-size-xs: 0.72rem;
  --ds-font-size-sm: 0.82rem;
  --ds-font-size-md: 0.9375rem;
  --ds-font-size-lg: 1.15rem;

  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;

  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 9px;
  --ds-radius-pill: 999px;
  --ds-border-subtle: 1px solid #e3e8ed;
  --ds-shadow-card: 0 12px 35px rgb(16 42 67 / 8%);

  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-transition-interactive:
    color var(--ds-duration-fast) var(--ds-ease-standard),
    background-color var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration-fast) var(--ds-ease-standard),
    box-shadow var(--ds-duration-fast) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard);

  --ds-breakpoint-mobile: 600px;
  --ds-breakpoint-tablet: 900px;
  --ds-z-header: 100;
  --ds-z-overlay: 1000;
  --ds-opacity-disabled: 0.52;
  --ds-icon-sm: 1rem;
  --ds-icon-md: 1.5rem;
  --ds-icon-lg: 2rem;
  --ds-container-max: 1440px;
  --ds-grid-gap: 1.4rem;
  --ds-touch-target: 44px;

  /* Backward-compatible aliases during component migration. */
  --navy: var(--ds-color-navy-900);
  --blue: var(--ds-color-blue-600);
  --graphite: var(--ds-color-graphite-800);
  --platinum: var(--ds-color-platinum-400);
  --light: var(--ds-color-surface-muted);
  --green: var(--ds-color-success-600);
  --white: var(--ds-color-surface);
  --shadow: var(--ds-shadow-card);
}
