/* ═══════════════════════════════════════════════════════════
   AQSANOVA — CSS Design Tokens
   All design variables for the entire application
   ═══════════════════════════════════════════════════════════ */

@property --gradient-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    /* ─── Color Palette ───────────────────────────────────── */
    /* Backgrounds */
    --bg-base:        #030303;
    --bg-primary:     #080808;
    --bg-secondary:   #121212;
    --bg-tertiary:    #1a1a1a;
    --bg-elevated:    #222222;
    --bg-card:        rgba(30, 30, 30, 0.88);
    --bg-card-hover:  rgba(38, 38, 38, 0.92);
    --bg-surface:     var(--bg-card);
    --bg-hover:       rgba(255, 255, 255, 0.05);
    --bg-input:       rgba(255, 255, 255, 0.06);
    --bg-input-focus: rgba(255, 255, 255, 0.10);
    --bg-sidebar:     #0c0c0c;
    --bg-header:      rgba(18, 18, 18, 0.92);
    --bg-overlay:     rgba(0, 0, 0, 0.8);
    --bg-tooltip:     #121212;

    /* Text */
    --text-primary:   #fafafa;
    --text-secondary: #a3a3a3;
    --text-muted:     #6b6b6b;
    --text-disabled:  #404040;
    --text-inverse:   #080808;
    --btn-text:       var(--accent);

    /* Accent (Cyan #00c4cf) */
    --accent:         #00c4cf;
    --accent-hover:   #26d3dd;
    --accent-active:  #00a3ad;
    --accent-light:   rgba(0, 196, 207, 0.15);
    --accent-glow:    rgba(0, 196, 207, 0.3);
    --accent-subtle:  rgba(0, 196, 207, 0.1);
    --accent-strong:  rgba(0, 196, 207, 0.25);

    /* Status Colors */
    --success:        #10b981;
    --success-light:  rgba(16, 185, 129, 0.15);
    --success-border: rgba(16, 185, 129, 0.3);
    --success-glow:   rgba(16, 185, 129, 0.25);

    --warning:        #f59e0b;
    --warning-light:  rgba(245, 158, 11, 0.15);
    --warning-border: rgba(245, 158, 11, 0.3);
    --warning-glow:   rgba(245, 158, 11, 0.25);

    --error:          #ef4444;
    --error-light:    rgba(239, 68, 68, 0.15);
    --error-border:   rgba(239, 68, 68, 0.3);
    --error-glow:     rgba(239, 68, 68, 0.25);

    --info:           #3b82f6;
    --info-light:     rgba(59, 130, 246, 0.15);
    --info-border:    rgba(59, 130, 246, 0.3);
    --info-glow:      rgba(59, 130, 246, 0.25);

    /* Additional Palette */
    --purple:         #8b5cf6;
    --purple-light:   rgba(139, 92, 246, 0.15);
    --purple-border:  rgba(139, 92, 246, 0.3);
    --purple-glow:    rgba(139, 92, 246, 0.25);
    --pink:           #ec4899;
    --cyan:           #06b6d4;
    --teal:           #14b8a6;
    --orange:         #f97316;
    --rose:           #f43f5e;

    /* Borders */
    --border-color:   rgba(255, 255, 255, 0.08);
    --border-light:   rgba(255, 255, 255, 0.05);
    --border-focus:   rgba(0, 195, 207, 0.5);
    --border-hover:   rgba(255, 255, 255, 0.12);

    /* ─── Spacing ─────────────────────────────────────────── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

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

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.8125rem; /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-md:   0.9375rem; /* 15px */
    --text-lg:   1.0625rem; /* 17px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */

    --font-light:    300;
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ─── Border Radius ───────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* Component Radius Tokens */
    --radius-card:   var(--radius-lg);
    --radius-button: var(--radius-md);
    --radius-input:  var(--radius-md);
    --radius-badge:  var(--radius-xs);
    --radius-modal:  var(--radius-xl);

    /* ─── Shadows ─────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 24px var(--accent-glow);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 195, 207, 0.08);

    /* ─── Transitions & Animations ────────────────────────── */
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-elastic:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --ease-smooth:   cubic-bezier(0.23, 1, 0.32, 1);
    --duration-fast:   120ms;
    --duration-normal: 180ms;
    --duration-slow:   300ms;
    --duration-xl:     500ms;
    --transition:      all var(--duration-normal) var(--ease-default);
    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition-slow: all var(--duration-slow) var(--ease-smooth);

    /* ─── Hover Lift Scale (for clickable cards only) ────────── */
    --hover-lift:       translateY(-2px);
    --hover-lift-scale: translateY(-2px) scale(1.01);
    --hover-scale:      scale(1.015);

    /* ─── Hover Glow Effects ──────────────────────────────── */
    --glow-accent:  0 0 20px rgba(0, 195, 207, 0.15);
    --glow-purple:  0 0 20px rgba(139, 92, 246, 0.15);
    --glow-success: 0 0 20px rgba(16, 185, 129, 0.15);
    --glow-warning: 0 0 20px rgba(245, 158, 11, 0.15);

    /* ─── Layout ──────────────────────────────────────────── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 68px;
    --header-height:     64px;
    --content-max-width: 100%;

    /* ─── Mobile Bottom Nav ──────────────────────────────── */
    --mobile-nav-height: 64px;
    --mobile-nav-z-index: 350;

    /* ─── Responsive Breakpoints (for reference) ─────────── */
    /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

    /* ─── Sidebar Hover States ────────────────────────────── */
    --bg-sidebar-hover: rgba(255, 255, 255, 0.05);
    --bg-sidebar-btn:   rgba(255, 255, 255, 0.03);
    --bg-sidebar-btn-hover: rgba(255, 255, 255, 0.06);

    /* ─── Z-Index Scale ───────────────────────────────────── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-sidebar:  300;
    --z-header:   400;
    --z-overlay:  500;
    --z-modal:    600;
    --z-toast:    700;
    --z-tooltip:  800;

    /* ─── Enhanced Hover Effects ────────────────────────────── */
    /* Glassmorphism */
    --glass-bg:          rgba(255, 255, 255, 0.03);
    --glass-bg-hover:    rgba(255, 255, 255, 0.06);
    --glass-blur:        16px;
    --glass-blur-hover:  24px;
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-border-hover:rgba(255, 255, 255, 0.14);

    /* Gradient Border */
    --gradient-border-angle: 0deg;
    --gradient-border:   conic-gradient(from var(--gradient-border-angle), var(--accent), var(--purple), var(--cyan), var(--accent));

    /* Shadow Bloom */
    --shadow-bloom:      0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 0 transparent;
    --shadow-bloom-hover:0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px var(--accent-glow);
    --shadow-bloom-btn:  0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-bloom-btn-hover: 0 6px 24px rgba(0, 195, 207, 0.2), 0 0 12px var(--accent-glow);

    /* Tilt */
    --tilt-perspective:  800px;
    --tilt-max:          6deg;
}

