/* OKLCH Color System
 * Store Lightness/Chroma/Hue separately for dark mode flexibility.
 * Pattern used identically across Campfire, Writebook, and Fizzy.
 *
 * Usage: oklch(var(--lch-blue)) or color-mix() for derived colors.
 */

:root {
  /* --- Brand colors (LCH triplets) --- */
  --lch-blue: 54% 0.15 255;
  --lch-red: 51% 0.2 31;
  --lch-green: 65% 0.23 142;
  --lch-yellow: 80% 0.18 85;
  --lch-purple: 50% 0.2 300;
  --lch-orange: 65% 0.18 55;

  /* --- Semantic colors --- */
  --color-link: oklch(var(--lch-blue));
  --color-positive: oklch(var(--lch-green));
  --color-negative: oklch(var(--lch-red));
  --color-warning: oklch(var(--lch-yellow));
  --color-accent: oklch(var(--lch-purple));

  /* --- Surface colors --- */
  --color-canvas: oklch(99% 0 0);
  --color-surface: oklch(96% 0 0);
  --color-ink: oklch(15% 0 0);
  --color-ink-muted: oklch(45% 0 0);
  --color-border: oklch(85% 0 0);

  /* --- Spacing (character-based horizontal, rem-based vertical) --- */
  --inline-space: 1ch;
  --block-space: 1rem;
  --inline-space-s: 0.5ch;
  --block-space-s: 0.5rem;
  --inline-space-l: 2ch;
  --block-space-l: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Lighter, slightly desaturated for dark backgrounds */
    --lch-blue: 72% 0.16 248;
    --lch-red: 68% 0.18 28;
    --lch-green: 75% 0.2 140;
    --lch-yellow: 85% 0.16 83;
    --lch-purple: 70% 0.18 298;
    --lch-orange: 75% 0.16 53;

    /* Inverted surfaces */
    --color-canvas: oklch(14% 0 0);
    --color-surface: oklch(20% 0 0);
    --color-ink: oklch(90% 0 0);
    --color-ink-muted: oklch(60% 0 0);
    --color-border: oklch(30% 0 0);
  }
}