/* ============================================================
   WONDER APP — VENDOR APPLICATION
   File: /vendor_app/assets/css/variables.css

   Purpose:
   Global design tokens for the Vendor Application.

   Includes:
   - Brand colors
   - Semantic colors
   - Light / Dark theme
   - Typography
   - Spacing
   - Border radius
   - Shadows
   - Layout dimensions
   - Z-index
   - Breakpoints
   - Transitions
   - Form controls
   - Tables
   - Status colors
   - Component tokens
   ============================================================ */


/* ============================================================
   1. ROOT / GLOBAL TOKENS
   ============================================================ */

:root {

    /* --------------------------------------------------------
       Brand
       -------------------------------------------------------- */

    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-primary-active: #1e40af;
    --brand-primary-light: #dbeafe;
    --brand-primary-soft: #eff6ff;

    --brand-secondary: #0f172a;
    --brand-secondary-hover: #1e293b;
    --brand-secondary-light: #334155;
    --brand-secondary-soft: #f1f5f9;

    --brand-accent: #f59e0b;
    --brand-accent-hover: #d97706;
    --brand-accent-light: #fef3c7;

    /* --------------------------------------------------------
       Base Palette
       -------------------------------------------------------- */

    --white: #ffffff;
    --black: #000000;

    --gray-25: #fcfcfd;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* --------------------------------------------------------
       Blue
       -------------------------------------------------------- */

    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* --------------------------------------------------------
       Green
       -------------------------------------------------------- */

    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;

    /* --------------------------------------------------------
       Red
       -------------------------------------------------------- */

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;

    /* --------------------------------------------------------
       Orange
       -------------------------------------------------------- */

    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;

    /* --------------------------------------------------------
       Yellow
       -------------------------------------------------------- */

    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-200: #fef08a;
    --yellow-300: #fde047;
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --yellow-600: #ca8a04;
    --yellow-700: #a16207;
    --yellow-800: #854d0e;
    --yellow-900: #713f12;

    /* --------------------------------------------------------
       Purple
       -------------------------------------------------------- */

    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;

    /* --------------------------------------------------------
       Cyan
       -------------------------------------------------------- */

    --cyan-50: #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --cyan-900: #164e63;


    /* ========================================================
       2. SEMANTIC COLORS — LIGHT THEME
       ======================================================== */

    /* Page */
    --color-bg: #f8fafc;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1f5f9;

    /* Surface */
    --color-surface: #ffffff;
    --color-surface-hover: #f8fafc;
    --color-surface-active: #f1f5f9;
    --color-surface-raised: #ffffff;

    /* Text */
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;
    --color-text-disabled: #cbd5e1;
    --color-text-inverse: #ffffff;

    /* Border */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-dark: #cbd5e1;
    --color-border-focus: var(--brand-primary);

    /* Primary */
    --color-primary: var(--brand-primary);
    --color-primary-hover: var(--brand-primary-hover);
    --color-primary-active: var(--brand-primary-active);
    --color-primary-light: var(--brand-primary-light);
    --color-primary-soft: var(--brand-primary-soft);

    /* Success */
    --color-success: var(--green-600);
    --color-success-hover: var(--green-700);
    --color-success-light: var(--green-100);
    --color-success-soft: var(--green-50);

    /* Danger */
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-light: var(--red-100);
    --color-danger-soft: var(--red-50);

    /* Warning */
    --color-warning: var(--orange-600);
    --color-warning-hover: var(--orange-700);
    --color-warning-light: var(--orange-100);
    --color-warning-soft: var(--orange-50);

    /* Info */
    --color-info: var(--cyan-600);
    --color-info-hover: var(--cyan-700);
    --color-info-light: var(--cyan-100);
    --color-info-soft: var(--cyan-50);

    /* Neutral */
    --color-neutral: var(--gray-600);
    --color-neutral-light: var(--gray-100);
    --color-neutral-soft: var(--gray-50);


    /* ========================================================
       3. STATUS COLORS
       ======================================================== */

    /* Lead */
    --status-lead-new: #2563eb;
    --status-lead-new-bg: #eff6ff;

    --status-lead-assigned: #7c3aed;
    --status-lead-assigned-bg: #f5f3ff;

    --status-lead-accepted: #16a34a;
    --status-lead-accepted-bg: #f0fdf4;

    --status-lead-rejected: #dc2626;
    --status-lead-rejected-bg: #fef2f2;

    --status-lead-converted: #059669;
    --status-lead-converted-bg: #ecfdf5;

    --status-lead-lost: #64748b;
    --status-lead-lost-bg: #f8fafc;

    /* Enquiry */
    --status-enquiry-pending: #f59e0b;
    --status-enquiry-pending-bg: #fffbeb;

    --status-enquiry-responded: #2563eb;
    --status-enquiry-responded-bg: #eff6ff;

    --status-enquiry-closed: #64748b;
    --status-enquiry-closed-bg: #f8fafc;

    --status-enquiry-spam: #dc2626;
    --status-enquiry-spam-bg: #fef2f2;

    /* Quote */
    --status-quote-draft: #64748b;
    --status-quote-draft-bg: #f8fafc;

    --status-quote-sent: #2563eb;
    --status-quote-sent-bg: #eff6ff;

    --status-quote-pending: #f59e0b;
    --status-quote-pending-bg: #fffbeb;

    --status-quote-accepted: #16a34a;
    --status-quote-accepted-bg: #f0fdf4;

    --status-quote-rejected: #dc2626;
    --status-quote-rejected-bg: #fef2f2;

    --status-quote-expired: #7c3aed;
    --status-quote-expired-bg: #f5f3ff;

    /* Order */
    --status-order-pending: #f59e0b;
    --status-order-pending-bg: #fffbeb;

    --status-order-confirmed: #2563eb;
    --status-order-confirmed-bg: #eff6ff;

    --status-order-progress: #7c3aed;
    --status-order-progress-bg: #f5f3ff;

    --status-order-completed: #16a34a;
    --status-order-completed-bg: #f0fdf4;

    --status-order-cancelled: #dc2626;
    --status-order-cancelled-bg: #fef2f2;

    --status-order-refunded: #0891b2;
    --status-order-refunded-bg: #ecfeff;


    /* ========================================================
       4. TYPOGRAPHY
       ======================================================== */

    --font-family-sans:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-heading:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    /* Font sizes */
    --font-size-2xs: 0.6875rem;   /* 11px */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --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.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */

    /* Line height */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Letter spacing */
    --letter-spacing-tighter: -0.025em;
    --letter-spacing-tight: -0.015em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;


    /* ========================================================
       5. SPACING
       ======================================================== */

    --space-0: 0;
    --space-px: 1px;

    --space-0-5: 0.125rem;   /* 2px */
    --space-1: 0.25rem;      /* 4px */
    --space-1-5: 0.375rem;   /* 6px */
    --space-2: 0.5rem;       /* 8px */
    --space-2-5: 0.625rem;   /* 10px */
    --space-3: 0.75rem;      /* 12px */
    --space-3-5: 0.875rem;   /* 14px */
    --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 */


    /* ========================================================
       6. BORDER RADIUS
       ======================================================== */

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


    /* ========================================================
       7. BORDERS
       ======================================================== */

    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;

    --border-default: 1px solid var(--color-border);
    --border-light: 1px solid var(--color-border-light);
    --border-dark: 1px solid var(--color-border-dark);
    --border-focus: 2px solid var(--color-border-focus);


    /* ========================================================
       8. SHADOWS
       ======================================================== */

    --shadow-none: none;

    --shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --shadow-sm:
        0 1px 3px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.04);

    --shadow-md:
        0 4px 6px rgba(15, 23, 42, 0.07),
        0 2px 4px rgba(15, 23, 42, 0.05);

    --shadow-lg:
        0 10px 15px rgba(15, 23, 42, 0.08),
        0 4px 6px rgba(15, 23, 42, 0.05);

    --shadow-xl:
        0 20px 25px rgba(15, 23, 42, 0.10),
        0 8px 10px rgba(15, 23, 42, 0.05);

    --shadow-2xl:
        0 25px 50px rgba(15, 23, 42, 0.15);

    --shadow-inner:
        inset 0 2px 4px rgba(15, 23, 42, 0.06);

    --shadow-card:
        0 1px 3px rgba(15, 23, 42, 0.06);

    --shadow-dropdown:
        0 10px 30px rgba(15, 23, 42, 0.12);

    --shadow-modal:
        0 20px 60px rgba(15, 23, 42, 0.20);

    --shadow-focus:
        0 0 0 3px rgba(37, 99, 235, 0.15);


    /* ========================================================
       9. LAYOUT DIMENSIONS
       ======================================================== */

    --sidebar-width: 260px;
    --sidebar-width-collapsed: 72px;
    --sidebar-width-mobile: 280px;

    --topbar-height: 64px;
    --header-height: 64px;

    --footer-height: 56px;

    --content-max-width: 1440px;
    --content-width-wide: 1600px;
    --content-width-medium: 1200px;
    --content-width-small: 960px;

    --page-padding-x: 24px;
    --page-padding-y: 24px;

    --mobile-page-padding-x: 16px;
    --mobile-page-padding-y: 16px;

    --section-gap: 32px;
    --card-gap: 24px;
    --grid-gap: 24px;

    --form-max-width: 720px;
    --form-field-height: 44px;

    --button-height-sm: 34px;
    --button-height-md: 40px;
    --button-height-lg: 48px;
    --button-height-xl: 54px;

    --input-height-sm: 36px;
    --input-height-md: 42px;
    --input-height-lg: 48px;

    --table-row-height: 56px;

    --avatar-xs: 24px;
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 48px;
    --avatar-xl: 64px;
    --avatar-2xl: 96px;


    /* ========================================================
       10. COMPONENT DIMENSIONS
       ======================================================== */

    /* Cards */
    --card-padding: 24px;
    --card-padding-sm: 16px;
    --card-padding-lg: 32px;
    --card-radius: var(--radius-xl);
    --card-border: var(--border-default);
    --card-shadow: var(--shadow-card);

    /* Modal */
    --modal-width-sm: 400px;
    --modal-width-md: 560px;
    --modal-width-lg: 720px;
    --modal-width-xl: 960px;
    --modal-width-full: 1200px;

    --modal-padding: 24px;
    --modal-radius: var(--radius-2xl);

    /* Dropdown */
    --dropdown-min-width: 180px;
    --dropdown-max-width: 360px;
    --dropdown-padding: 6px;
    --dropdown-radius: var(--radius-lg);

    /* Toast */
    --toast-width: 380px;
    --toast-radius: var(--radius-lg);

    /* Navigation */
    --nav-item-height: 42px;
    --nav-item-radius: var(--radius-md);

    /* Sidebar */
    --sidebar-item-padding-x: 14px;
    --sidebar-item-padding-y: 10px;


    /* ========================================================
       11. Z-INDEX SYSTEM
       ======================================================== */

    --z-base: 0;

    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;

    --z-sidebar: 1300;
    --z-topbar: 1400;

    --z-overlay: 1500;
    --z-modal: 1600;

    --z-popover: 1700;
    --z-tooltip: 1800;

    --z-toast: 1900;

    --z-loader: 2000;

    --z-max: 9999;


    /* ========================================================
       12. TRANSITIONS
       ======================================================== */

    --transition-fast:
        120ms ease;

    --transition-normal:
        200ms ease;

    --transition-medium:
        250ms ease;

    --transition-slow:
        350ms ease;

    --transition-colors:
        color 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease;

    --transition-transform:
        transform 200ms ease;

    --transition-shadow:
        box-shadow 200ms ease;

    --transition-all:
        all 200ms ease;


    /* ========================================================
       13. OPACITY
       ======================================================== */

    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-100: 1;


    /* ========================================================
       14. FOCUS
       ======================================================== */

    --focus-ring-width: 3px;
    --focus-ring-color: rgba(37, 99, 235, 0.18);
    --focus-ring:
        0 0 0 var(--focus-ring-width) var(--focus-ring-color);


    /* ========================================================
       15. FORM TOKENS
       ======================================================== */

    --input-bg: var(--color-surface);
    --input-bg-disabled: var(--gray-100);

    --input-text: var(--color-text);
    --input-placeholder: var(--color-text-muted);

    --input-border: var(--color-border);
    --input-border-hover: var(--gray-300);
    --input-border-focus: var(--brand-primary);

    --input-radius: var(--radius-md);

    --input-padding-x: 12px;
    --input-padding-y: 10px;

    --label-color: var(--color-text);
    --label-font-size: var(--font-size-sm);
    --label-font-weight: var(--font-weight-medium);

    --help-text-color: var(--color-text-muted);
    --help-text-size: var(--font-size-xs);

    --error-text-color: var(--color-danger);

    --checkbox-size: 18px;
    --radio-size: 18px;


    /* ========================================================
       16. BUTTON TOKENS
       ======================================================== */

    --button-radius: var(--radius-md);

    --button-font-size: var(--font-size-sm);
    --button-font-weight: var(--font-weight-semibold);

    --button-padding-x: 16px;
    --button-padding-y: 10px;

    --button-primary-bg: var(--brand-primary);
    --button-primary-color: var(--white);
    --button-primary-hover: var(--brand-primary-hover);
    --button-primary-active: var(--brand-primary-active);

    --button-secondary-bg: var(--white);
    --button-secondary-color: var(--gray-700);
    --button-secondary-border: var(--gray-300);

    --button-danger-bg: var(--red-600);
    --button-danger-color: var(--white);

    --button-success-bg: var(--green-600);
    --button-success-color: var(--white);


    /* ========================================================
       17. TABLE TOKENS
       ======================================================== */

    --table-bg: var(--color-surface);
    --table-header-bg: var(--gray-50);
    --table-row-bg: var(--color-surface);
    --table-row-hover: var(--gray-50);
    --table-row-selected: var(--blue-50);

    --table-border: var(--color-border);

    --table-header-color: var(--gray-600);
    --table-cell-color: var(--color-text);

    --table-font-size: var(--font-size-sm);
    --table-header-font-weight: var(--font-weight-semibold);


    /* ========================================================
       18. SCROLLBAR
       ======================================================== */

    --scrollbar-size: 8px;
    --scrollbar-track: var(--gray-100);
    --scrollbar-thumb: var(--gray-300);
    --scrollbar-thumb-hover: var(--gray-400);


    /* ========================================================
       19. OVERLAY
       ======================================================== */

    --overlay-color: rgba(15, 23, 42, 0.55);
    --overlay-light: rgba(15, 23, 42, 0.25);
    --overlay-dark: rgba(2, 6, 23, 0.75);


    /* ========================================================
       20. SKELETON / LOADING
       ======================================================== */

    --skeleton-bg: var(--gray-200);
    --skeleton-highlight: var(--gray-100);

    --loader-size-sm: 20px;
    --loader-size-md: 32px;
    --loader-size-lg: 48px;


    /* ========================================================
       21. ICON SIZES
       ======================================================== */

    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 40px;


    /* ========================================================
       22. BREAKPOINTS
       ======================================================== */

    --breakpoint-xs: 360px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    --breakpoint-3xl: 1600px;


    /* ========================================================
       23. DASHBOARD TOKENS
       ======================================================== */

    --dashboard-card-min-height: 140px;

    --dashboard-stat-number-size: 28px;
    --dashboard-stat-label-size: 13px;

    --dashboard-chart-height: 320px;

    --dashboard-grid-min:
        240px;

    --dashboard-section-margin:
        var(--space-8);


    /* ========================================================
       24. SIDEBAR TOKENS
       ======================================================== */

    --sidebar-bg: #ffffff;
    --sidebar-border: var(--color-border);

    --sidebar-text: var(--gray-600);
    --sidebar-text-hover: var(--gray-900);
    --sidebar-text-active: var(--brand-primary);

    --sidebar-item-hover-bg: var(--gray-50);
    --sidebar-item-active-bg: var(--blue-50);

    --sidebar-icon-color: var(--gray-500);
    --sidebar-icon-active: var(--brand-primary);

    --sidebar-section-title:
        var(--gray-400);


    /* ========================================================
       25. TOPBAR TOKENS
       ======================================================== */

    --topbar-bg: #ffffff;
    --topbar-border: var(--color-border);

    --topbar-text: var(--color-text);
    --topbar-icon: var(--gray-600);

    --topbar-hover-bg: var(--gray-100);


    /* ========================================================
       26. NOTIFICATION TOKENS
       ======================================================== */

    --notification-unread-bg: var(--blue-50);
    --notification-hover-bg: var(--gray-50);

    --notification-badge-bg: var(--red-600);
    --notification-badge-color: var(--white);


    /* ========================================================
       27. AVATAR TOKENS
       ======================================================== */

    --avatar-bg: var(--blue-100);
    --avatar-color: var(--blue-700);

    --avatar-border: var(--white);


    /* ========================================================
       28. BADGE TOKENS
       ======================================================== */

    --badge-radius: var(--radius-full);
    --badge-font-size: var(--font-size-xs);
    --badge-font-weight: var(--font-weight-semibold);

    --badge-padding-x: 8px;
    --badge-padding-y: 4px;


    /* ========================================================
       29. PROGRESS TOKENS
       ======================================================== */

    --progress-height-sm: 4px;
    --progress-height-md: 8px;
    --progress-height-lg: 12px;

    --progress-bg: var(--gray-200);
    --progress-fill: var(--brand-primary);

    --progress-radius: var(--radius-full);


    /* ========================================================
       30. CHART COLORS
       ======================================================== */

    --chart-primary: #2563eb;
    --chart-secondary: #7c3aed;
    --chart-success: #16a34a;
    --chart-warning: #f59e0b;
    --chart-danger: #dc2626;
    --chart-info: #0891b2;

    --chart-grid: #e2e8f0;
    --chart-text: #64748b;


    /* ========================================================
       31. CONTENT / SAFE AREAS
       ======================================================== */

    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);


    /* ========================================================
       32. MOTION
       ======================================================== */

    --motion-distance-sm: 4px;
    --motion-distance-md: 8px;
    --motion-distance-lg: 16px;

    --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);


    /* ========================================================
       33. PRINT
       ======================================================== */

    --print-text: #000000;
    --print-bg: #ffffff;
}


