/* ============================================================
 * Taiyaari 360 — Design System Variables
 * Premium SaaS Edition (Stripe / Linear inspired)
 * ============================================================ */

:root {
    /* ─── Premium Brand Colors (Linear / Stripe Vibe) ─────── */
    --primary-50:  #F0F1FF;
    --primary-50-rgb: 240, 241, 255;
    --primary-100: #E0E2FF;
    --primary-100-rgb: 224, 226, 255;
    --primary-200: #C4C7FF;
    --primary-200-rgb: 196, 199, 255;
    --primary-300: #A8ABFF;
    --primary-300-rgb: 168, 171, 255;
    --primary-400: #7B7EF0;
    --primary-400-rgb: 123, 126, 240;
    --primary-500: #5A5DE9;
    --primary-600: #484BE0;
    --primary-600-rgb: 72, 75, 224;
    --primary-700: #3A3DC9;
    --primary-700-rgb: 58, 61, 201;
    --primary-800: #2E31A3;
    --primary-800-rgb: 46, 49, 163;
    --primary-900: #23267D;
    --primary-900-rgb: 35, 38, 125;

    --primary:     #5A5DE9;
    --primary-rgb: 90, 93, 233;
    --secondary:   #1A1C29;
    --secondary-rgb: 26, 28, 41; /* Dark, rich almost black */
    --accent:      #F04A75;
    --accent-rgb: 240, 74, 117; /* Vibrant pink/red accent */

    /* ─── Semantic Colors (High contrast, vibrant) ──────────── */
    --success:     #00C48C;
    --success-rgb: 0, 196, 140;
    --success-50:  #E5F9F4;
    --success-50-rgb: 229, 249, 244;
    --success-100: #CCF4E8;
    --success-100-rgb: 204, 244, 232;
    --success-600: #00A676;
    --success-600-rgb: 0, 166, 118;
    --success-700: #008760;
    --success-700-rgb: 0, 135, 96;

    --danger:      #FF4D4F;
    --danger-50:   #FFF1F0;
    --danger-50-rgb: 255, 241, 240;
    --danger-100:  #FFCCC7;
    --danger-100-rgb: 255, 204, 199;
    --danger-600:  #CF1322;
    --danger-600-rgb: 207, 19, 34;
    --danger-700:  #A8071A;
    --danger-700-rgb: 168, 7, 26;

    --warning:     #FFB020;
    --warning-rgb: 255, 176, 32;
    --warning-50:  #FFFBE6;
    --warning-50-rgb: 255, 251, 230;
    --warning-100: #FFF1B8;
    --warning-100-rgb: 255, 241, 184;
    --warning-600: #D48806;
    --warning-600-rgb: 212, 136, 6;
    --warning-700: #AD6800;
    --warning-700-rgb: 173, 104, 0;

    --info:        #1890FF;
    --info-50:     #E6F7FF;
    --info-50-rgb: 230, 247, 255;
    --info-100:    #BAE7FF;
    --info-100-rgb: 186, 231, 255;
    --info-600:    #096DD9;
    --info-600-rgb: 9, 109, 217;
    --info-700:    #0050B3;
    --info-700-rgb: 0, 80, 179;

    /* ─── Neutral / Gray Scale (Cool grays) ─────────────────── */
    --gray-50:  #FAFAFC;
    --gray-50-rgb: 250, 250, 252;
    --gray-100: #F3F4F6;
    --gray-100-rgb: 243, 244, 246;
    --gray-200: #E5E7EB;
    --gray-200-rgb: 229, 231, 235;
    --gray-300: #D1D5DB;
    --gray-300-rgb: 209, 213, 219;
    --gray-400: #9CA3AF;
    --gray-400-rgb: 156, 163, 175;
    --gray-500: #6B7280;
    --gray-500-rgb: 107, 114, 128;
    --gray-600: #4B5563;
    --gray-600-rgb: 75, 85, 99;
    --gray-700: #374151;
    --gray-700-rgb: 55, 65, 81;
    --gray-800: #1F2937;
    --gray-800-rgb: 31, 41, 55;
    --gray-900: #111827;
    --gray-950: #030712;
    --gray-950-rgb: 3, 7, 18;

    /* ─── Semantic Layout Colors ────────────────────────────── */
    --bg-primary:    #F8F9FD;
    --bg-primary-rgb: 248, 249, 253;
    --bg-secondary:  #F0F1FF;
    --bg-secondary-rgb: 243, 244, 246;
    --bg-card:       #FFFFFF;
    --bg-card-rgb: 255, 255, 255;
    --bg-sidebar:    #111827;
    --bg-sidebar-rgb: 17, 24, 39;
    --bg-sidebar-hover: rgba(var(--white-rgb), 0.05);
    --bg-sidebar-active: rgba(var(--white-rgb), 0.1);

    --text-primary:   #1A1A1A;
    --text-primary-rgb: 17, 24, 39;
    --text-secondary: #666666;
    --text-secondary-rgb: 75, 85, 99;
    --text-muted:     #9CA3AF;
    --text-muted-rgb: 156, 163, 175;
    --text-light:     #D1D5DB;
    --text-light-rgb: 209, 213, 219;
    --text-inverse:   #FFFFFF;
    --text-inverse-rgb: 255, 255, 255;

    --border-color:    #E5E7EB;
    --border-color-rgb: 229, 231, 235;
    --border-light:    #F3F4F6;
    --border-light-rgb: 243, 244, 246;
    --border-focus:    #5A5DE9;
    --border-focus-rgb: 90, 93, 233;
    
    /* ─── Glassmorphism & Effects ───────────────────────────── */
    --glass-bg: rgba(var(--white-rgb), 0.7);
    --glass-border: 1px solid rgba(var(--white-rgb), 0.5);
    --glass-blur: blur(12px);

    /* ─── Typography ────────────────────────────────────────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs:   clamp(12px, 1vw, 14px);
    --text-sm:   clamp(14px, 1.2vw, 16px);
    --text-base: clamp(16px, 1.5vw, 20px);
    --text-lg:   clamp(18px, 1.8vw, 22px);
    --text-xl:   clamp(20px, 2vw, 26px);
    --text-2xl:  clamp(24px, 2.5vw, 32px);
    --text-3xl:  clamp(28px, 3vw, 40px);
    --text-4xl:  clamp(32px, 4vw, 48px);
    --text-5xl:  clamp(40px, 5vw, 56px);
    --text-6xl:  clamp(48px, 6vw, 64px);

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-tight:  -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;

    /* ─── Spacing (4px Grid) ────────────────────────────────── */
    --space-0:  0;
    --space-1:  clamp(0.25rem, 0.2rem + 0.1vw, 0.3rem);
    --space-2:  clamp(0.5rem, 0.4rem + 0.2vw, 0.6rem);
    --space-3:  clamp(0.75rem, 0.6rem + 0.3vw, 0.875rem);
    --space-4:  clamp(1rem, 0.8rem + 0.4vw, 1.125rem);
    --space-5:  clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
    --space-6:  clamp(1.5rem, 1.2rem + 0.6vw, 1.75rem);
    --space-8:  clamp(2rem, 1.6rem + 0.8vw, 2.5rem);
    --space-10: clamp(2.5rem, 2rem + 1vw, 3rem);
    --space-12: clamp(3rem, 2.4rem + 1.2vw, 3.5rem);
    --space-16: clamp(4rem, 3.2rem + 1.6vw, 5rem);
    --space-20: clamp(5rem, 4rem + 2vw, 6rem);
    --space-24: clamp(6rem, 4.8rem + 2.4vw, 7.5rem);
    --space-32: clamp(8rem, 6.4rem + 3.2vw, 10rem);

    /* ─── Border Radius (SaaS curves) ───────────────────────── */
    --radius-sm:   0.375rem;  /* 6px */
    --radius-md:   0.5rem;    /* 8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ─── Premium Shadows (Smooth, diffused) ────────────────── */
    --shadow-xs:  0 1px 2px rgba(var(--border-light-rgb), 0.05);
    --shadow-sm:  0 2px 4px rgba(var(--border-light-rgb), 0.04), 0 1px 2px rgba(var(--border-light-rgb), 0.03);
    --shadow-md:  0 6px 12px -2px rgba(var(--border-light-rgb), 0.05), 0 3px 7px -3px rgba(var(--border-light-rgb), 0.03);
    --shadow-lg:  0 12px 24px -4px rgba(var(--border-light-rgb), 0.06), 0 8px 16px -8px rgba(var(--border-light-rgb), 0.04);
    --shadow-xl:  0 24px 48px -12px rgba(var(--border-light-rgb), 0.12);
    --shadow-2xl: 0 32px 64px -16px rgba(var(--border-light-rgb), 0.16);
    --shadow-primary: 0 8px 24px -6px rgba(var(--border-focus-rgb), 0.4);
    
    /* ─── Elevation System ──────────────────────────────────── */
    --elevation-surface: none;
    --elevation-elevated: 0 2px 8px -2px rgba(var(--border-light-rgb), 0.05), 0 4px 6px -1px rgba(var(--border-light-rgb), 0.03);
    --elevation-floating: 0 12px 24px -4px rgba(var(--border-light-rgb), 0.06), 0 8px 16px -8px rgba(var(--border-light-rgb), 0.04);
    --elevation-modal: 0 25px 50px -12px rgba(var(--border-light-rgb), 0.15);
    --elevation-overlay: 0 0 0 100vmax rgba(var(--border-light-rgb), 0.4);

    /* ─── Transitions (Spring-like, fluid) ──────────────────── */
    --transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base:   250ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow:   350ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index Scale ─────────────────────────────────────── */
    --z-dropdown:   1000;
    --z-sticky:     1020;
    --z-fixed:      1030;
    --z-modal-backdrop: 1040;
    --z-modal:      1050;
    --z-popover:    1060;
    --z-tooltip:    1070;
    --z-toast:      1080;

    /* ─── Layout ────────────────────────────────────────────── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 80px;
    --topbar-height:     68px;
    --container-max:     1440px;
    --container-sm:      640px;
    --container-md:      768px;
    --container-lg:      1024px;
    --container-xl:      1280px;

    /* ─── Mobile-First Touch Targets ───────────────────────── */
    --touch-target-min:  44px;
    --touch-target-lg:   48px;
    --touch-target-xl:   52px;

    /* ─── Section Spacing (Mobile-First Rhythm) ────────────── */
    --section-py-mobile:  clamp(2rem, 5vw, 3rem);
    --section-py-desktop: clamp(3.5rem, 6vw, 5rem);
    --section-gap:        var(--section-py-mobile);

    /* ─── Homepage Surface Colors ──────────────────────────── */
    --surface-elevated:   #FFFFFF;
    --surface-sunken:     #F6F7FB;
    --surface-overlay:    rgba(255, 255, 255, 0.92);
    --surface-accent:     rgba(var(--primary-rgb), 0.04);

    /* ─── Scroll Reveal Animation ──────────────────────────── */
    --reveal-duration:    0.6s;
    --reveal-easing:      cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-distance:    24px;
    --stagger-delay:      0.08s;

    /* ─── Card Elevation Presets ───────────────────────────── */
    --card-shadow-rest:   0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --card-shadow-hover:  0 8px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -3px rgba(0, 0, 0, 0.04);
    --card-shadow-active: 0 12px 35px -8px rgba(0, 0, 0, 0.12), 0 6px 14px -4px rgba(0, 0, 0, 0.06);
    --card-border:        1px solid rgba(0, 0, 0, 0.06);
    --card-radius:        var(--radius-xl);

    /* ─── Admin Panel Tokens ──────────────────────────────────── */
    --admin-bg:           #f4f6fa;
    --admin-card-bg:      #ffffff;
    --admin-card-shadow:  0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --admin-card-hover:   0 8px 24px -4px rgba(0,0,0,0.08);
    --admin-card-radius:  14px;
    --admin-card-border:  1px solid #eaecf0;
    --admin-header-bg:    rgba(255,255,255,0.92);
    --admin-header-border: #eaecf0;
    --admin-header-h:     60px;
    --admin-kpi-radius:   14px;
    --admin-section-gap:  20px;
    --admin-accent-blue:  #4361ee;
    --admin-accent-green: #10b981;
    --admin-accent-amber: #f59e0b;
    --admin-accent-red:   #ef4444;
    --admin-accent-purple:#8b5cf6;
    --admin-accent-cyan:  #06b6d4;
    --admin-accent-pink:  #ec4899;
    --admin-text-heading:  #0f172a;
    --admin-text-body:     #334155;
    --admin-text-caption:  #64748b;
    --admin-text-muted:    #94a3b8;
    --admin-border-subtle: #f1f5f9;
}

