/**
 * Centralized Design Token System
 * All UI components must use these tokens only. No hardcoded colors, spacing, or shadows.
 * Load this file first (before style.css) so :root tokens are available everywhere.
 */

:root {
  /* ========== COLOR PALETTE (semantic aliases to existing palette) ========== */
  --color-primary: var(--primary-600);
  --color-primary-hover: var(--primary-700);
  --color-primary-subtle: var(--primary-50);
  --color-success: var(--success-600);
  --color-success-hover: var(--success-700);
  --color-success-subtle: var(--success-50);
  --color-danger: var(--danger-500);
  --color-danger-hover: var(--danger-600);
  --color-danger-subtle: var(--danger-50);
  --color-warning: var(--warning-500);
  --color-warning-hover: var(--warning-600);
  --color-warning-subtle: var(--warning-50);
  --color-info: var(--info-500);
  --color-info-hover: var(--info-600);
  --color-info-subtle: var(--info-50);
  --color-neutral-50: var(--neutral-50);
  --color-neutral-100: var(--neutral-100);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-800: var(--neutral-800);
  --color-neutral-900: var(--neutral-900);
  --color-surface: var(--base, #fff);
  --color-text-primary: var(--text-primary-light, var(--neutral-900));
  --color-text-secondary: var(--text-secondary-light, var(--neutral-600));
  --color-text-muted: var(--neutral-500);

  /* ========== TYPOGRAPHY SCALE ========== */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xxs: var(--font-xxs, 0.625rem);
  --text-xs: var(--font-xs, 0.75rem);
  --text-sm: var(--font-sm, 0.875rem);
  --text-md: var(--font-md, 1rem);
  --text-lg: var(--font-lg, 1.125rem);
  --text-xl: var(--font-xl, 1.25rem);
  --text-2xl: var(--font-2xl, 1.75rem);
  --text-line-height-tight: 1.25;
  --text-line-height-normal: 1.5;
  --text-line-height-relaxed: 1.625;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========== SPACING SCALE (semantic; maps to --size-* where exists) ========== */
  --space-1: var(--size-2, 0.125rem);
  --space-2: var(--size-4, 0.25rem);
  --space-3: var(--size-6, 0.375rem);
  --space-4: var(--size-8, 0.5rem);
  --space-5: var(--size-10, 0.625rem);
  --space-6: var(--size-12, 0.75rem);
  --space-8: var(--size-16, 1rem);
  --space-10: var(--size-20, 1.25rem);
  --space-12: var(--size-24, 1.5rem);
  --space-16: var(--size-32, 2rem);
  --space-20: var(--size-40, 2.5rem);
  --space-24: var(--size-48, 3rem);

  /* ========== BORDER RADIUS SCALE ========== */
  --radius-none: 0;
  --radius-sm: var(--rounded-4, 0.25rem);
  --radius-md: var(--rounded-8, 0.5rem);
  --radius-lg: var(--rounded-12, 0.75rem);  /* used by toast and cards */
  --radius-xl: var(--rounded-16, 1rem);
  --radius-2xl: var(--rounded-24, 1.5rem);
  --radius-full: 9999px;

  /* ========== SHADOW LEVELS ========== */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-toast: var(--shadow-lg);
  --shadow-modal: var(--shadow-xl);

  /* ========== BUTTON VARIANTS ========== */
  --btn-height-sm: 2rem;
  --btn-height-md: 2.5rem;
  --btn-height-lg: 3rem;
  --btn-padding-x-sm: var(--space-3);
  --btn-padding-x-md: var(--space-6);
  --btn-padding-x-lg: var(--space-8);
  --btn-padding-y-sm: var(--space-2);
  --btn-padding-y-md: var(--space-3);
  --btn-padding-y-lg: var(--space-4);
  --btn-radius: var(--radius-md);
  --btn-font-weight: var(--font-weight-medium);
  --btn-font-size-sm: var(--text-xs);
  --btn-font-size-md: var(--text-sm);
  --btn-font-size-lg: var(--text-md);
  /* Primary */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-color: #fff;
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: var(--color-primary-hover);
  /* Secondary / Outline */
  --btn-secondary-bg: transparent;
  --btn-secondary-color: var(--color-primary);
  --btn-secondary-border: var(--color-primary);
  --btn-secondary-hover-bg: var(--color-primary-subtle);
  /* Danger */
  --btn-danger-bg: var(--color-danger);
  --btn-danger-color: #fff;
  --btn-danger-border: transparent;
  --btn-danger-hover-bg: var(--color-danger-hover);
  /* Success */
  --btn-success-bg: var(--color-success);
  --btn-success-color: #fff;
  --btn-success-border: transparent;
  --btn-success-hover-bg: var(--color-success-hover);

  /* ========== ALERT VARIANTS (toast + inline) ========== */
  --alert-padding-x: var(--space-5);
  --alert-padding-y: var(--space-4);
  --alert-gap: var(--space-4);
  --alert-radius: var(--radius-md);
  --alert-shadow: var(--shadow-sm);
  --alert-icon-size: 1.5rem;
  /* Success */
  --alert-success-bg: var(--color-surface);
  --alert-success-border: var(--color-success);
  --alert-success-title: var(--success-700);
  --alert-success-message: var(--color-text-secondary);
  --alert-success-icon-bg: var(--color-success);
  --alert-success-icon-color: #fff;
  /* Error */
  --alert-error-bg: var(--color-surface);
  --alert-error-border: var(--color-danger);
  --alert-error-title: var(--danger-600);
  --alert-error-message: var(--color-text-secondary);
  --alert-error-icon-bg: var(--color-danger);
  --alert-error-icon-color: #fff;
  /* Warning */
  --alert-warning-bg: var(--color-surface);
  --alert-warning-border: var(--color-warning);
  --alert-warning-title: var(--warning-700);
  --alert-warning-message: var(--color-text-secondary);
  --alert-warning-icon-bg: var(--color-warning);
  --alert-warning-icon-color: #fff;
  /* Info */
  --alert-info-bg: var(--color-surface);
  --alert-info-border: var(--color-info);
  --alert-info-title: var(--info-700);
  --alert-info-message: var(--color-text-secondary);
  --alert-info-icon-bg: var(--color-info);
  --alert-info-icon-color: #fff;
  /* Toast close button */
  --alert-close-bg: rgba(0, 0, 0, 0.05);
  --alert-close-color: var(--neutral-400);
  --alert-close-hover-bg: rgba(0, 0, 0, 0.1);
  --alert-close-hover-color: var(--neutral-600);

  /* ========== INPUT VARIANTS ========== */
  --input-height-sm: 2rem;
  --input-height-md: 2.5rem;
  --input-height-lg: 3rem;
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-radius: var(--radius-md);
  --input-font-size: var(--text-sm);
  --input-bg: var(--input-bg, var(--neutral-50));
  --input-border: 1px solid var(--input-stroke, var(--neutral-300));
  --input-border-focus: 1px solid var(--color-primary);
  --input-color: var(--text-primary-light, var(--neutral-900));
  --input-placeholder-color: var(--neutral-500);
  --input-invalid-border: 1px solid var(--color-danger);
  --input-disabled-bg: var(--neutral-100);
  --input-disabled-color: var(--neutral-500);
}

/* Dark theme overrides for tokens (optional) */
[data-theme="dark"] {
  --color-surface: var(--dark-2, #273142);
  --color-text-primary: var(--base, #fff);
  --color-text-secondary: var(--neutral-400);
  --alert-success-bg: var(--dark-2);
  --alert-error-bg: var(--dark-2);
  --alert-warning-bg: var(--dark-2);
  --alert-info-bg: var(--dark-2);
  --alert-close-bg: rgba(255, 255, 255, 0.1);
  --alert-close-color: var(--neutral-500);
  --alert-close-hover-bg: rgba(255, 255, 255, 0.2);
  --input-bg: var(--input-bg);
}