/* ============================================================
   DARK THEME
   ============================================================

   Activate with:

   <html data-theme="dark">

   or:

   <body data-theme="dark">

   ============================================================ */

[data-theme="dark"] {

    /* --------------------------------------------------------
       Background
       -------------------------------------------------------- */

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

    /* --------------------------------------------------------
       Surface
       -------------------------------------------------------- */

    --color-surface: #0f172a;
    --color-surface-hover: #1e293b;
    --color-surface-active: #334155;
    --color-surface-raised: #1e293b;

    /* --------------------------------------------------------
       Text
       -------------------------------------------------------- */

    --color-text: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
    --color-text-disabled: #475569;
    --color-text-inverse: #0f172a;

    /* --------------------------------------------------------
       Border
       -------------------------------------------------------- */

    --color-border: #334155;
    --color-border-light: #1e293b;
    --color-border-dark: #475569;
    --color-border-focus: #60a5fa;

    /* --------------------------------------------------------
       Primary
       -------------------------------------------------------- */

    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-active: #2563eb;
    --color-primary-light: #1e3a8a;
    --color-primary-soft: #172554;

    /* --------------------------------------------------------
       Success
       -------------------------------------------------------- */

    --color-success: #4ade80;
    --color-success-hover: #22c55e;
    --color-success-light: #14532d;
    --color-success-soft: #052e16;

    /* --------------------------------------------------------
       Danger
       -------------------------------------------------------- */

    --color-danger: #f87171;
    --color-danger-hover: #ef4444;
    --color-danger-light: #7f1d1d;
    --color-danger-soft: #450a0a;

    /* --------------------------------------------------------
       Warning
       -------------------------------------------------------- */

    --color-warning: #fbbf24;
    --color-warning-hover: #f59e0b;
    --color-warning-light: #78350f;
    --color-warning-soft: #451a03;

    /* --------------------------------------------------------
       Info
       -------------------------------------------------------- */

    --color-info: #22d3ee;
    --color-info-hover: #06b6d4;
    --color-info-light: #164e63;
    --color-info-soft: #083344;

    /* --------------------------------------------------------
       Neutral
       -------------------------------------------------------- */

    --color-neutral: #94a3b8;
    --color-neutral-light: #334155;
    --color-neutral-soft: #1e293b;


    /* ========================================================
       DARK SIDEBAR
       ======================================================== */

    --sidebar-bg: #0f172a;
    --sidebar-border: #334155;

    --sidebar-text: #cbd5e1;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #60a5fa;

    --sidebar-item-hover-bg: #1e293b;
    --sidebar-item-active-bg: #172554;

    --sidebar-icon-color: #94a3b8;
    --sidebar-icon-active: #60a5fa;

    --sidebar-section-title: #64748b;


    /* ========================================================
       DARK TOPBAR
       ======================================================== */

    --topbar-bg: #0f172a;
    --topbar-border: #334155;

    --topbar-text: #f8fafc;
    --topbar-icon: #cbd5e1;

    --topbar-hover-bg: #1e293b;


    /* ========================================================
       DARK TABLE
       ======================================================== */

    --table-bg: #0f172a;
    --table-header-bg: #1e293b;
    --table-row-bg: #0f172a;
    --table-row-hover: #1e293b;
    --table-row-selected: #172554;

    --table-border: #334155;

    --table-header-color: #cbd5e1;
    --table-cell-color: #f8fafc;


    /* ========================================================
       DARK FORMS
       ======================================================== */

    --input-bg: #0f172a;
    --input-bg-disabled: #1e293b;

    --input-text: #f8fafc;
    --input-placeholder: #64748b;

    --input-border: #334155;
    --input-border-hover: #475569;
    --input-border-focus: #60a5fa;

    --label-color: #f8fafc;
    --help-text-color: #94a3b8;


    /* ========================================================
       DARK BUTTONS
       ======================================================== */

    --button-secondary-bg: #1e293b;
    --button-secondary-color: #f8fafc;
    --button-secondary-border: #475569;


    /* ========================================================
       DARK SCROLLBAR
       ======================================================== */

    --scrollbar-track: #0f172a;
    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748b;


    /* ========================================================
       DARK SKELETON
       ======================================================== */

    --skeleton-bg: #334155;
    --skeleton-highlight: #475569;


    /* ========================================================
       DARK CHART
       ======================================================== */

    --chart-grid: #334155;
    --chart-text: #94a3b8;


    /* ========================================================
       DARK OVERLAY
       ======================================================== */

    --overlay-color: rgba(0, 0, 0, 0.65);
    --overlay-light: rgba(0, 0, 0, 0.40);
    --overlay-dark: rgba(0, 0, 0, 0.85);
}


