/* ==========================================
   360Degree M - Base Styles (Mobile-First)
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --purple: #7B61FF;
  --purple-dark: #6B4FEF;
  --purple-light: rgba(123, 97, 255, 0.10);
  --purple-glow: rgba(123, 97, 255, 0.25);
  --green: #22C55E;
  --green-light: rgba(34, 197, 94, 0.10);
  --amber: #F59E0B;
  --amber-light: rgba(245, 158, 11, 0.10);
  --red: #EF4444;
  --red-light: rgba(239, 68, 68, 0.10);
  --blue: #3B82F6;
  --blue-light: rgba(59, 130, 246, 0.10);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 9999px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --header-height: 52px;
  --sidebar-width: 260px;
  --transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html[data-theme="light"],
:root {
  --bg: #F5F6F8;
  --card: #ffffff;
  --card-hover: #FAFBFC;
  --text: #0F0F1A;
  --text2: #5A5A6E;
  --text3: #9A9AA8;
  --border: #E8E8F0;
  --border2: #F0F0F6;
  --sidebar-bg: #ffffff;
  --sidebar-border: #E8E8F0;
  --urgent-bg: #FEF2F2;
  --urgent-border: #FECACA;
  --overdue-bg: #FFF7ED;
  --overdue-border: #FDBA74;
}

html[data-theme="dark"] {
  --bg: #0C0C14;
  --card: #16161F;
  --card-hover: #1C1C28;
  --text: #F0F0F5;
  --text2: #A0A0B0;
  --text3: #6B6B7B;
  --border: #2A2A38;
  --border2: #1E1E2A;
  --sidebar-bg: #16161F;
  --sidebar-border: #2A2A38;
  --urgent-bg: rgba(127, 29, 29, 0.25);
  --urgent-border: #7F1D1D;
  --overdue-bg: rgba(154, 52, 18, 0.2);
  --overdue-border: #9A3412;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  height: 100vh;
  width: 100vw;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
}

a {
  color: var(--purple);
  text-decoration: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Selection */
::selection {
  background: var(--purple-light);
  color: var(--purple);
}