/* Theme: color scheme and tokens only. No box model, spacing or selectors
   describing page structure belong here — see layout.css for that. Swap
   this file (or its values) to retheme the site without touching layout. */

:root {
  --color-bg: #fdfcf9;
  --color-surface: #ffffff;
  --color-text: #2b2620;
  --color-text-muted: #6b6456;
  --color-accent: #a5673f;
  --color-accent-2: #c98a4b;
  --color-border: #e7e1d6;
  --color-badge-bg: var(--color-border);
  --color-badge-text: var(--color-text-muted);

  --font-body: Georgia, "Iowan Old Style", serif;
  --font-heading: Georgia, "Iowan Old Style", serif;

  --radius: 0.5rem;
  --bg-image: none;
  --card-hover-shadow: 0 10px 20px -12px rgba(43, 38, 32, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171432;
    --color-surface: #221d45;
    --color-text: #f3efff;
    --color-text-muted: #b6acdc;
    --color-accent: #ff8fb1;
    --color-accent-2: #6ee7ff;
    --color-border: #3a2f66;
    --color-badge-bg: var(--color-accent-2);
    --color-badge-text: #12102a;

    --radius: 0.9rem;
    --card-hover-shadow:
      0 12px 28px -10px rgba(255, 143, 177, 0.45),
      0 0 0 3px rgba(110, 231, 255, 0.25);

    /* a scattering of tiny stars behind the page */
    --bg-image:
      radial-gradient(1.5px 1.5px at 10% 20%, #fff 100%, transparent 60%),
      radial-gradient(1.5px 1.5px at 80% 12%, #fff 100%, transparent 60%),
      radial-gradient(2px 2px at 60% 32%, #fff 100%, transparent 60%),
      radial-gradient(1px 1px at 28% 68%, #fff 100%, transparent 60%),
      radial-gradient(1.5px 1.5px at 92% 58%, #fff 100%, transparent 60%),
      radial-gradient(1px 1px at 46% 85%, #fff 100%, transparent 60%),
      radial-gradient(1.5px 1.5px at 15% 92%, #fff 100%, transparent 60%),
      radial-gradient(1px 1px at 70% 78%, #fff 100%, transparent 60%);
  }

  /* site title gets a little candy-gradient sparkle at night */
  .site-title {
    background-image: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}