/* ============================================================
   SYSTEM DARK MODE

   Works automatically when no explicit data-theme is set.
   Explicit [data-theme="light"] takes priority.
   ============================================================ */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) {

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

        --color-surface: #0f172a;
        --color-surface-hover: #1e293b;
        --color-surface-active: #334155;
        --color-surface-raised: #1e293b;

        --color-text: #f8fafc;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-subtle: #64748b;
        --color-text-disabled: #475569;
        --color-text-inverse: #0f172a;

        --color-border: #334155;
        --color-border-light: #1e293b;
        --color-border-dark: #475569;
        --color-border-focus: #60a5fa;

        --color-primary: #3b82f6;
        --color-primary-hover: #60a5fa;
        --color-primary-active: #2563eb;
        --color-primary-light: #1e3a8a;
        --color-primary-soft: #172554;

        --color-success: #4ade80;
        --color-success-hover: #22c55e;
        --color-success-light: #14532d;
        --color-success-soft: #052e16;

        --color-danger: #f87171;
        --color-danger-hover: #ef4444;
        --color-danger-light: #7f1d1d;
        --color-danger-soft: #450a0a;

        --color-warning: #fbbf24;
        --color-warning-hover: #f59e0b;
        --color-warning-light: #78350f;
        --color-warning-soft: #451a03;

        --color-info: #22d3ee;
        --color-info-hover: #06b6d4;
        --color-info-light: #164e63;
        --color-info-soft: #083344;

        --color-neutral: #94a3b8;
        --color-neutral-light: #334155;
        --color-neutral-soft: #1e293b;

        --sidebar-bg: #0f172a;
        --sidebar-border: #334155;
        --sidebar-text: #cbd5e1;
        --sidebar-text-hover: #ffffff;
        --sidebar-text-active: #60a5fa;
        --sidebar-item-hover-bg: #1e293b;
        --sidebar-item-active-bg: #172554;
        --sidebar-icon-color: #94a3b8;
        --sidebar-icon-active: #60a5fa;
        --sidebar-section-title: #64748b;

        --topbar-bg: #0f172a;
        --topbar-border: #334155;
        --topbar-text: #f8fafc;
        --topbar-icon: #cbd5e1;
        --topbar-hover-bg: #1e293b;

        --table-bg: #0f172a;
        --table-header-bg: #1e293b;
        --table-row-bg: #0f172a;
        --table-row-hover: #1e293b;
        --table-row-selected: #172554;
        --table-border: #334155;
        --table-header-color: #cbd5e1;
        --table-cell-color: #f8fafc;

        --input-bg: #0f172a;
        --input-bg-disabled: #1e293b;
        --input-text: #f8fafc;
        --input-placeholder: #64748b;
        --input-border: #334155;
        --input-border-hover: #475569;
        --input-border-focus: #60a5fa;

        --button-secondary-bg: #1e293b;
        --button-secondary-color: #f8fafc;
        --button-secondary-border: #475569;

        --scrollbar-track: #0f172a;
        --scrollbar-thumb: #475569;
        --scrollbar-thumb-hover: #64748b;

        --skeleton-bg: #334155;
        --skeleton-highlight: #475569;

        --chart-grid: #334155;
        --chart-text: #94a3b8;

        --overlay-color: rgba(0, 0, 0, 0.65);
        --overlay-light: rgba(0, 0, 0, 0.40);
        --overlay-dark: rgba(0, 0, 0, 0.85);
    }
}