/* ─── Dark Theme ────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-primary:     #030712;
    --bg-secondary:   #111827;
    --bg-card:        #111827;
    --bg-sidebar:     #030712;

    --text-primary:   #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted:     #6B7280;
    --text-light:     #4B5563;

    --border-color:   #1F2937;
    --border-light:   #111827;
    
    --glass-bg: rgba(var(--border-light-rgb), 0.7);
    --glass-border: 1px solid rgba(var(--white-rgb), 0.05);

    --surface-elevated:   #1a2332;
    --surface-sunken:     #0a1120;
    --surface-overlay:    rgba(17, 24, 39, 0.92);
    --surface-accent:     rgba(var(--primary-rgb), 0.08);

    --card-shadow-rest:   0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
    --card-shadow-hover:  0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -3px rgba(0, 0, 0, 0.2);
    --card-shadow-active: 0 12px 35px -8px rgba(0, 0, 0, 0.4), 0 6px 14px -4px rgba(0, 0, 0, 0.25);
    --card-border:        1px solid rgba(255, 255, 255, 0.06);


    --shadow-xs:  0 1px 2px rgba(var(--black-rgb), 0.3);
    --shadow-sm:  0 2px 4px rgba(var(--black-rgb), 0.4);
    --shadow-md:  0 6px 12px -2px rgba(var(--black-rgb), 0.5);
    --shadow-lg:  0 12px 24px -4px rgba(var(--black-rgb), 0.6);
    --shadow-xl:  0 24px 48px -12px rgba(var(--black-rgb), 0.7);
}

/* ─── Base & Tailwind Mapping (Added for consistency) ──────── */
:root {
    --black: #000000;
    --black-rgb: 0, 0, 0;
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    
    --primary-500-rgb: 107, 76, 255;
    
    --slate-50: #f8fafc;
    --slate-50-rgb: 248, 250, 252;
    --slate-200: #e2e8f0;
    --slate-200-rgb: 226, 232, 240;
    --slate-400: #94a3b8;
    --slate-400-rgb: 148, 163, 184;
    --slate-500: #64748b;
    --slate-500-rgb: 100, 116, 139;
    --slate-600: #475569;
    --slate-600-rgb: 51, 65, 85;
    --slate-700: #334155;
    --slate-700-rgb: 51, 65, 85;
    --slate-800: #1e293b;
    --slate-800-rgb: 30, 41, 59;
    --slate-900: #0f172a;
    --slate-900-rgb: 15, 23, 42;
    
    --gray-900-rgb: 17, 24, 39;
    
    --emerald-500: #10b981;
    --emerald-500-rgb: 16, 185, 129;
    
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-600-rgb: 79, 70, 229;
    --indigo-700: #4338ca;
    --indigo-700-rgb: 67, 56, 202;
    
    --blue-600: #4361ee;
    --blue-600-rgb: 67, 97, 238;
    
    --purple-500: #a855f7;
    --purple-500-rgb: 139, 92, 246;
    
    --pink-500: #ec4899;
    --pink-500-rgb: 236, 72, 153;
    
    --amber-500: #f59e0b;
    --amber-500-rgb: 245, 158, 11;
    
    --red-50: #fef2f2;
    --red-50-rgb: 254, 242, 242;
    --red-500: #ef4444;
    --red-500-rgb: 239, 68, 68;
    
    --blue-500-rgb: 59, 130, 246;
    --blue-900-rgb: 30, 58, 138;
    --indigo-500-rgb: 99, 102, 241;
    
    --info-rgb: 24, 144, 255;
    --danger-rgb: 255, 77, 79;
}


html, body { overflow-x: hidden; width: 100%; }