/* ============================================
   ImportPanel v5.0 - Design Tokens
   Minimal Brutalist · Navy + Amber · Plus Jakarta Sans
   ============================================ */

:root {

    /* ===========================================
       COLORS - Light Theme (warm, clean)
       =========================================== */
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-alt: #f0f2f6;
    --color-border: #dfe3ea;
    --color-border-light: #ebeef3;

    --color-text: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #9ca3af;
    --color-text-light: #ffffff;

    --color-primary: #1e3a5f;
    --color-primary-rgb: 30, 58, 95;
    --color-primary-hover: #2a4f7f;
    --color-primary-light: #edf2f7;
    --color-primary-dark: #162d4a;

    --color-bg-hover: rgba(0, 0, 0, 0.025);
    --color-border-dark: #c8cdd5;

    --color-accent: #d97706;
    --color-accent-light: #fef3c7;

    --color-success: #059669;
    --color-success-hover: #047857;
    --color-success-light: #ecfdf5;
    --color-warning: #d97706;
    --color-warning-light: #fffbeb;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-light: #fef2f2;
    --color-info: #0284c7;
    --color-info-light: #e0f2fe;
    --color-bg-secondary: #f1f3f7;

    /* --- Status Colors --- */
    --color-status-planning: #3b82f6;
    --color-status-planning-light: rgba(59, 130, 246, 0.08);
    --color-status-planning-hover: rgba(59, 130, 246, 0.04);
    --color-status-transit: #f59e0b;
    --color-status-transit-light: rgba(245, 158, 11, 0.08);
    --color-status-transit-hover: rgba(245, 158, 11, 0.04);
    --color-status-customs: #8b5cf6;
    --color-status-customs-light: rgba(139, 92, 246, 0.08);
    --color-status-customs-hover: rgba(139, 92, 246, 0.04);
    --color-status-delivered: #10b981;
    --color-status-delivered-light: rgba(16, 185, 129, 0.08);
    --color-status-delivered-hover: rgba(16, 185, 129, 0.04);

    /* --- Overlay / Backdrop --- */
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.25);
    --color-focus-ring: rgba(30, 58, 95, 0.4);

    /* ===========================================
       SIDEBAR
       =========================================== */
    --sidebar-bg: #ffffff;
    --sidebar-text: #6b7280;
    --sidebar-active-bg: #edf2f7;
    --sidebar-active-text: #1e3a5f;
    --sidebar-width: 260px;
    --sidebar-collapsed: 68px;
    --sidebar-border: #e5e7eb;

    /* ===========================================
       TOPBAR
       =========================================== */
    --topbar-height: 56px;
    --topbar-bg: #ffffff;

    /* ===========================================
       SPACING SCALE
       Consistent spacing for margins, padding, gaps
       =========================================== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* ===========================================
       SHADOWS
       Progressively deeper elevation levels
       =========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);

    /* ===========================================
       BORDER RADIUS - Brutalist (tight)
       =========================================== */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ===========================================
       TYPOGRAPHY SCALE
       Font sizes for consistent hierarchy
       =========================================== */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 32px;
    --font-4xl: 40px;

    /* --- Line Heights --- */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* --- Font Weights --- */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

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

    /* --- Font Families --- */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

    /* ===========================================
       Z-INDEX LAYERS
       Stacking context hierarchy
       =========================================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sidebar: 100;
    --z-sticky: 200;
    --z-topbar: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-tooltip: 500;
    --z-max: 9999;

    /* ===========================================
       ANIMATION DURATIONS
       =========================================== */
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    /* ===========================================
       TRANSITIONS
       Shorthand transition properties
       =========================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-smooth: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);

    /* --- Easing Functions --- */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 0.5);
    --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.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ===========================================
       LAYOUT & SIZING
       Common widths, heights, breakpoints
       =========================================== */
    --content-max-width: 1400px;
    --form-input-height: 38px;
    --form-input-height-sm: 32px;
    --form-input-height-lg: 44px;
    --touch-target-min: 44px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;

    /* --- Breakpoints (reference only, CSS cannot use vars in @media) --- */
    /* --bp-xs: 480px;  */
    /* --bp-sm: 640px;  */
    /* --bp-md: 768px;  */
    /* --bp-lg: 900px;  */
    /* --bp-xl: 1300px; */

    /* ===========================================
       BORDERS
       =========================================== */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-style: solid;
    --border-default: var(--border-width) var(--border-style) var(--color-border);
    --border-light: var(--border-width) var(--border-style) var(--color-border-light);

    /* ===========================================
       OPACITY SCALE
       =========================================== */
    --opacity-disabled: 0.5;
    --opacity-muted: 0.7;
    --opacity-hover: 0.04;
    --opacity-active: 0.08;
}