/* Core design tokens: neutral palette, spacing scale, typography scale, elevation, motion */
:root {
  /* Neutral grayscale */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Semantic base (can be overridden per brand) */
  --color-accent-success: #1d7f3b;
  --color-accent-success-bg: #e3f4ea;
  --color-accent-warning: #c77e11;
  --color-accent-warning-bg: #fcefdc;
  --color-accent-error: #b40024;
  --color-accent-error-bg: #fae5ea;
  --color-accent-info: #1063c9;
  --color-accent-info-bg: #e5f0fb;
  --color-accent-info-hover: var(--color-brand-primary-active);

  /* Surface */
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-gray-50);
  --color-surface-inverse: var(--color-gray-900);
  --color-border: var(--color-gray-300);
  --color-border-strong: var(--color-gray-400);
  --color-divider: var(--color-gray-300);
  --color-divider-strong: var(--color-gray-400);
  --color-backdrop: rgba(0,0,0,.55);

  /* Text */
  --color-text: var(--color-gray-900);
  --color-text-soft: var(--color-gray-700);
  --color-text-muted: var(--color-gray-600);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-accent-info);
  --color-text-link-hover: var(--color-accent-info-hover);

  /* Focus ring */
  --focus-ring-color: var(--color-brand-secondary, #5e889b);
  --focus-ring-outline: 1px solid var(--focus-ring-color);
  --focus-ring-offset: 1px;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Spacing scale (t-shirt sizes) */
  --space-0: 0;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Special spacing */
  --space-no-pLeft-sm: 4px 4px 4px 0;
  --space-no-pLeft-md: 8px 8px 8px 0
  --space-no-pLeft-lg: 12px 12px 12px 0;
  --space-no-pLeft-xl: 16px 16px 16px 0;
  --space-no-pLeft-2xl: 24px 24px 24px 0;
  --space-no-pLeft-3xl: 32px 32px 32px 0;

  /* Typography scale */
  --font-family-base: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;

  --font-size-xs: .75rem; /* 12px */
  --font-size-sm: .875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  --line-height-tight: 1.15;
  --line-height-snug: 1.25;
  --line-height-base: 1.4;
  --line-height-relaxed: 1.6;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Elevation (shadows) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.12);
  --shadow-focus: 0 0 0 2px var(--color-white),0 0 0 4px var(--focus-ring-color);

  /* Transitions / motion */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Light theme alias (default) */
:root {
  --color-bg: var(--color-surface);
  --color-bg-alt: var(--color-surface-alt);
  --color-bg-inset: var(--color-gray-100);
  --color-bg-inverse: var(--color-surface-inverse);
}

/* Dark mode (placeholder; enable by adding .theme-dark to body) */
.theme-dark {
  --color-bg: #12141a;
  --color-bg-alt: #1c1f27;
  --color-bg-inset: #232732;
  --color-bg-inverse: var(--color-gray-50);
  --color-text: var(--color-gray-100);
  --color-text-soft: var(--color-gray-300);
  --color-text-muted: var(--color-gray-500);
  --color-border: #2e3441;
  --color-border-strong: #3a4252;
  --color-divider: #262b35;
  --color-surface: #181b22;
  --color-surface-alt: #20242d;
  --color-surface-inverse: var(--color-gray-50);
}