@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&family=Marck+Script&display=swap');

/* Theme tokens for lilac palette */
:root {
  --color-primary: #C8A2C8;      /* Lilac */
  --color-primary-600: #8E6E8E;  /* Dark Lilac */
  --color-primary-50: #F3E8F7;   /* Light Lilac */
  --color-primary-200: #E6DFF0;
  --color-primary-900: #2B1933;
  --color-accent: #7E57C2;       /* Accent Violet */
  --ink: #1F1B24;                /* Text */
  --ink-muted: #3B3642;
  --surface: #FAF7FC;            /* Background */
  --surface-alt: #FFF9F5;
  --border: #E8DFF0;

  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 14px rgba(30, 22, 54, .12);
  --shadow-xl: 0 25px 55px rgba(30, 22, 54, .16);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --paper-grain: radial-gradient(circle at 1px 1px, rgba(123,86,146,.16) 1px, transparent 0);
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Marck Script', 'Brush Script MT', 'Segoe Script', cursive;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #17141A;
    --ink: #F7F3FA;
    --ink-muted: #CCC1D8;
    --surface-alt: #211D25;
    --border: #2B2631;
    --paper-grain: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  }
}