/* =============================================================================
 * AurienConnect Design System Tokens
 * Version: 2.0
 * Last updated: 2026-05-21
 *
 * This file defines all design tokens (CSS custom properties) used across
 * the AurienConnect platform. All components MUST reference these tokens
 * instead of hardcoded values to ensure consistency and theme support.
 * ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
   * Colors — Primary (Blue)
   * Used for: primary actions, active states, links, brand accents
   * --------------------------------------------------------------------------- */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* ---------------------------------------------------------------------------
   * Colors — Secondary (Purple)
   * Used for: gradients, brand accents, highlights
   * --------------------------------------------------------------------------- */
  --color-secondary-50: #faf5ff;
  --color-secondary-100: #f3e8ff;
  --color-secondary-200: #e9d5ff;
  --color-secondary-300: #d8b4fe;
  --color-secondary-400: #c084fc;
  --color-secondary-500: #a855f7;
  --color-secondary-600: #9333ea;
  --color-secondary-700: #7e22ce;
  --color-secondary-800: #6b21a8;
  --color-secondary-900: #581c87;

  /* ---------------------------------------------------------------------------
   * Colors — Surface (Dark theme default)
   * Used for: backgrounds, cards, borders, text on dark backgrounds
   * --------------------------------------------------------------------------- */
  --color-surface-950: #030712;
  --color-surface-900: #0a0a0f;
  --color-surface-800: #111827;
  --color-surface-700: #1f2937;
  --color-surface-600: #374151;
  --color-surface-500: #4b5563;
  --color-surface-400: #6b7280;
  --color-surface-300: #9ca3af;
  --color-surface-200: #d1d5db;
  --color-surface-100: #f3f4f6;
  --color-surface-50: #f9fafb;

  /* ---------------------------------------------------------------------------
   * Colors — Semantic
   * Used for: status indicators, alerts, form validation
   * --------------------------------------------------------------------------- */
  --color-success-light: #bbf7d0;
  --color-success: #22c55e;
  --color-success-dark: #166534;

  --color-warning-light: #fef08a;
  --color-warning: #f59e0b;
  --color-warning-dark: #92400e;

  --color-danger-light: #fecaca;
  --color-danger: #ef4444;
  --color-danger-dark: #991b1b;

  --color-info-light: #bfdbfe;
  --color-info: #3b82f6;
  --color-info-dark: #1e40af;

  /* ---------------------------------------------------------------------------
   * Typography
   * Font family: Inter (primary), system-ui fallback chain
   * Scale: modular scale based on 1rem (16px) base
   * --------------------------------------------------------------------------- */
  --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

  --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: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* ---------------------------------------------------------------------------
   * Spacing (4px base grid)
   * All spacing in the system is a multiple of 4px (0.25rem)
   * --------------------------------------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* ---------------------------------------------------------------------------
   * Border Radius
   * --------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------------
   * Shadows
   * All shadows use semi-transparent black for depth on dark backgrounds
   * --------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 8px 10px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* ---------------------------------------------------------------------------
   * Z-Index Scale
   * Predictable stacking order for overlapping elements
   * --------------------------------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;
  --z-max: 9999;

  /* ---------------------------------------------------------------------------
   * Transitions
   * Consistent animation timings across the platform
   * --------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------------------------
   * Breakpoints (reference — cannot use in media queries, for documentation)
   * 375px  — Mobile small (iPhone SE)
   * 428px  — Mobile large (iPhone Pro Max)
   * 640px  — Tablet portrait (sm)
   * 768px  — Tablet landscape (md)
   * 1024px — Desktop small (lg)
   * 1280px — Desktop (xl)
   * 1536px — Desktop large (2xl)
   * --------------------------------------------------------------------------- */

  /* ---------------------------------------------------------------------------
   * Component-specific tokens
   * --------------------------------------------------------------------------- */

  /* Sidebar */
  --sidebar-width: 16rem;       /* 256px */
  --sidebar-bg: var(--color-surface-900);
  --sidebar-border: var(--color-surface-800);

  /* Top bar */
  --topbar-height: 4rem;        /* 64px */
  --topbar-bg: rgba(17, 24, 39, 0.5);

  /* Glass card */
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(148, 163, 184, 0.1);
  --glass-blur: 12px;

  /* Input */
  --input-bg: var(--color-surface-800);
  --input-border: var(--color-surface-600);
  --input-border-focus: var(--color-primary-500);
  --input-text: var(--color-surface-100);
  --input-placeholder: var(--color-surface-400);
  --input-radius: var(--radius-lg);

  /* Button */
  --btn-radius: var(--radius-lg);
  --btn-font-weight: var(--font-weight-medium);
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);
}

/* =============================================================================
 * Light Theme Overrides
 * Applied when [data-theme="light"] is set on the <html> element
 * ============================================================================= */
[data-theme="light"] {
  --color-surface-950: #ffffff;
  --color-surface-900: #ffffff;
  --color-surface-800: #f9fafb;
  --color-surface-700: #f3f4f6;
  --color-surface-600: #e5e7eb;
  --color-surface-500: #d1d5db;
  --color-surface-400: #9ca3af;
  --color-surface-300: #6b7280;
  --color-surface-200: #374151;
  --color-surface-100: #111827;
  --color-surface-50: #030712;

  /* Adjusted shadows for light backgrounds */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

  /* Glass card adjustments */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(0, 0, 0, 0.08);

  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;

  /* Top bar */
  --topbar-bg: rgba(255, 255, 255, 0.8);

  /* Input */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
}