/* 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 (Blue to Green) */
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #0284c7 45%, #059669 100%);
  --brand-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #0369a1 45%, #047857 100%);
  --text-gradient-blue-green: linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #10b981 100%);
  --hero-glow-light: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.15) 0%, rgba(6, 182, 212, 0.05) 50%, transparent 80%);
  --hero-glow-dark: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.2) 0%, rgba(14, 116, 144, 0.1) 50%, transparent 80%);

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

  /* Elevation / 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 20px rgba(56, 189, 248, 0.35);

  /* Category Colors (7 Requirements) */
  /* ACADEMIC - Blue */
  --cat-academic-color: #2563eb;
  --cat-academic-bg: #eff6ff;
  --cat-academic-border: #bfdbfe;
  --cat-academic-dark-bg: rgba(37, 99, 235, 0.18);
  --cat-academic-dark-border: rgba(59, 130, 246, 0.4);

  /* MATH - Purple */
  --cat-math-color: #9333ea;
  --cat-math-bg: #faf5ff;
  --cat-math-border: #e9d5ff;
  --cat-math-dark-bg: rgba(147, 51, 234, 0.18);
  --cat-math-dark-border: rgba(168, 85, 247, 0.4);

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

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

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

  /* IMAGE & FILE - Cyan */
  --cat-image-color: #0891b2;
  --cat-image-bg: #ecfeff;
  --cat-image-border: #a5f3fc;
  --cat-image-dark-bg: rgba(8, 145, 178, 0.18);
  --cat-image-dark-border: rgba(6, 182, 212, 0.4);

  /* OTHER - Gray */
  --cat-other-color: #4b5563;
  --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.85);
  --bg-muted: #f1f5f9;
  --bg-accent-subtle: #f0f9ff;

  --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(17, 29, 74, 0.85);
  --bg-muted: #1e293b;
  --bg-accent-subtle: rgba(56, 189, 248, 0.1);

  --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);
}