/* Design System Variables */

:root {
  /* Brand Colors */
  --brand-primary: #0175C2;
  --brand-primary-dark: #015A9A;
  --brand-primary-light: #0A84FF;

  /* Light Theme */
  --bg-light: #FFFFFF;
  --surface-light: #F8F9FA;
  --text-primary-light: #1A1A1A;
  --text-secondary-light: #6C757D;
  --border-light: #E8E8E8;
  --shadow-light: rgba(0, 0, 0, 0.08);

  /* Dark Theme */
  --bg-dark: #0A0A0A;
  --surface-dark: #1A1A1A;
  --text-primary-dark: #FFFFFF;
  --text-secondary-dark: #B0B0B0;
  --border-dark: #2A2A2A;
  --shadow-dark: rgba(0, 0, 0, 0.4);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.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: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */

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

  /* Spacing */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  --spacing-4xl: 6rem;     /* 96px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index layers */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Default theme (light) */
  --bg-primary: var(--bg-light);
  --bg-surface: var(--surface-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --border-color: var(--border-light);
  --shadow: var(--shadow-light);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: var(--bg-dark);
  --bg-surface: var(--surface-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --border-color: var(--border-dark);
  --shadow: var(--shadow-dark);
}

/* System preference for dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: var(--bg-dark);
    --bg-surface: var(--surface-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --border-color: var(--border-dark);
    --shadow: var(--shadow-dark);
  }
}