/* ============================================================
   TIDY — Design Tokens
   Sleek, near-black, cool-tinted. One signature blue + a warm
   reward gold. Decisive semantic red (delete) / green (keep).
   Scope a theme by setting data-theme="dark|light" on a wrapper.
   ============================================================ */

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

:root {
  --font: 'Geist', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* spacing scale (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px;

  /* radii */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
  --r-xl: 28px; --r-card: 30px; --r-pill: 999px;

  /* motion */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .16s; --dur: .28s; --dur-slow: .5s;

  /* semantic verbs (stable across themes) */
  --keep:   oklch(0.72 0.14 162);
  --keep-2: oklch(0.66 0.15 162);
  --delete: oklch(0.64 0.19 25);
  --delete-2: oklch(0.58 0.20 25);
  --reward: oklch(0.80 0.11 78);   /* streak / XP — refined amber */
}

/* ---------------- DARK (hero) ---------------- */
[data-theme="dark"] {
  --bg:      oklch(0.155 0.007 256);
  --bg-2:    oklch(0.125 0.007 256);
  --elev:    oklch(0.198 0.008 256);
  --elev-2:  oklch(0.238 0.009 256);
  --elev-3:  oklch(0.278 0.010 256);
  --line:    oklch(1 0 0 / 0.08);
  --line-2:  oklch(1 0 0 / 0.15);
  --text:    oklch(0.975 0.003 256);
  --dim:     oklch(0.73 0.008 256);
  --faint:   oklch(0.55 0.010 256);
  --accent:  oklch(0.635 0.155 257);
  --accent-soft: oklch(0.635 0.155 257 / 0.18);
  --accent-press: oklch(0.575 0.155 257);
  --on-accent: oklch(0.99 0.01 256);
  --scrim:   oklch(0 0 0 / 0.62);
  --shadow:  0 24px 60px -18px oklch(0 0 0 / 0.7), 0 4px 14px -6px oklch(0 0 0 / 0.5);
  --shadow-card: 0 18px 40px -16px oklch(0 0 0 / 0.66), 0 2px 8px -4px oklch(0 0 0 / 0.5);
  color-scheme: dark;
}

/* ---------------- LIGHT ---------------- */
[data-theme="light"] {
  --bg:      oklch(0.975 0.004 256);
  --bg-2:    oklch(0.945 0.005 256);
  --elev:    oklch(1 0 0);
  --elev-2:  oklch(0.985 0.004 256);
  --elev-3:  oklch(0.965 0.005 256);
  --line:    oklch(0 0 0 / 0.08);
  --line-2:  oklch(0 0 0 / 0.14);
  --text:    oklch(0.24 0.010 256);
  --dim:     oklch(0.47 0.010 256);
  --faint:   oklch(0.62 0.010 256);
  --accent:  oklch(0.505 0.165 258);
  --accent-soft: oklch(0.505 0.165 258 / 0.10);
  --accent-press: oklch(0.44 0.165 258);
  --on-accent: oklch(0.99 0.008 256);
  --scrim:   oklch(0.3 0.02 256 / 0.4);
  --shadow:  0 24px 60px -20px oklch(0.3 0.03 256 / 0.28), 0 4px 14px -6px oklch(0.3 0.03 256 / 0.16);
  --shadow-card: 0 18px 44px -18px oklch(0.3 0.03 256 / 0.30), 0 2px 8px -4px oklch(0.3 0.03 256 / 0.12);
  color-scheme: light;
}

/* base helpers */
.sift, .sift * { box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sift { font-family: var(--font); color: var(--text); }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* scrollbars hidden inside device */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

@keyframes pop-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes float-up { to { transform: translateY(-46px) scale(1.1); opacity: 0; } }
@keyframes ring-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes confetti-fall { to { transform: translateY(420px) rotate(var(--spin)); opacity: 0; } }