/**
 * smsai Design Tokens
 *
 * Comprehensive design token system defining colors, spacing, typography,
 * shadows, and other design primitives. All tokens use CSS custom properties
 * for easy theming and maintenance.
 *
 * @version 2.0.0
 * @phase Phase 2 - Design Language & Tokens
 * @date 2025-10-10
 *
 * USAGE:
 *   Import this file before any other CSS files to make tokens available globally.
 *   Use tokens via var(): color: var(--color-primary-600);
 *
 * CONSTRAINTS:
 *   - Mobile-first design approach
 *   - WCAG AA contrast compliance (4.5:1 for normal text, 3:1 for large text)
 *   - Backwards compatibility via fallback values
 *   - Zero inline styles in templates
 */

/* ============================================================================
   ROOT LIGHT THEME (DEFAULT)
   ========================================================================= */

:root {
  /* ==========================================================================
     COLOR SYSTEM
     Semantic color tokens with full shade scales (50-950)
     All colors meet WCAG AA contrast requirements
     ======================================================================= */

  /* --- Primary Colors (Blue) --- */
  /* Consolidates: #007bff, #3498db, #4da3ff, #4285f4, #2563eb, #667eea, #5568d3, #e3f2fd */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;  /* Main primary color */
  --color-primary-600: #2563eb;  /* Primary interactive elements */
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* --- Success Colors (Green) --- */
  /* Consolidates: #28a745, #2ecc71, #3ddc97, #34a853, #16a34a, #155724 */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;  /* Main success color */
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;  /* Success text on light backgrounds */
  --color-success-950: #052e16;

  /* --- Danger Colors (Red) --- */
  /* Consolidates: #dc3545, #e74c3c, #ff6166, #ea4335, #dc2626, #721c24, #842029 */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;  /* Main danger color */
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;  /* Danger text on light backgrounds */
  --color-danger-950: #450a0a;

  /* --- Warning Colors (Orange/Amber) --- */
  /* Consolidates: #e67e22, #d35400, #fbbc04, #d97706 */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;  /* Main warning color */
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;
  --color-warning-950: #451a03;

  /* --- Info Colors (Cyan) --- */
  --color-info-50: #ecfeff;
  --color-info-100: #cffafe;
  --color-info-200: #a5f3fc;
  --color-info-300: #67e8f9;
  --color-info-400: #22d3ee;
  --color-info-500: #06b6d4;
  --color-info-600: #0891b2;  /* Main info color */
  --color-info-700: #0e7490;
  --color-info-800: #155e75;
  --color-info-900: #164e63;
  --color-info-950: #083344;

  /* --- Neutral/Gray Colors --- */
  /* Consolidates: #f8f9fa, #f0f0f0, #2c3e50, #212529, #333, #666, #999, #9aa0a6, #e1e4e8, #dee2e6, etc. */
  --color-gray-50: #fafafa;
  --color-gray-100: #f8fafc;
  --color-gray-200: #f1f5f9;   /* Light backgrounds */
  --color-gray-300: #e2e8f0;
  --color-gray-400: #cbd5e1;   /* Borders */
  --color-gray-500: #94a3b8;
  --color-gray-600: #64748b;   /* Muted text */
  --color-gray-700: #475569;
  --color-gray-800: #334155;
  --color-gray-900: #1e293b;
  --color-gray-950: #0f172a;   /* Darkest text */

  /* --- Semantic Color Aliases --- */
  /* These map to specific use cases for easier understanding */
  --color-text-primary: var(--color-gray-950);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-gray-50);

  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);

  --color-border-primary: var(--color-gray-400);
  --color-border-secondary: var(--color-gray-300);
  --color-border-focus: var(--color-primary-600);

  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* ==========================================================================
     SPACING SYSTEM (8-Point Grid)
     Consolidates 17 unique values into 12 consistent values
     ======================================================================= */

  /* --- Base Spacing Scale --- */
  /* Consolidates: 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 25px, 28px, 30px, 40px, 60px */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --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-11: 2.75rem;    /* 44px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */
  --space-40: 10rem;      /* 160px */
  --space-48: 12rem;      /* 192px */
  --space-56: 14rem;      /* 224px */
  --space-64: 16rem;      /* 256px */

  /* ==========================================================================
     TYPOGRAPHY SYSTEM
     Responsive font sizes using clamp() for fluid scaling
     ======================================================================= */

  /* --- Font Families --- */
  /* Consolidates 15+ duplicate declarations */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- Font Sizes (Responsive with clamp) --- */
  /* Consolidates: 11px, 12px, 13px, 14px, 16px, 18px, 20px, 22px, 24px, 28px, 36px */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12px - 13px */
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);   /* 14px - 15px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16px - 17px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);     /* 18px - 20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);         /* 20px - 24px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);      /* 24px - 30px */
  --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);    /* 30px - 36px */
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);          /* 36px - 48px */
  --text-5xl: clamp(3rem, 2.55rem + 2.25vw, 4rem);            /* 48px - 64px */

  /* --- Font Weights --- */
  /* Consolidates: 400, 500, 600, 700, 800 */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* --- Line Heights --- */
  /* Consolidates: 1.4, 1.5, 1.6 */
  --leading-none: 1;
  --leading-tight: 1.25;    /* Headings */
  --leading-snug: 1.375;
  --leading-normal: 1.5;    /* Body text (most common) */
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;    /* Long-form content */

  /* --- Letter Spacing --- */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ==========================================================================
     BORDER SYSTEM
     ======================================================================= */

  /* --- Border Radius --- */
  /* Consolidates: 4px, 6px, 8px, 10px, 12px, 14px, 999px, 50% */
  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px - small elements */
  --radius-base: 0.5rem;    /* 8px - default (most common) */
  --radius-md: 0.75rem;     /* 12px - cards */
  --radius-lg: 1rem;        /* 16px - large cards */
  --radius-xl: 1.5rem;      /* 24px - extra large */
  --radius-2xl: 2rem;       /* 32px - hero elements */
  --radius-full: 9999px;    /* Pills/circles */

  /* --- Border Widths --- */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;

  /* ==========================================================================
     SHADOW SYSTEM (Elevation)
     Consolidates 15+ unique shadow declarations
     ======================================================================= */

  /* --- Standard Shadows --- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.1);              /* Most common */
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 30px 70px rgba(0, 0, 0, 0.5);

  /* --- Inner Shadows --- */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* --- Focus Rings (Accessibility) --- */
  --ring-primary: 0 0 0 3px rgba(59, 130, 246, 0.5);         /* Primary focus */
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.5);           /* Danger focus */
  --ring-success: 0 0 0 3px rgba(22, 163, 74, 0.5);          /* Success focus */
  --ring-warning: 0 0 0 3px rgba(217, 119, 6, 0.5);          /* Warning focus */
  --ring-offset: 2px;                                         /* Focus ring offset */

  /* ==========================================================================
     Z-INDEX SCALE
     Standardized layering system
     ======================================================================= */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;

  /* ==========================================================================
     TRANSITION/ANIMATION SYSTEM
     Consolidates: 0.2s, 0.3s variations
     ======================================================================= */

  /* --- Duration --- */
  --transition-faster: 100ms;
  --transition-fast: 150ms;
  --transition-base: 200ms;    /* Default */
  --transition-slow: 300ms;
  --transition-slower: 500ms;

  /* --- Easing Functions --- */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ==========================================================================
     BREAKPOINTS
     Mobile-first responsive design breakpoints
     ======================================================================= */

  /* Note: CSS custom properties can't be used directly in media queries
     These are documented here for reference and used in documentation
     Actual media queries use hard-coded pixel values */
  --breakpoint-sm: 640px;    /* Large phones (landscape) */
  --breakpoint-md: 768px;    /* Tablets (portrait) */
  --breakpoint-lg: 1024px;   /* Tablets (landscape) / Small desktop */
  --breakpoint-xl: 1280px;   /* Desktop */
  --breakpoint-2xl: 1536px;  /* Large desktop */

  /* ==========================================================================
     CONTAINER WIDTHS
     ======================================================================= */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ==========================================================================
     ACCESSIBILITY
     ======================================================================= */

  /* --- Touch Targets --- */
  --touch-target-min: 44px;  /* Minimum touch target size (Apple HIG / WCAG) */

  /* --- Focus Visibility --- */
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
  --focus-outline-style: solid;
}

