/* ===== Design Tokens ===== */
:root {
  /* Brand */
  --color-primary: #4f6ef2;
  --color-primary-hover: #3d5bd9;
  --color-primary-light: #eef1ff;
  --color-primary-bg: #f0f2ff;
  --color-primary-bg-hover: #e0e4ff;

  /* Status */
  --color-success: #2e9c4a;
  --color-success-light: #e8f5e9;
  --color-success-hover: #d4edda;
  --color-danger: #d44;
  --color-danger-light: #fdecea;
  --color-danger-hover: #fbd6d3;
  --color-warning: #c05800;
  --color-warning-light: #fef0e6;
  --color-warning-hover: #fde1cf;
  --color-info: #1a56db;
  --color-info-light: #e8f0fe;

  /* Neutrals */
  --color-bg: #f5f7fa;
  --color-bg-desktop: #eef1f8;
  --color-surface: #fff;
  --color-text: #333;
  --color-text-strong: #222;
  --color-text-muted: #666;
  --color-text-faint: #888;
  --color-text-disabled: #aaa;
  --color-border: #e0e0e0;
  --color-border-light: rgba(0, 0, 0, 0.07);
  --color-border-medium: rgba(0, 0, 0, 0.08);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
  --shadow-fab: 0 2px 8px rgba(79, 110, 242, 0.3),
                 0 4px 16px rgba(79, 110, 242, 0.25),
                 0 8px 28px rgba(79, 110, 242, 0.18),
                 0 12px 40px rgba(79, 110, 242, 0.12);
  --shadow-fab-hover: 0 3px 12px rgba(79, 110, 242, 0.4),
                       0 6px 22px rgba(79, 110, 242, 0.3),
                       0 10px 36px rgba(79, 110, 242, 0.22),
                       0 16px 50px rgba(79, 110, 242, 0.15);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 18px;
  --radius-full: 50%;

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  /* Layout */
  --nav-height: 68px;
  --sidebar-width: 220px;
  --header-height: 60px;
  --fab-size: 52px;
  --content-max-width: 960px;

  /* Z-index */
  --z-nav: 300;
  --z-fab: 300;
  --z-modal: 500;
  --z-toast: 600;

  /* Motion */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ===== Dark Mode ===== */
html.dark {
  --color-primary: #6c8cff;
  --color-primary-hover: #5a7aee;
  --color-primary-light: #1e2a4a;
  --color-primary-bg: #1a2340;
  --color-primary-bg-hover: #243050;

  --color-success: #4caf50;
  --color-success-light: #1a3a1e;
  --color-success-hover: #254a28;
  --color-danger: #f44;
  --color-danger-light: #3a1a1a;
  --color-danger-hover: #4a2222;
  --color-warning: #ff9800;
  --color-warning-light: #3a2a10;
  --color-warning-hover: #4a3418;
  --color-info: #42a5f5;
  --color-info-light: #1a2a3a;

  --color-bg: #121218;
  --color-bg-desktop: #0e0e14;
  --color-surface: #1c1c26;
  --color-text: #e0e0e8;
  --color-text-strong: #f0f0f8;
  --color-text-muted: #aaa;
  --color-text-faint: #888;
  --color-text-disabled: #555;
  --color-border: #2a2a36;
  --color-border-light: rgba(255,255,255,0.08);
  --color-border-medium: rgba(255,255,255,0.10);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
}

html.dark .login-card,
html.dark .sidebar-nav,
html.dark .task-card,
html.dark .reward-card,
html.dark .done-item,
html.dark .settings-card,
html.dark .modal-content,
html.dark .balance-card {
  background: var(--color-surface);
}

html.dark .bottom-nav {
  background: rgba(18,18,24,0.92);
}

html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="date"],
html.dark textarea,
html.dark select {
  background: #24242e;
  border-color: var(--color-border);
  color: var(--color-text);
}

html.dark input:focus, html.dark textarea:focus, html.dark select:focus {
  background: #2a2a36;
}

html.dark .tab-btn { background: rgba(255,255,255,0.06); color: #888; }
html.dark .tab-btn.active {
  background: rgba(108,140,255,0.15);
  color: var(--color-primary);
  border-color: rgba(108,140,255,0.3);
}

html.dark ::-webkit-scrollbar-thumb { background: #444; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #666; }

html.dark .sidebar-user:hover,
html.dark .settings-action-btn:hover {
  background: rgba(255,255,255,0.05);
}