/* ============================================================
   EXPLICIT LIGHT THEME

   Use:
   <html data-theme="light">
   ============================================================ */

[data-theme="light"] {

    --color-bg: #f8fafc;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1f5f9;

    --color-surface: #ffffff;
    --color-surface-hover: #f8fafc;
    --color-surface-active: #f1f5f9;
    --color-surface-raised: #ffffff;

    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;
    --color-text-disabled: #cbd5e1;
    --color-text-inverse: #ffffff;

    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-dark: #cbd5e1;
    --color-border-focus: #2563eb;

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #1e40af;
    --color-primary-light: #dbeafe;
    --color-primary-soft: #eff6ff;

    --color-success: #16a34a;
    --color-success-hover: #15803d;
    --color-success-light: #dcfce7;
    --color-success-soft: #f0fdf4;

    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-light: #fee2e2;
    --color-danger-soft: #fef2f2;

    --color-warning: #ea580c;
    --color-warning-hover: #c2410c;
    --color-warning-light: #ffedd5;
    --color-warning-soft: #fff7ed;

    --color-info: #0891b2;
    --color-info-hover: #0e7490;
    --color-info-light: #cffafe;
    --color-info-soft: #ecfeff;

    --color-neutral: #475569;
    --color-neutral-light: #f1f5f9;
    --color-neutral-soft: #f8fafc;

    --sidebar-bg: #ffffff;
    --sidebar-border: #e2e8f0;
    --sidebar-text: #475569;
    --sidebar-text-hover: #0f172a;
    --sidebar-text-active: #2563eb;
    --sidebar-item-hover-bg: #f8fafc;
    --sidebar-item-active-bg: #eff6ff;
    --sidebar-icon-color: #64748b;
    --sidebar-icon-active: #2563eb;
    --sidebar-section-title: #94a3b8;

    --topbar-bg: #ffffff;
    --topbar-border: #e2e8f0;
    --topbar-text: #0f172a;
    --topbar-icon: #475569;
    --topbar-hover-bg: #f1f5f9;

    --table-bg: #ffffff;
    --table-header-bg: #f8fafc;
    --table-row-bg: #ffffff;
    --table-row-hover: #f8fafc;
    --table-row-selected: #eff6ff;
    --table-border: #e2e8f0;
    --table-header-color: #475569;
    --table-cell-color: #0f172a;

    --input-bg: #ffffff;
    --input-bg-disabled: #f1f5f9;
    --input-text: #0f172a;
    --input-placeholder: #64748b;
    --input-border: #e2e8f0;
    --input-border-hover: #cbd5e1;
    --input-border-focus: #2563eb;

    --button-secondary-bg: #ffffff;
    --button-secondary-color: #334155;
    --button-secondary-border: #cbd5e1;

    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;

    --skeleton-bg: #e2e8f0;
    --skeleton-highlight: #f1f5f9;

    --chart-grid: #e2e8f0;
    --chart-text: #64748b;

    --overlay-color: rgba(15, 23, 42, 0.55);
    --overlay-light: rgba(15, 23, 42, 0.25);
    --overlay-dark: rgba(2, 6, 23, 0.75);
}


