/**
 * Eluway CSS Variables (Design Tokens)
 *
 * This file defines all design tokens as CSS custom properties.
 * These are independent of Bootstrap and will work after Bootstrap removal.
 *
 * STRUCTURE:
 * 1. Colors (brand, semantic, surface)
 * 2. Typography
 * 3. Spacing
 * 4. Shadows & Elevation
 * 5. Borders & Radius
 * 6. Motion & Animation
 * 7. Z-index
 */

:root {
    /* ==========================================================================
       1. COLORS
       ========================================================================== */

    /* Brand Colors - Primary (Purple) */
    --eluway-primary-50: #faf5ff;
    --eluway-primary-100: #f3e8ff;
    --eluway-primary-200: #e9d5ff;
    --eluway-primary-300: #d8b4fe;
    --eluway-primary-400: #c084fc;
    --eluway-primary-500: #a855f7;
    --eluway-primary-600: #9333ea;
    --eluway-primary-700: #7c22ce;
    --eluway-primary-800: #6b21a8;
    --eluway-primary-900: #581c87;
    --eluway-primary-950: #3b0764;

    /* Brand Colors - Accent (Orange) */
    --eluway-accent-50: #fff7ed;
    --eluway-accent-100: #ffedd5;
    --eluway-accent-200: #fed7aa;
    --eluway-accent-300: #fdba74;
    --eluway-accent-400: #fb923c;
    --eluway-accent-500: #f97316;
    --eluway-accent-600: #ea580c;
    --eluway-accent-700: #c2410c;
    --eluway-accent-800: #9a3412;
    --eluway-accent-900: #7c2d12;

    /* Surface Colors (Light Mode) */
    --eluway-surface-50: #fafafa;
    --eluway-surface-100: #f4f4f5;
    --eluway-surface-200: #e4e4e7;
    --eluway-surface-300: #d4d4d8;
    --eluway-surface-400: #a1a1aa;
    --eluway-surface-500: #71717a;
    --eluway-surface-600: #52525b;
    --eluway-surface-700: #3f3f46;
    --eluway-surface-800: #27272a;
    --eluway-surface-900: #18181b;
    --eluway-surface-950: #09090b;

    /* Semantic Colors */
    --eluway-success: #22c55e;
    --eluway-success-light: #86efac;
    --eluway-success-dark: #16a34a;

    --eluway-error: #ef4444;
    --eluway-error-light: #fca5a5;
    --eluway-error-dark: #dc2626;

    --eluway-warning: #eab308;
    --eluway-warning-light: #fde047;
    --eluway-warning-dark: #ca8a04;

    --eluway-info: #3b82f6;
    --eluway-info-light: #93c5fd;
    --eluway-info-dark: #2563eb;

    /* Hero Gradient Colors (The Rainbow Gradient) */
    --eluway-gradient-1: #4f7df9;
    --eluway-gradient-2: #8b5cf6;
    --eluway-gradient-3: #d946ef;
    --eluway-gradient-4: #ec4899;
    --eluway-gradient-5: #f97316;
    --eluway-gradient-6: #fbbf24;

    /* Computed Theme Colors (for easy switching) */
    --eluway-bg: var(--eluway-surface-50);
    --eluway-bg-secondary: var(--eluway-surface-100);
    --eluway-bg-tertiary: var(--eluway-surface-200);
    --eluway-text: var(--eluway-surface-900);
    --eluway-text-secondary: var(--eluway-surface-600);
    --eluway-text-muted: var(--eluway-surface-400);
    --eluway-border: var(--eluway-surface-200);
    --eluway-border-light: var(--eluway-surface-100);

    /* ==========================================================================
       2. TYPOGRAPHY
       ========================================================================== */

    --eluway-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --eluway-font-display: 'Cal Sans', Inter, ui-sans-serif, -apple-system, sans-serif;
    --eluway-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --eluway-text-xs: 0.75rem;      /* 12px */
    --eluway-text-sm: 0.875rem;     /* 14px */
    --eluway-text-base: 1rem;       /* 16px */
    --eluway-text-lg: 1.125rem;     /* 18px */
    --eluway-text-xl: 1.25rem;      /* 20px */
    --eluway-text-2xl: 1.5rem;      /* 24px */
    --eluway-text-3xl: 1.875rem;    /* 30px */
    --eluway-text-4xl: 2.25rem;     /* 36px */
    --eluway-text-5xl: 3rem;        /* 48px */
    --eluway-text-6xl: 3.75rem;     /* 60px */

    --eluway-leading-none: 1;
    --eluway-leading-tight: 1.25;
    --eluway-leading-snug: 1.375;
    --eluway-leading-normal: 1.5;
    --eluway-leading-relaxed: 1.625;

    --eluway-font-light: 300;
    --eluway-font-normal: 400;
    --eluway-font-medium: 500;
    --eluway-font-semibold: 600;
    --eluway-font-bold: 700;
    --eluway-font-extrabold: 800;

    /* ==========================================================================
       3. SPACING
       ========================================================================== */

    --eluway-space-0: 0;
    --eluway-space-1: 0.25rem;   /* 4px */
    --eluway-space-2: 0.5rem;    /* 8px */
    --eluway-space-3: 0.75rem;   /* 12px */
    --eluway-space-4: 1rem;      /* 16px */
    --eluway-space-5: 1.25rem;   /* 20px */
    --eluway-space-6: 1.5rem;    /* 24px */
    --eluway-space-7: 2rem;      /* 32px */
    --eluway-space-8: 2.5rem;    /* 40px */
    --eluway-space-9: 3rem;      /* 48px */
    --eluway-space-10: 3.5rem;   /* 56px */
    --eluway-space-11: 4rem;     /* 64px */
    --eluway-space-12: 5rem;     /* 80px */
    --eluway-space-14: 6rem;     /* 96px */
    --eluway-space-16: 8rem;     /* 128px */

    /* ==========================================================================
       4. SHADOWS & ELEVATION (Material Design 3 inspired)
       ========================================================================== */

    --eluway-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --eluway-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --eluway-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --eluway-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --eluway-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --eluway-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Elevation system (MD3) */
    --eluway-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --eluway-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --eluway-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --eluway-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
    --eluway-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

    /* Glow shadows */
    --eluway-glow-primary: 0 0 20px rgba(168, 85, 247, 0.4);
    --eluway-glow-accent: 0 0 20px rgba(249, 115, 22, 0.4);
    --eluway-glow-success: 0 0 20px rgba(34, 197, 94, 0.4);

    /* ==========================================================================
       5. BORDERS & RADIUS
       ========================================================================== */

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

    --eluway-border-width: 1px;
    --eluway-border-width-2: 2px;

    /* ==========================================================================
       6. MOTION & ANIMATION
       ========================================================================== */

    --eluway-transition-fast: 150ms;
    --eluway-transition-base: 200ms;
    --eluway-transition-slow: 300ms;
    --eluway-transition-slower: 500ms;

    --eluway-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --eluway-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --eluway-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --eluway-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --eluway-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Motion (MD3) */
    --eluway-motion-standard: cubic-bezier(0.2, 0, 0, 1);
    --eluway-motion-duration-short: 150ms;
    --eluway-motion-duration-medium: 250ms;
    --eluway-motion-duration-long: 400ms;

    /* ==========================================================================
       7. Z-INDEX
       ========================================================================== */

    --eluway-z-dropdown: 1000;
    --eluway-z-sticky: 1020;
    --eluway-z-fixed: 1030;
    --eluway-z-modal-backdrop: 1040;
    --eluway-z-modal: 1050;
    --eluway-z-popover: 1060;
    --eluway-z-tooltip: 1070;

    /* ==========================================================================
       8. CONTAINER WIDTHS
       ========================================================================== */

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

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */

[data-theme="dark"],
.dark {
    /* Surface colors flip */
    --eluway-bg: var(--eluway-surface-950);
    --eluway-bg-secondary: var(--eluway-surface-900);
    --eluway-bg-tertiary: var(--eluway-surface-800);
    --eluway-text: var(--eluway-surface-50);
    --eluway-text-secondary: var(--eluway-surface-300);
    --eluway-text-muted: var(--eluway-surface-500);
    --eluway-border: var(--eluway-surface-700);
    --eluway-border-light: var(--eluway-surface-800);

    /* Darker elevation shadows for dark mode */
    --eluway-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
    --eluway-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.4);
    --eluway-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.4);
    --eluway-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.4);
    --eluway-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, 0.4);
}