/* ==========================================================================
   VIUCraft Design Tokens
   ========================================================================== */

:root {
    /* Color palette - Slate Scale (HSL for transparency) */
    --slate-50: 210 40% 98%;
    --slate-100: 210 40% 96.1%;
    --slate-200: 214.3 31.8% 91.4%;
    --slate-300: 212.7 26.8% 83.9%;
    --slate-400: 215 20.2% 65.1%;
    --slate-500: 215.4 16.3% 46.9%;
    --slate-600: 215.3 19.3% 34.5%;
    --slate-700: 215.3 25% 26.7%;
    --slate-800: 217.2 32.6% 17.5%;
    --slate-900: 222.2 47.4% 11.2%;
    --slate-950: 222.2 84% 4.9%;

    /* Semantic Neutrals */
    --neutral-50: hsl(var(--slate-50));
    --neutral-100: hsl(var(--slate-100));
    --neutral-200: hsl(var(--slate-200));
    --neutral-300: hsl(var(--slate-300));
    --neutral-400: hsl(var(--slate-400));
    --neutral-500: hsl(var(--slate-500));
    --neutral-600: hsl(var(--slate-600));
    --neutral-700: hsl(var(--slate-700));
    --neutral-800: hsl(var(--slate-800));
    --neutral-900: hsl(var(--slate-900));
    --neutral-950: hsl(var(--slate-950));

    /* Brand Colors - Upgraded for Premium Feel */
    --primary-blue: #0ea5e9;          /* Sky-500: Brighter, more modern */
    --primary-purple: #8b5cf6;        /* Violet-500: Deeper, dynamic purple */
    --primary-indigo: #6366f1;        /* Indigo-500: Main brand accent */
    --primary-indigo-dark: #4f46e5;   /* Indigo-600: Hover state */
    --primary-green: #10b981;         /* Emerald-500 */
    --primary-red: #ef4444;           /* Red-500 */
    --primary-orange: #f59e0b;        /* Amber-500 */
    
    /* Semantic Colors */
    --bg-body: #f1f5f9;               /* Slate-100: Better contrast for white surfaces */
    --bg-surface: #ffffff;
    --bg-surface-subtle: hsl(var(--slate-50));
    --text-main: #0f172a;             /* Slate-900: Deep off-black */
    --text-muted: #64748b;            /* Slate-500 */
    --border-subtle: rgba(15, 23, 42, 0.06); /* Soft, premium borders */
    --border-default: rgba(15, 23, 42, 0.1); 

    /* Status colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;

    /* Spacing (8pt Grid) */
    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-80: 5rem;
    --space-96: 6rem;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 2rem;       /* 32px */
    --font-size-4xl: 2.5rem;     /* 40px */
    --font-size-5xl: 3rem;       /* 48px */
    
    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.6;     /* Bumped to 1.6 for breathability */
    --line-height-relaxed: 1.75;

    /* Shadows (Deep, Diffused, Physically Accurate) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 16px 32px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.15);
    --shadow-2xl: 0 25px 50px rgba(15, 23, 42, 0.1), 0 40px 80px rgba(15, 23, 42, 0.2);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Colored Shadows for Micro-interactions */
    --shadow-primary-glow: 0 4px 14px 0 rgba(99, 102, 241, 0.39);
    --shadow-primary-glow-hover: 0 6px 20px rgba(99, 102, 241, 0.23);

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;     /* Increased for softer look */
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-navbar: 300;
    --z-sidebar: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* Dynamic Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1); /* Smoother curve */
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* Smoother curve */

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-dark: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    --gradient-hero: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    --gradient-surface: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.8));
}