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

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

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

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

  --font-sans: 'Nunito', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 1e5px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.08);
}

[data-theme="dark"] {
  --color-bg: #1a1816;
  --color-surface: #252220;
  --color-border: #3a3532;
  --color-text: #f0ede9;
  --color-text-muted: #8a8480;
  --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);
  --shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.5), 0 8px 16px -4px rgb(0 0 0 / 0.3);
}

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

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

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

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

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