/* OKLCH Color System — Festmate Brand Palette
 * Dark mode is the default (festivals happen at night).
 * Supports three theme states via html[data-theme]:
 *   - No attribute: follows OS preference (prefers-color-scheme)
 *   - data-theme="light": explicit light mode
 *   - data-theme="dark": explicit dark mode
 *
 * Brand colors: Flare, Golden, UV, Laser
 * Surfaces: Midnight, Deep Stage (dark); Bright (light)
 * Usage: oklch(var(--lch-flare)) or color-mix() for derived colors.
 */

@layer base {
  :root {
    color-scheme: dark light;

    /* --- Brand colors (LCH triplets) --- */
    --lch-flare: 69% 0.20 35;
    --lch-golden: 84% 0.16 84;
    --lch-uv: 66% 0.23 304;
    --lch-laser: 78% 0.16 167;
    --lch-sky: 72% 0.12 230;

    /* --- Semantic colors --- */
    --color-link: oklch(var(--lch-flare));
    --color-positive: oklch(var(--lch-laser));
    --color-negative: oklch(var(--lch-flare));
    --color-warning: oklch(var(--lch-golden));
    --color-accent: oklch(var(--lch-uv));

    /* --- Surface colors (dark default) --- */
    --color-canvas: oklch(17% 0.02 276);
    --color-surface: oklch(22% 0.03 278);
    --color-ink: oklch(96% 0.007 295);
    --color-ink-muted: oklch(69% 0.04 293);
    --color-border: oklch(30% 0.02 278);

    /* --- 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;

    /* --- Sizing --- */
    --touch-min: 2.75rem; /* 44px — WCAG 2.5.8 */

    /* --- Radius --- */
    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-pill: 99px;
  }

  /* System preference: light (when no explicit data-theme set) */
  @media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]):not([data-theme="light"]) {
      color-scheme: light;

      --lch-flare: 53% 0.22 35;
      --lch-golden: 52% 0.16 84;
      --lch-uv: 52% 0.25 304;
      --lch-laser: 45% 0.18 167;
      --lch-sky: 60% 0.14 230;

      --color-canvas: oklch(96% 0.007 295);
      --color-surface: oklch(99% 0.005 295);
      --color-ink: oklch(17% 0.02 276);
      --color-ink-muted: oklch(45% 0.03 293);
      --color-border: oklch(85% 0.01 293);
    }
  }

  /* Explicit light mode (user toggled) */
  html[data-theme="light"] {
    color-scheme: light;

    --lch-flare: 53% 0.22 35;
    --lch-golden: 52% 0.16 84;
    --lch-uv: 52% 0.25 304;
    --lch-laser: 45% 0.18 167;
    --lch-sky: 60% 0.14 230;

    --color-canvas: oklch(96% 0.007 295);
    --color-surface: oklch(99% 0.005 295);
    --color-ink: oklch(17% 0.02 276);
    --color-ink-muted: oklch(45% 0.03 293);
    --color-border: oklch(85% 0.01 293);
  }

  /* Explicit dark mode (user toggled, needed when OS is light) */
  html[data-theme="dark"] {
    color-scheme: dark;

    --lch-flare: 69% 0.20 35;
    --lch-golden: 84% 0.16 84;
    --lch-uv: 66% 0.23 304;
    --lch-laser: 78% 0.16 167;
    --lch-sky: 72% 0.12 230;

    --color-canvas: oklch(17% 0.02 276);
    --color-surface: oklch(22% 0.03 278);
    --color-ink: oklch(96% 0.007 295);
    --color-ink-muted: oklch(69% 0.04 293);
    --color-border: oklch(30% 0.02 278);
  }
}