/* ════════════════════════════════════════════════════════════
   ENHANCED HOVER — Keyframe Animations
   ════════════════════════════════════════════════════════════ */

@keyframes gradientSpin {
    from { --gradient-border-angle: 0deg; }
    to   { --gradient-border-angle: 360deg; }
}

@keyframes glassShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
    50%      { box-shadow: 0 0 28px var(--accent-glow), 0 0 48px rgba(0,195,207,0.08); }
}


[data-theme="light"] {
    /* Backgrounds */
    --bg-base:        #f4f6fa;
    --bg-primary:     #ffffff;
    --bg-secondary:   #f8fafc;
    --bg-tertiary:    #f1f5f9;
    --bg-elevated:    #e2e8f0;
    --bg-card:        rgba(255, 255, 255, 0.98);
    --bg-card-hover:  #ffffff;
    --bg-surface:     #ffffff;
    --bg-hover:       rgba(15, 23, 42, 0.04);
    --bg-input:       rgba(15, 23, 42, 0.04);
    --bg-input-focus: #ffffff;
    --bg-sidebar:     #ffffff;
    --bg-sidebar-hover: rgba(15, 23, 42, 0.04);
    --bg-sidebar-btn:   rgba(15, 23, 42, 0.03);
    --bg-sidebar-btn-hover: rgba(15, 23, 42, 0.06);
    --bg-header:      rgba(255, 255, 255, 0.95);
    --bg-overlay:     rgba(15, 23, 42, 0.6);
    --bg-tooltip:     #0f172a;

    /* Accent — rich logo-matched cyan/teal calibrated for >= 4.8:1 contrast on white */
    --accent:         #00828b;
    --accent-hover:   #006870;
    --accent-active:  #005359;
    --accent-light:   rgba(0, 130, 139, 0.10);
    --accent-glow:    rgba(0, 130, 139, 0.20);
    --accent-subtle:  rgba(0, 130, 139, 0.06);
    --accent-strong:  rgba(0, 130, 139, 0.20);
    --accent-text:    #007078;

    /* Status Colors */
    --success:        #059669;
    --success-light:  rgba(5, 150, 105, 0.10);
    --success-border: rgba(5, 150, 105, 0.25);
    --success-glow:   rgba(5, 150, 105, 0.18);
    --success-text:   #047857;

    --warning:        #d97706;
    --warning-light:  rgba(217, 119, 6, 0.10);
    --warning-border: rgba(217, 119, 6, 0.25);
    --warning-glow:   rgba(217, 119, 6, 0.18);
    --warning-text:   #b45309;

    --error:          #dc2626;
    --error-light:    rgba(220, 38, 38, 0.10);
    --error-border:   rgba(220, 38, 38, 0.25);
    --error-glow:     rgba(220, 38, 38, 0.18);
    --error-text:     #b91c1c;

    --info:           #2563eb;
    --info-light:     rgba(37, 99, 235, 0.10);
    --info-border:    rgba(37, 99, 235, 0.25);
    --info-glow:      rgba(37, 99, 235, 0.18);
    --info-text:      #1d4ed8;

    --purple:         #7c3aed;
    --purple-light:   rgba(124, 58, 237, 0.10);
    --purple-border:  rgba(124, 58, 237, 0.25);
    --purple-glow:    rgba(124, 58, 237, 0.18);
    --purple-text:    #6d28d9;

    /* Enhanced Hover Effects (Light Mode) */
    --glass-bg:          rgba(255, 255, 255, 0.7);
    --glass-bg-hover:    rgba(240, 244, 248, 0.85);
    --glass-blur:        20px;
    --glass-blur-hover:  32px;
    --glass-border:      rgba(15, 23, 42, 0.08);
    --glass-border-hover:rgba(15, 23, 42, 0.15);
    --shadow-bloom:      0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-bloom-hover:0 8px 30px rgba(0, 0, 0, 0.08), 0 0 20px var(--accent-glow);
    --shadow-bloom-btn:  0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-bloom-btn-hover: 0 4px 16px rgba(0, 130, 139, 0.20), 0 0 8px var(--accent-glow);

    /* Text — crisp, deep, high-contrast values */
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;
    --text-disabled:  #94a3b8;
    --text-inverse:   #ffffff;
    --btn-text:       #00828b;

    /* Borders */
    --border-color:   rgba(15, 23, 42, 0.10);
    --border-light:   rgba(15, 23, 42, 0.05);
    --border-focus:   rgba(0, 130, 139, 0.5);
    --border-hover:   rgba(15, 23, 42, 0.18);
}