/* ============================================================================
   DARK THEME
   Applied when [data-theme="dark"] is present on root element
   ========================================================================= */

[data-theme="dark"] {
  /* --- Dark Mode Color Overrides --- */
  /* Consolidates: #0b0d12, #11161f, #1a1f2e, #1e293b */

  /* Semantic color aliases for dark mode */
  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-400);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-gray-950);

  --color-bg-primary: #0f172a;      /* Main dark background */
  --color-bg-secondary: #1e293b;    /* Secondary dark background */
  --color-bg-tertiary: #334155;     /* Tertiary dark background */

  --color-border-primary: var(--color-gray-700);
  --color-border-secondary: var(--color-gray-800);
  --color-border-focus: var(--color-primary-500);

  --color-surface: #1e293b;
  --color-surface-elevated: #334155;
  --color-overlay: rgba(0, 0, 0, 0.7);

  /* --- Dark Mode Shadow Adjustments --- */
  /* Shadows need to be stronger in dark mode to show elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.8);
  --shadow-2xl: 0 30px 70px rgba(0, 0, 0, 0.9);
}

/* ============================================================================
   SYSTEM PREFERENCE: DARK MODE
   Automatically apply dark theme if user prefers dark mode
   Can be overridden by explicit [data-theme] attribute
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Apply same dark mode variables */
    --color-text-primary: var(--color-gray-50);
    --color-text-secondary: var(--color-gray-400);
    --color-text-muted: var(--color-gray-500);
    --color-text-inverse: var(--color-gray-950);

    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;

    --color-border-primary: var(--color-gray-700);
    --color-border-secondary: var(--color-gray-800);
    --color-border-focus: var(--color-primary-500);

    --color-surface: #1e293b;
    --color-surface-elevated: #334155;
    --color-overlay: rgba(0, 0, 0, 0.7);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.8);
    --shadow-2xl: 0 30px 70px rgba(0, 0, 0, 0.9);
  }
}

