/**
 * Sideconvo Design Tokens
 *
 * Central design system variables for typography, color, spacing, motion, and elevation.
 * This token system ensures visual consistency across the entire plugin.
 */

:root {
	/* ========================================
	   TYPOGRAPHY
	   ======================================== */

	/* Font Families - Using Inter for consistency (matching reference plugin) */
	--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;

	/* Font Sizes - Fluid scale */
	--text-xs: 0.75rem;      /* 12px */
	--text-sm: 0.875rem;     /* 14px */
	--text-base: 1rem;       /* 16px */
	--text-lg: 1.125rem;     /* 18px */
	--text-xl: 1.25rem;      /* 20px */
	--text-2xl: 1.5rem;      /* 24px */
	--text-3xl: 1.875rem;    /* 30px */
	--text-4xl: 2.25rem;     /* 36px */
	--text-5xl: 3rem;        /* 48px */
	--text-6xl: 3.75rem;     /* 60px */

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

	/* Line Heights */
	--leading-tight: 1.2;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

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

	/* ========================================
	   COLORS
	   ======================================== */

	/* Foundation Colors - Navy */
	--color-navy-deep: #0F1629;
	--color-navy: #1A2236;
	--color-navy-light: #2A3449;
	--color-navy-lighter: #3D4A5F;

	/* Surface Colors */
	--color-white: #FFFFFF;
	--color-gray-50: #F8FAFC;
	--color-gray-100: #F1F5F9;
	--color-gray-200: #E2E8F0;
	--color-gray-300: #CBD5E1;
	--color-gray-400: #94A3B8;
	--color-gray-500: #64748B;
	--color-gray-600: #475569;
	--color-gray-700: #334155;
	--color-gray-800: #1E293B;
	--color-gray-900: #0F172A;

	/* Brand Colors - Sideconvo brand (matching reference plugin) */
	--color-primary: #5F5BF3;
	--color-primary-dark: #4F46E5;
	--color-primary-light: #7B75F6;
	--color-primary-lighter: #EEF2FF;

	--color-secondary: #F59E0B;
	--color-secondary-dark: #D97706;
	--color-secondary-light: #FBBF24;

	/* Semantic Colors */
	--color-success: #10B981;
	--color-success-dark: #059669;
	--color-success-light: #34D399;
	--color-success-bg: #D1FAE5;

	--color-warning: #F59E0B;
	--color-warning-dark: #D97706;
	--color-warning-light: #FBBF24;
	--color-warning-bg: #FEF3C7;

	--color-error: #EF4444;
	--color-error-dark: #DC2626;
	--color-error-light: #F87171;
	--color-error-bg: #FEE2E2;

	--color-info: #3B82F6;
	--color-info-dark: #2563EB;
	--color-info-light: #60A5FA;
	--color-info-bg: #DBEAFE;

	/* Text Colors */
	--color-text-primary: #0F1629;
	--color-text-secondary: #475569;
	--color-text-tertiary: #94A3B8;
	--color-text-inverse: #FFFFFF;
	--color-text-link: #5F5BF3;

	/* Background Colors */
	--color-bg-primary: #FFFFFF;
	--color-bg-secondary: #F8FAFC;
	--color-bg-tertiary: #F1F5F9;
	--color-bg-inverse: #0F1629;

	/* Border Colors */
	--color-border-light: #F1F5F9;
	--color-border: #E2E8F0;
	--color-border-medium: #CBD5E1;
	--color-border-dark: #94A3B8;

	/* Overlay Colors */
	--color-overlay-light: rgba(15, 22, 41, 0.05);
	--color-overlay: rgba(15, 22, 41, 0.5);
	--color-overlay-dark: rgba(15, 22, 41, 0.75);

	/* Gradients - Sideconvo brand gradients */
	--gradient-brand-start: rgb(199, 81, 192);
	--gradient-brand-end: rgb(65, 88, 208);
	--gradient-brand: linear-gradient(112.87deg, var(--gradient-brand-start) 0%, var(--gradient-brand-end) 100%);
	--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);

	/* ========================================
	   SPACING
	   ======================================== */

	/* Base 4px grid system */
	--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 */
	--space-24: 6rem;      /* 96px */
	--space-32: 8rem;      /* 128px */

	/* ========================================
	   LAYOUT
	   ======================================== */

	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

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

	/* ========================================
	   BORDERS & RADIUS
	   ======================================== */

	--border-width-thin: 1px;
	--border-width-base: 2px;
	--border-width-thick: 3px;

	--radius-sm: 0.375rem;   /* 6px */
	--radius-base: 0.5rem;   /* 8px */
	--radius-md: 0.75rem;    /* 12px */
	--radius-lg: 1rem;       /* 16px */
	--radius-xl: 1.5rem;     /* 24px */
	--radius-2xl: 2rem;      /* 32px */
	--radius-full: 9999px;

	/* ========================================
	   SHADOWS & ELEVATION
	   ======================================== */

	/* Shadows - Layered for depth */
	--shadow-xs: 0 1px 2px 0 rgba(15, 22, 41, 0.05);
	--shadow-sm: 0 1px 3px 0 rgba(15, 22, 41, 0.1),
	             0 1px 2px -1px rgba(15, 22, 41, 0.1);
	--shadow-base: 0 4px 6px -1px rgba(15, 22, 41, 0.1),
	               0 2px 4px -2px rgba(15, 22, 41, 0.1);
	--shadow-md: 0 10px 15px -3px rgba(15, 22, 41, 0.1),
	             0 4px 6px -4px rgba(15, 22, 41, 0.1);
	--shadow-lg: 0 20px 25px -5px rgba(15, 22, 41, 0.1),
	             0 8px 10px -6px rgba(15, 22, 41, 0.1);
	--shadow-xl: 0 25px 50px -12px rgba(15, 22, 41, 0.25);
	--shadow-2xl: 0 35px 60px -15px rgba(15, 22, 41, 0.3);

	/* Glow effects */
	--glow-primary: 0 0 20px rgba(95, 91, 243, 0.3),
	                0 0 40px rgba(95, 91, 243, 0.1);
	--glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
	--glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
	--glow-error: 0 0 20px rgba(239, 68, 68, 0.3);

	/* Inner shadows */
	--shadow-inner: inset 0 2px 4px 0 rgba(15, 22, 41, 0.05);
	--shadow-inner-lg: inset 0 4px 8px 0 rgba(15, 22, 41, 0.1);

	/* ========================================
	   MOTION & ANIMATION
	   ======================================== */

	/* Timing Functions */
	--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
	--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

	/* Durations */
	--duration-instant: 100ms;
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--duration-slow: 500ms;
	--duration-slower: 800ms;
	--duration-slowest: 1200ms;

	/* Delays for staggered animations */
	--delay-1: 50ms;
	--delay-2: 100ms;
	--delay-3: 150ms;
	--delay-4: 200ms;
	--delay-5: 250ms;

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

	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-sidebar: 400;
	--z-modal-backdrop: 500;
	--z-modal: 600;
	--z-popover: 700;
	--z-toast: 800;
	--z-tooltip: 900;
	--z-top: 1000;

	/* ========================================
	   BLUR EFFECTS
	   ======================================== */

	--blur-sm: 4px;
	--blur-base: 8px;
	--blur-md: 12px;
	--blur-lg: 16px;
	--blur-xl: 24px;

	/* ========================================
	   OPACITY SCALE
	   ======================================== */

	--opacity-disabled: 0.5;
	--opacity-hover: 0.8;
	--opacity-overlay: 0.6;
}

/* Dark mode overrides (future-proofing) */
@media (prefers-color-scheme: dark) {
	:root {
		/* Color overrides for dark mode can be added here */
	}
}