/* ─── Color Utility Classes ────────────────────────────────── */
:root {
    --accent-bg:        var(--accent-light);
    --accent-border:    var(--accent);
    --accent-text:      var(--accent-hover);
    --purple-bg:        rgba(139, 92, 246, 0.15);
    --purple-border:    var(--purple);
    --purple-text:      #a78bfa;
    --success-bg:       var(--success-light);
    --success-border:   var(--success-border);
    --success-text:     var(--success);
    --warning-bg:       var(--warning-light);
    --warning-border:   var(--warning-border);
    --warning-text:     var(--warning);
    --error-bg:         var(--error-light);
    --error-border:     var(--error-border);
    --error-text:       var(--error);
    --info-bg:          var(--info-light);
    --info-border:      var(--info-border);
    --info-text:        var(--info);
}

[data-theme="light"] {
    --accent-bg:        var(--accent-light);
    --accent-border:    var(--accent);
    --accent-text:      #007078;
    --purple-bg:        var(--purple-light);
    --purple-border:    var(--purple-border);
    --purple-text:      #6d28d9;
    --success-bg:       var(--success-light);
    --success-border:   var(--success-border);
    --success-text:     #047857;
    --warning-bg:       var(--warning-light);
    --warning-border:   var(--warning-border);
    --warning-text:     #b45309;
    --error-bg:         var(--error-light);
    --error-border:     var(--error-border);
    --error-text:       #b91c1c;
    --info-bg:          var(--info-light);
    --info-border:      var(--info-border);
    --info-text:        #1d4ed8;
}