/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — ImportControl Design System
   Modernized Fluent Enterprise SaaS
   ═══════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ── */
    --brand-primary: #0078D4;
    --brand-hover: #106EBE;
    --brand-active: #005A9E;
    --brand-deep: #004578;
    --brand-light: #2B88D8;
    --brand-soft: #71AFE5;
    --brand-muted: #C7E0F4;
    --brand-wash: #DEECF9;
    --brand-bg: rgba(0, 120, 212, 0.06);
    --brand-bg-hover: rgba(0, 120, 212, 0.10);
    --brand-bg-selected: rgba(0, 120, 212, 0.14);

    /* ── Neutral Palette ── */
    --gray-900: #1B1A19;
    --gray-800: #323130;
    --gray-700: #484644;
    --gray-600: #605E5C;
    --gray-500: #8E8C8A;
    --gray-400: #A19F9D;
    --gray-300: #C8C6C4;
    --gray-200: #D0CECD;
    --gray-150: #E1DFDD;
    --gray-100: #E8E6E4;
    --gray-75: #EDEBE9;
    --gray-50: #F3F2F1;
    --gray-25: #F8F7F6;
    --white: #FFFFFF;

    /* ── Semantic Text ── */
    --text-primary: #323130;
    --text-secondary: #605E5C;
    --text-muted: #8E8C8A;
    --text-disabled: #A19F9D;
    --text-inverse: #FFFFFF;

    /* ── Semantic Surfaces ── */
    --surface-page: #F8F7F6;
    --surface-card: #FFFFFF;
    --surface-raised: #FAF9F8;
    --surface-overlay: #F3F2F1;
    --surface-hover: #F5F5F5;
    --surface-active: #EDEBE9;
    --surface-selected: #EDF4FC;

    /* ── Semantic Borders ── */
    --border-subtle: #E8E6E4;
    --border-default: #D0CECD;
    --border-strong: #A19F9D;
    --border-focus: var(--brand-primary);

    /* ── Semantic Colors ── */
    --success: #107C10;
    --success-bg: #DFF6DD;
    --success-text: #0B6A0B;
    --warning: #FFB900;
    --warning-bg: #FFF4CE;
    --warning-text: #835C00;
    --danger: #D13438;
    --danger-bg: #FDE7E9;
    --danger-text: #A4262C;
    --info: #0078D4;
    --info-bg: #DEECF9;
    --info-text: #004578;

    /* ── Border Radius ── */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.20), 0 8px 20px rgba(0, 0, 0, 0.08);

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

    /* ── Font Sizes ── */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;

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

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

    /* ── Spacing Scale (4px grid) ── */
    --space-0: 0px;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Transitions ── */
    --duration-fast: 100ms;
    --duration-normal: 150ms;
    --duration-slow: 200ms;
    --duration-slower: 300ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --transition-fast: var(--duration-fast) var(--ease-default);
    --transition: var(--duration-normal) var(--ease-default);
    --transition-slow: var(--duration-slow) var(--ease-default);
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ── */
    --z-base: 1;
    --z-sticky: 10;
    --z-sidebar: 100;
    --z-overlay: 200;
    --z-modal: 1000;
    --z-toast: 10000;

    /* ── Layout ── */
    --sidebar-width: 260px;
    --topbar-height: 52px;
    --content-padding: 24px;
    --content-padding-mobile: 16px;
}