/* Design Tokens - CSS Custom Properties */
:root {
    /* Colors */
    --color-primary: #6C63FF;
    --color-primary-hover: #5850E5;
    --color-primary-light: rgba(108, 99, 255, 0.1);
    --color-secondary: #F5F6FA;
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-text-dark: #2B2E3A;
    --color-text-light: #6F7285;
    --color-sidebar-bg: #1A1E2C;
    --color-sidebar-text: #E3E6ED;
    --color-highlight: #E0E3FF;
    --color-background: #FAFAFC;
    --color-border: #E3E6ED;
    --color-white: #FFFFFF;
    --color-scrollbar-track: #E3E6ED;
    --color-scrollbar-thumb: #B8BBC7;
    --color-scrollbar-hover: #9BA0B1;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --font-size-title: 22px;
    --font-size-heading: 16px;
    --font-size-body: 14px;
    --font-size-caption: 12px;
    --font-size-badge: 11px;
    --font-size-logo: 18px;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Spacing - 8px Grid System */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 4px 12px rgba(108, 99, 255, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-navigation: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* For tooltip navigation */

    /* Layout */
    --sidebar-width: 220px;
    --header-height: 88px;

    /* Z-index Scale */
    --z-sidebar: 100;
    --z-header: 90;
    --z-modal: 1000;
}