/* ============================================================================
   REDUCED MOTION (Accessibility)
   Respects user preference for reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Disable all animations and transitions for users who prefer reduced motion */
    --transition-faster: 0.01ms;
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
    --transition-slower: 0.01ms;
  }
}

/* ============================================================================
   BACKWARDS COMPATIBILITY
   Fallback variables for legacy code
   ========================================================================= */

:root {
  /* Legacy variable mappings for backwards compatibility */
  /* These can be removed once all templates are migrated */

  /* Legacy color names */
  --primary-color: var(--color-primary-600);
  --secondary-color: var(--color-gray-600);
  --success-color: var(--color-success-600);
  --danger-color: var(--color-danger-600);
  --warning-color: var(--color-warning-600);
  --info-color: var(--color-info-600);

  --background-color: var(--color-bg-primary);
  --text-color: var(--color-text-primary);
  --border-color: var(--color-border-primary);

  /* Legacy spacing (responsive.css compatibility) */
  --spacing-unit: var(--space-4);
  --border-radius: var(--radius-base);

  /* Legacy breakpoints */
  --mobile: var(--breakpoint-sm);
  --tablet: var(--breakpoint-md);
  --desktop: var(--breakpoint-lg);
  --large-desktop: var(--breakpoint-xl);
}

/* ============================================================================
   PRINT STYLES
   Optimized token values for print media
   ========================================================================= */

@media print {
  :root {
    /* Simplify colors for print */
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-bg-primary: #ffffff;

    /* Remove shadows for print */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    /* Faster transitions (essentially instant for print) */
    --transition-base: 0ms;
  }
}