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

:root {
  /* Coral palette */
  --coral-1: #fff5f3;
  --coral-2: #ffe8e3;
  --coral-3: #ffcfc6;
  --coral-4: #ffb3a6;
  --coral-5: #f47560;
  --coral-6: #e05c47;
  --coral-7: #c44433;

  /* Neutrals — warm */
  --sand-1: #faf9f7;
  --sand-2: #f3f1ee;
  --sand-3: #e8e4df;
  --sand-4: #c8c3bc;
  --sand-5: #8a8480;
  --sand-6: #4a4643;
  --sand-7: #1e1c1a;

  /* Priority */
  --priority-asap: #ef4444;
  --priority-high: #f97316;
  --priority-medium: #eab308;
  --priority-low: #9ca3af;
  /* Semantic */
  --color-bg: var(--sand-1);
  --color-surface: #ffffff;
  --color-border: var(--sand-3);
  --color-text: var(--sand-7);
  --color-text-muted: var(--sand-5);
  --color-accent: var(--coral-5);
  --color-accent-light: var(--coral-2);
  --color-accent-dark: var(--coral-6);

  /* Typography */
  --font-sans: 'Nunito', system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Radii — Open Props scale (inlined) */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-5: 16px;
  --radius-6: 20px;
  --radius-round: 1e5px;

  --radius-sm: var(--radius-2);
  --radius-md: var(--radius-3);
  --radius-lg: var(--radius-4);
  --radius-xl: var(--radius-5);
  --radius-pill: var(--radius-round);

  /* Shadows — Open Props scale (inlined) */
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
}

[data-theme="dark"] {
  --color-bg: #1a1816;
  --color-surface: #252220;
  --color-border: #3a3532;
  --color-text: #f0ede9;
  --color-text-muted: #8a8480;
  --color-accent-light: #3d1e18;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

[data-accent="coral"] {
  --color-accent: var(--coral-5);
  --color-accent-light: var(--coral-2);
  --color-accent-dark: var(--coral-6);
}
[data-accent="blue"] {
  --color-accent: #1877f2;
  --color-accent-light: #e0eeff;
  --color-accent-dark: #0f5bcc;
}
[data-accent="green"] {
  --color-accent: #6b9e6b;
  --color-accent-light: #eaf3ea;
  --color-accent-dark: #4e7a4e;
}
[data-accent="red"] {
  --color-accent: #e5383b;
  --color-accent-light: #fde8e8;
  --color-accent-dark: #c02e2e;
}
[data-accent="lilac"] {
  --color-accent: #9b72cf;
  --color-accent-light: #f0e8fa;
  --color-accent-dark: #7a52b0;
}

/* Dark mode overrides for accent-light (muted tint backgrounds) */
[data-theme="dark"][data-accent="coral"],
[data-theme="dark"]:not([data-accent]) {
  --color-accent-light: #3d1e18;
}
[data-theme="dark"][data-accent="red"] {
  --color-accent-light: #3d1212;
}
[data-theme="dark"][data-accent="blue"] {
  --color-accent-light: #0f2a4a;
}
[data-theme="dark"][data-accent="green"] {
  --color-accent-light: #1a2e1a;
}
[data-theme="dark"][data-accent="lilac"] {
  --color-accent-light: #2a1a3d;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent); }
  50%       { transform: scale(1.04); box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }