/* CSS Variables & Theme Tokens */
:root {
  /* Brand Colors */
  --primary-50: #e0f2fe;
  --primary-100: #bae6fd;
  --primary-200: #7dd3fc;
  --primary-300: #38bdf8;
  --primary-400: #0284c7;
  --primary-500: #0369a1;
  --primary-600: #075985;
  --primary-700: #0c4a6e;

  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --teal-400: #2dd4bf;

  /* Accent Gradients (Multi-stop Blue to Cyan to Teal to Emerald) */
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #0284c7 30%, #06b6d4 65%, #059669 100%);
  --brand-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #0369a1 30%, #0891b2 65%, #047857 100%);
  --text-gradient-blue-green: linear-gradient(135deg, #1d4ed8 0%, #0284c7 25%, #0ea5e9 50%, #06b6d4 75%, #10b981 100%);
  --hero-glow-light: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(56, 189, 248, 0.28) 0%, rgba(6, 182, 212, 0.18) 35%, rgba(16, 185, 129, 0.08) 70%, transparent 100%);
  --hero-glow-dark: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(56, 189, 248, 0.35) 0%, rgba(14, 116, 144, 0.25) 35%, rgba(16, 185, 129, 0.12) 70%, transparent 100%);

  /* Font Families */
  --font-sans: "Hind Siliguri", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* Elevation / Multi-Layer 3D Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 25px rgba(56, 189, 248, 0.4);
  --shadow-3d-sm: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 12px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-3d-md: 0 4px 10px rgba(15, 23, 42, 0.05), 0 12px 28px -4px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-3d-lg: 0 10px 20px rgba(15, 23, 42, 0.08), 0 24px 48px -6px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Category Colors (7 Requirements) */
  /* ACADEMIC - Blue (#3B82F6) */
  --cat-academic-color: #3b82f6;
  --cat-academic-bg: #eff6ff;
  --cat-academic-border: #bfdbfe;
  --cat-academic-dark-bg: rgba(59, 130, 246, 0.18);
  --cat-academic-dark-border: rgba(59, 130, 246, 0.4);

  /* MATH - Purple (#8B5CF6) */
  --cat-math-color: #8b5cf6;
  --cat-math-bg: #f5f3ff;
  --cat-math-border: #ddd6fe;
  --cat-math-dark-bg: rgba(139, 92, 246, 0.18);
  --cat-math-dark-border: rgba(139, 92, 246, 0.4);

  /* TIME & DATE - Orange (#F97316) */
  --cat-time-color: #f97316;
  --cat-time-bg: #fff7ed;
  --cat-time-border: #fed7aa;
  --cat-time-dark-bg: rgba(249, 115, 22, 0.18);
  --cat-time-dark-border: rgba(249, 115, 22, 0.4);

  /* PRODUCTIVITY - Green (#22C55E) */
  --cat-prod-color: #22c55e;
  --cat-prod-bg: #f0fdf4;
  --cat-prod-border: #bbf7d0;
  --cat-prod-dark-bg: rgba(34, 197, 94, 0.18);
  --cat-prod-dark-border: rgba(34, 197, 94, 0.4);

  /* TEXT - Pink (#EC4899) */
  --cat-text-color: #ec4899;
  --cat-text-bg: #fdf2f8;
  --cat-text-border: #fbcfe8;
  --cat-text-dark-bg: rgba(236, 72, 153, 0.18);
  --cat-text-dark-border: rgba(236, 72, 153, 0.4);

  /* IMAGE & FILE - Cyan (#06B6D4) */
  --cat-image-color: #06b6d4;
  --cat-image-bg: #ecfeff;
  --cat-image-border: #a5f3fc;
  --cat-image-dark-bg: rgba(6, 182, 212, 0.18);
  --cat-image-dark-border: rgba(6, 182, 212, 0.4);

  /* OTHER - Gray (#6B7280) */
  --cat-other-color: #6b7280;
  --cat-other-bg: #f9fafb;
  --cat-other-border: #e5e7eb;
  --cat-other-dark-bg: rgba(107, 114, 128, 0.18);
  --cat-other-dark-border: rgba(156, 163, 175, 0.4);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* Light Mode Defaults */
[data-theme="light"] {
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-glass-card: rgba(255, 255, 255, 0.75);
  --bg-muted: #f1f5f9;
  --bg-accent-subtle: #f0f9ff;
  --bg-section-wash-1: linear-gradient(180deg, rgba(240, 249, 255, 0.6) 0%, rgba(248, 250, 252, 0.9) 100%);
  --bg-section-wash-2: linear-gradient(180deg, rgba(236, 254, 255, 0.5) 0%, rgba(240, 253, 244, 0.5) 50%, rgba(248, 250, 252, 0.9) 100%);

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --text-inverse: #ffffff;

  --border-color: #e2e8f0;
  --border-color-hover: #cbd5e1;
  --border-brand: #7dd3fc;

  --input-bg: #ffffff;
  --input-border: #cbd5e1;

  --hero-bg-glow: var(--hero-glow-light);
  --card-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --card-hover-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --bg-main: #0b132b;
  --bg-surface: #111d4a;
  --bg-surface-elevated: #1c2a5e;
  --bg-glass: rgba(11, 19, 43, 0.85);
  --bg-glass-card: rgba(17, 29, 74, 0.75);
  --bg-muted: #1e293b;
  --bg-accent-subtle: rgba(56, 189, 248, 0.12);
  --bg-section-wash-1: linear-gradient(180deg, rgba(17, 29, 74, 0.4) 0%, rgba(11, 19, 43, 0.9) 100%);
  --bg-section-wash-2: linear-gradient(180deg, rgba(14, 116, 144, 0.15) 0%, rgba(5, 150, 105, 0.1) 50%, rgba(11, 19, 43, 0.9) 100%);

  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-subtle: #94a3b8;
  --text-inverse: #0f172a;

  --border-color: #1e293b;
  --border-color-hover: #334155;
  --border-brand: #0284c7;

  --input-bg: #0f172a;
  --input-border: #334155;

  --hero-bg-glow: var(--hero-glow-dark);
  --card-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
  --card-hover-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.5);
}