/* 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: 72% 0.22 304;
    --lch-laser: 78% 0.16 167;
    --lch-sky: 72% 0.12 230;

    /* --- Extended stage ramp (7 additional hues) ---
     * Used for festival stages beyond the first 5 via Stage#color_token.
     * Distributed around the hue wheel so adjacent stages stay distinct.
     */
    --lch-rose: 72% 0.19 10;
    --lch-amber: 78% 0.17 60;
    --lch-lime: 83% 0.17 115;
    --lch-jade: 75% 0.14 140;
    --lch-ocean: 76% 0.12 200;
    --lch-orchid: 68% 0.20 275;
    --lch-magenta: 70% 0.22 340;

    /* --- 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-xl: 16px;
    --radius-pill: 99px;

    /* --- Interactive borders (stronger for buttons/inputs) --- */
    --color-border-interactive: oklch(38% 0.03 278);

    /* --- Tertiary ink (very muted) --- */
    --color-ink-tertiary: oklch(55% 0.04 293);

    /* --- Avatar colors (legacy 5-color palette, kept until callsites migrate) --- */
    --color-av-1: oklch(var(--lch-flare));
    --color-av-2: oklch(var(--lch-uv));
    --color-av-3: oklch(var(--lch-laser));
    --color-av-4: oklch(var(--lch-golden));
    --color-av-5: oklch(var(--lch-sky));
    --color-av-1-text: oklch(17% 0.02 276);
    --color-av-2-text: oklch(96% 0.007 295);
    --color-av-3-text: oklch(17% 0.02 276);
    --color-av-4-text: oklch(17% 0.02 276);
    --color-av-5-text: oklch(17% 0.02 276);

    /* --- Crew identity palette (12 hues spaced ~30° apart) ---
     * Per-group avatar identity colors. Tuned to similar perceptual
     * lightness (~65%) and chroma (~0.20) so hue alone gives enough
     * contrast for the auto-assignment algorithm. Identical in light
     * and dark mode — these are identity colors, not surface colors.
     *
     * Aliasing: crew-02 ≈ flare, crew-04 ≈ golden, crew-06 ≈ laser,
     * crew-10 ≈ uv. The values are deliberately the same as the brand
     * tokens but kept independent so a brand refresh doesn't ripple
     * silently through avatar identity.
     */
    --lch-crew-01-rose:    66% 0.22 10;
    --lch-crew-02-coral:   62% 0.24 30;
    --lch-crew-03-amber:   72% 0.19 70;
    --lch-crew-04-citrine: 82% 0.18 95;
    --lch-crew-05-lime:    72% 0.22 130;
    --lch-crew-06-laser:   72% 0.19 165;
    --lch-crew-07-teal:    66% 0.14 200;
    --lch-crew-08-sky:     66% 0.16 235;
    --lch-crew-09-cobalt:  58% 0.21 265;
    --lch-crew-10-uv:      55% 0.22 295;
    --lch-crew-11-magenta: 60% 0.25 325;
    --lch-crew-12-pink:    68% 0.22 355;

    --lch-crew-01-ink: 20% 0.08 10;
    --lch-crew-02-ink: 20% 0.08 30;
    --lch-crew-03-ink: 22% 0.07 70;
    --lch-crew-04-ink: 25% 0.07 95;
    --lch-crew-05-ink: 22% 0.08 130;
    --lch-crew-06-ink: 20% 0.07 165;
    --lch-crew-07-ink: 20% 0.06 200;
    --lch-crew-08-ink: 20% 0.07 235;
    --lch-crew-09-ink: 18% 0.08 265;
    --lch-crew-10-ink: 18% 0.08 295;
    --lch-crew-11-ink: 20% 0.09 325;
    --lch-crew-12-ink: 22% 0.08 355;

    --color-crew-01:     oklch(var(--lch-crew-01-rose));
    --color-crew-02:     oklch(var(--lch-crew-02-coral));
    --color-crew-03:     oklch(var(--lch-crew-03-amber));
    --color-crew-04:     oklch(var(--lch-crew-04-citrine));
    --color-crew-05:     oklch(var(--lch-crew-05-lime));
    --color-crew-06:     oklch(var(--lch-crew-06-laser));
    --color-crew-07:     oklch(var(--lch-crew-07-teal));
    --color-crew-08:     oklch(var(--lch-crew-08-sky));
    --color-crew-09:     oklch(var(--lch-crew-09-cobalt));
    --color-crew-10:     oklch(var(--lch-crew-10-uv));
    --color-crew-11:     oklch(var(--lch-crew-11-magenta));
    --color-crew-12:     oklch(var(--lch-crew-12-pink));

    --color-crew-01-ink: oklch(var(--lch-crew-01-ink));
    --color-crew-02-ink: oklch(var(--lch-crew-02-ink));
    --color-crew-03-ink: oklch(var(--lch-crew-03-ink));
    --color-crew-04-ink: oklch(var(--lch-crew-04-ink));
    --color-crew-05-ink: oklch(var(--lch-crew-05-ink));
    --color-crew-06-ink: oklch(var(--lch-crew-06-ink));
    --color-crew-07-ink: oklch(var(--lch-crew-07-ink));
    --color-crew-08-ink: oklch(var(--lch-crew-08-ink));
    --color-crew-09-ink: oklch(var(--lch-crew-09-ink));
    --color-crew-10-ink: oklch(var(--lch-crew-10-ink));
    --color-crew-11-ink: oklch(var(--lch-crew-11-ink));
    --color-crew-12-ink: oklch(var(--lch-crew-12-ink));
  }

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

      --lch-rose: 56% 0.20 10;
      --lch-amber: 58% 0.18 60;
      --lch-lime: 57% 0.18 115;
      --lch-jade: 50% 0.14 140;
      --lch-ocean: 50% 0.15 200;
      --lch-orchid: 50% 0.20 275;
      --lch-magenta: 52% 0.22 340;

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

    --lch-rose: 56% 0.20 10;
    --lch-amber: 58% 0.18 60;
    --lch-lime: 57% 0.18 115;
    --lch-jade: 50% 0.14 140;
    --lch-ocean: 50% 0.15 200;
    --lch-orchid: 50% 0.20 275;
    --lch-magenta: 52% 0.22 340;

    --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: 72% 0.22 304;
    --lch-laser: 78% 0.16 167;
    --lch-sky: 72% 0.12 230;

    --lch-rose: 72% 0.19 10;
    --lch-amber: 78% 0.17 60;
    --lch-lime: 83% 0.17 115;
    --lch-jade: 75% 0.14 140;
    --lch-ocean: 76% 0.12 200;
    --lch-orchid: 68% 0.20 275;
    --lch-magenta: 70% 0.22 340;

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