/* ========================================
   ATSK TRANSPORT WEB - DESIGN TOKENS
   Unified design system variables

   This file consolidates all CSS custom properties
   from across the application into a single source
   of truth for the design system.

   USAGE: Import this file FIRST in your CSS bundle
   ======================================== */

:root {
    /* ========================================
       COLOR PALETTE
       ======================================== */

    /* Primary Brand Colors */
    --color-primary: #1A7CCA;
    --color-primary-hover: #1568A8;
    --color-primary-active: #0F4F7F;
    --color-primary-light: #EBF5FF;
    --color-primary-dark: #1363A3;

    /* Secondary/Accent Colors */
    --color-accent: #3B82F6;
    --color-accent-hover: #2563EB;
    --color-accent-light: #DBEAFE;
    --color-purple: #8B5CF6;
    --color-purple-light: #EDE9FE;

    /* Semantic Accent Colors (for zones, badges, indicators) */
    --color-teal: #0D9488;
    --color-teal-dark: #0F766E;
    --color-teal-light: #CCFBF1;
    --color-emerald: #10B981;
    --color-emerald-dark: #059669;
    --color-emerald-light: #D1FAE5;
    --color-amber: #F59E0B;
    --color-amber-dark: #D97706;
    --color-amber-deeper: #B45309;
    --color-amber-darker: #92400E;
    --color-amber-light: #FEF3C7;
    --color-violet: #8B5CF6;
    --color-violet-dark: #7C3AED;
    --color-violet-deeper: #9333EA;
    --color-violet-light: #EDE9FE;
    --color-slate: #64748B;
    --color-slate-dark: #4B5563;
    --color-slate-darker: #475569;
    --color-slate-light: #F1F5F9;
    --color-rose: #EC4899;
    --color-rose-dark: #DB2777;
    --color-rose-deeper: #BE185D;
    --color-rose-light: #FCE7F3;
    --color-rose-lighter: #FDF2F8;
    --color-indigo: #6366F1;
    --color-indigo-dark: #4F46E5;
    --color-indigo-deeper: #4338CA;
    --color-indigo-light: #E0E7FF;
    --color-indigo-lighter: #EEF2FF;
    --color-blue-400: #60A5FA;
    --color-emerald-deeper: #065F46;
    --color-violet-deepest: #6D28D9;

    /* Neutral/Dark Colors */
    --color-dark: #0F172A;
    --color-dark-secondary: #1E293B;
    --color-dark-tertiary: #334155;
    --color-dark-legacy: #1D1D1B;

    /* Text Colors */
    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-muted: #94A3B8;
    --color-text-light: #CBD5E1;
    --color-text-inverse: #FFFFFF;

    /* Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F8FAFC;
    --color-bg-tertiary: #F1F5F9;
    --color-bg-page: #F0F4F8;
    --color-bg-hover: rgba(255, 255, 255, 0.08);

    /* Border Colors */
    --color-border-primary: #E2E8F0;
    --color-border-secondary: #CBD5E1;
    --color-border-light: #F1F5F9;
    --color-border-focus: var(--color-primary);

    /* Status Colors - Success */
    --color-success: #059669;
    --color-success-light: #ECFDF5;
    --color-success-border: #A7F3D0;
    --color-success-dark: #047857;

    /* Status Colors - Warning */
    --color-warning: #D97706;
    --color-warning-light: #FFFBEB;
    --color-warning-border: #FCD34D;
    --color-warning-dark: #B45309;

    /* Status Colors - Error */
    --color-error: #DC2626;
    --color-error-bright: #EF4444;
    --color-error-light: #FEF2F2;
    --color-error-border: #FECACA;
    --color-error-dark: #B91C1C;

    /* Status Colors - Info */
    --color-info: #2563EB;
    --color-info-dark: #1D4ED8;
    --color-info-light: #EFF6FF;
    --color-info-border: #BFDBFE;

    /* ========================================
       GLASSMORPHISM / LIQUID GLASS SYSTEM
       Apple-inspired frosted glass surfaces
       ======================================== */

    --glass-bg: rgba(255, 255, 255, 0.60);
    --glass-bg-heavy: rgba(255, 255, 255, 0.78);
    --glass-bg-light: rgba(255, 255, 255, 0.42);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-border-subtle: rgba(0, 0, 0, 0.04);
    --glass-blur: blur(40px);
    --glass-blur-heavy: blur(64px);
    --glass-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    --glass-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.03);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.03);

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    /* Font Family */
    --font-family-base: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Helvetica Neue', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    --font-family-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Font Sizes */
    --font-size-xs: 0.6875rem;   /* 11px */
    --font-size-sm: 0.8125rem;   /* 13px */
    --font-size-base: 0.9375rem; /* 15px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.75rem;    /* 28px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 2.75rem;    /* 44px - hero titles */

    /* Font Weights — Apple prefers lighter hierarchy */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    --font-weight-extrabold: 700;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Letter Spacing — Apple-style negative tracking */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: -0.01em;
    --letter-spacing-wide: 0.06em;
    --letter-spacing-display: -0.03em;

    /* ========================================
       TABLE TYPOGRAPHY (Enterprise)
       Single source of truth for table sizing/weight across the app.
       ======================================== */
    --table-header-font-size: 12px;
    --table-header-font-weight: 500;
    --table-body-font-size: 13px;
    --table-body-font-weight: 400;
    --table-line-height: 1.4;
    --table-letter-spacing: var(--letter-spacing-normal);

    /* ========================================
       SPACING SYSTEM (4px base unit)
       ======================================== */

    --space-0: 0;
    --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-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */

    /* ========================================
       BORDER RADIUS
       ======================================== */

    /* Border Radius — Apple-forward, generous rounding */
    --radius-none: 0;
    --radius-sm: 0.5rem;    /* 8px */
    --radius-md: 0.75rem;   /* 12px */
    --radius-lg: 1rem;      /* 16px */
    --radius-xl: 1.25rem;   /* 20px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-3xl: 2rem;     /* 32px */
    --radius-full: 9999px;
    --radius-pill: 100px;

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-xs: 0 0.5px 1px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px -6px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.10);
    --shadow-2xl: 0 24px 56px -12px rgba(0, 0, 0, 0.14);

    /* Float Shadows — Apple 2026 minimal depth */
    --shadow-float: 0 2px 12px -2px rgba(0, 0, 0, 0.05);
    --shadow-float-hover: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
    --shadow-float-elevated: 0 8px 32px -6px rgba(0, 0, 0, 0.10);

    /* Colored Shadows — subtle, not glowing */
    --shadow-primary: 0 2px 10px rgba(26, 124, 202, 0.15);
    --shadow-primary-lg: 0 4px 16px rgba(26, 124, 202, 0.20);
    --shadow-accent: 0 2px 10px rgba(59, 130, 246, 0.15);
    --shadow-accent-lg: 0 4px 16px rgba(59, 130, 246, 0.20);
    --shadow-error: 0 2px 10px rgba(220, 38, 38, 0.15);

    /* Focus Shadow — Apple-style thin ring */
    --shadow-focus: 0 0 0 3px rgba(26, 124, 202, 0.18);
    --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.18);

    /* ========================================
       TRANSITIONS & ANIMATION
       ======================================== */

    --transition-fast: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-normal: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-slow: 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slower: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --transition-bounce: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-page: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-apple: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-apple-fast: 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* ========================================
       COMPONENT-SPECIFIC TOKENS
       ======================================== */

    /* ========================================
       BUTTON SYSTEM
       Standardized button colors for enterprise consistency
       Primary action color: #1A7CCA (ATSK Blue)
       ======================================== */

    /* Button Heights */
    --btn-height-xs: 2rem;       /* 32px */
    --btn-height-sm: 2.25rem;    /* 36px */
    --btn-height-md: 2.75rem;    /* 44px */
    --btn-height-lg: 3rem;       /* 48px */
    --btn-height-xl: 3.25rem;    /* 52px */

    /* Primary Button (Main CTAs) */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: var(--color-primary-hover);
    --btn-primary-bg-active: var(--color-primary-active);
    --btn-primary-text: #FFFFFF;
    --btn-primary-shadow: 0 4px 14px rgba(26, 124, 202, 0.25);
    --btn-primary-shadow-hover: 0 6px 20px rgba(26, 124, 202, 0.35);

    /* Secondary Button (Outline style) */
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-bg-hover: var(--color-primary-light);
    --btn-secondary-text: var(--color-primary);
    --btn-secondary-border: var(--color-primary);
    --btn-secondary-border-hover: var(--color-primary-hover);

    /* Tertiary Button (Ghost/subtle) */
    --btn-tertiary-bg: transparent;
    --btn-tertiary-bg-hover: var(--color-bg-tertiary);
    --btn-tertiary-text: var(--color-text-secondary);
    --btn-tertiary-text-hover: var(--color-text-primary);
    --btn-tertiary-border: var(--color-border-primary);

    /* Danger Button */
    --btn-danger-bg: var(--color-error);
    --btn-danger-bg-hover: var(--color-error-dark);
    --btn-danger-text: #FFFFFF;
    --btn-danger-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);

    /* Success Button */
    --btn-success-bg: var(--color-success);
    --btn-success-bg-hover: var(--color-success-dark);
    --btn-success-text: #FFFFFF;
    --btn-success-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);

    /* Disabled Button State */
    --btn-disabled-opacity: 0.5;
    --btn-disabled-cursor: not-allowed;

    /* Form Inputs */
    --input-height-sm: 2.25rem;  /* 36px */
    --input-height-md: 2.75rem;  /* 44px */
    --input-height-lg: 3rem;     /* 48px */
    --input-height-xl: 3.5rem;   /* 56px */

    /* Cards */
    --card-padding-sm: var(--space-4);
    --card-padding-md: var(--space-6);
    --card-padding-lg: var(--space-8);

    /* Sidebar */
    --sidebar-width-full: 280px;
    --sidebar-width-collapsed: 72px;
    --sidebar-bg: var(--color-dark);
    --sidebar-bg-secondary: var(--color-dark-secondary);

    /* Topbar */
    --topbar-height: 56px;
    --topbar-height-mobile: 56px;

    /* ========================================
       GRADIENTS
       ======================================== */

    /* Primary gradient uses ATSK Blue for consistency */
    --gradient-primary: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    --gradient-dark: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-secondary) 100%);
    --gradient-page: linear-gradient(180deg, #EBF0F7 0%, #F4F6F9 40%, #F8FAFC 100%);
    --gradient-success: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    --gradient-error: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    --gradient-warning: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    --gradient-info: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    --gradient-neutral: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);

    /* Page background — Apple 2026: clean, flat, no colored mesh */
    --gradient-mesh: linear-gradient(180deg, #F5F5F7 0%, #FAFAFA 100%);

    /* ========================================
       BREAKPOINTS (for reference in JS)
       CSS media queries should use direct values
       ======================================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}

/* ========================================
   DARK MODE
   Activated via [data-theme="dark"] on <html>
   ======================================== */
[data-theme="dark"] {
    --color-bg-primary: #0F172A;
    --color-bg-secondary: #1E293B;
    --color-bg-tertiary: #334155;
    --color-bg-page: #0B1120;
    --color-bg-hover: rgba(255, 255, 255, 0.06);

    --color-text-primary: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;
    --color-text-light: #475569;
    --color-text-inverse: #0F172A;

    --color-border-primary: rgba(255, 255, 255, 0.08);
    --color-border-secondary: rgba(255, 255, 255, 0.12);
    --color-border-light: rgba(255, 255, 255, 0.04);

    --color-primary-light: rgba(26, 124, 202, 0.15);

    --color-success-light: rgba(5, 150, 105, 0.12);
    --color-warning-light: rgba(217, 119, 6, 0.12);
    --color-error-light: rgba(220, 38, 38, 0.12);
    --color-info-light: rgba(37, 99, 235, 0.12);

    /* Accent colors for dark mode */
    --color-teal-light: rgba(13, 148, 136, 0.15);
    --color-emerald-light: rgba(16, 185, 129, 0.15);
    --color-amber-light: rgba(245, 158, 11, 0.15);
    --color-violet-light: rgba(139, 92, 246, 0.15);
    --color-slate-light: rgba(100, 116, 139, 0.15);

    /* Glass for dark mode */
    --glass-bg: rgba(20, 22, 28, 0.65);
    --glass-bg-heavy: rgba(20, 22, 28, 0.82);
    --glass-bg-light: rgba(30, 33, 40, 0.50);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-subtle: rgba(255, 255, 255, 0.04);
    --glass-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    --glass-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.25);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.30);

    /* Float Shadows for dark mode */
    --shadow-float: 0 2px 12px -2px rgba(0, 0, 0, 0.18);
    --shadow-float-hover: 0 4px 20px -4px rgba(0, 0, 0, 0.25);
    --shadow-float-elevated: 0 8px 32px -6px rgba(0, 0, 0, 0.30);

    /* Shadows for dark mode */
    --shadow-xs: 0 0.5px 1px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 8px 24px -6px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.30);

    /* Buttons */
    --btn-secondary-bg: var(--color-bg-secondary);
    --btn-tertiary-bg-hover: var(--color-bg-tertiary);

    /* Gradients — dark mode: flat, no colored mesh */
    --gradient-page: linear-gradient(180deg, #111114 0%, #141418 100%);
    --gradient-mesh: linear-gradient(180deg, #111114 0%, #141418 100%);
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --transition-slower: 0s;
        --transition-smooth: 0s;
        --transition-spring: 0s;
        --transition-bounce: 0s;
        --transition-page: 0s;
    }
}