/* ============================================================
   34. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-medium: 0ms;
        --transition-slow: 0ms;
        --transition-all: none;
    }
}


/* ============================================================
   35. RESPONSIVE TOKEN OVERRIDES
   ============================================================ */

@media (max-width: 1199px) {

    :root {
        --sidebar-width: 240px;
        --page-padding-x: 20px;
        --page-padding-y: 20px;
        --card-padding: 20px;
        --grid-gap: 20px;
        --card-gap: 20px;
    }
}


@media (max-width: 991px) {

    :root {
        --sidebar-width: 0px;
        --page-padding-x: 20px;
        --page-padding-y: 20px;

        --topbar-height: 60px;
        --header-height: 60px;

        --card-padding: 20px;
        --section-gap: 24px;
        --grid-gap: 16px;
        --card-gap: 16px;
    }
}


@media (max-width: 767px) {

    :root {
        --page-padding-x: 16px;
        --page-padding-y: 16px;

        --mobile-page-padding-x: 16px;
        --mobile-page-padding-y: 16px;

        --topbar-height: 56px;
        --header-height: 56px;

        --card-padding: 16px;
        --card-padding-sm: 12px;

        --section-gap: 20px;
        --grid-gap: 16px;
        --card-gap: 16px;

        --form-field-height: 44px;

        --modal-padding: 20px;

        --dashboard-stat-number-size: 24px;
    }
}


@media (max-width: 575px) {

    :root {
        --page-padding-x: 12px;
        --page-padding-y: 12px;

        --mobile-page-padding-x: 12px;
        --mobile-page-padding-y: 12px;

        --card-padding: 14px;

        --section-gap: 16px;
        --grid-gap: 12px;
        --card-gap: 12px;

        --button-padding-x: 14px;
        --button-padding-y: 9px;

        --font-size-2xl: 1.375rem;
        --font-size-3xl: 1.625rem;
    }
}


/* ============================================================
   36. GLOBAL BOX / LAYOUT HELPERS
   ============================================================ */

:root {

    --container-padding-inline:
        var(--page-padding-x);

    --container-padding-block:
        var(--page-padding-y);

    --content-gap:
        var(--grid-gap);

    --section-padding:
        var(--space-8);

    --page-radius:
        var(--radius-xl);
}


/* ============================================================
   END OF WONDER APP VENDOR VARIABLES
   ============================================================ */