/* ==========================================================================
   Layer 2: Color System — OKLCH auto-generated palettes + semantic tokens
   Every scale generated from a single hue + chroma input.
   Theme by overriding the inputs in your theme file.
   ========================================================================== */

:root {
  /* --- Brand inputs (override in theme) --- */
  --brand-hue: 24;
  --brand-chroma: 0.18;

  /* --- Brand scale (generated from --brand-hue + --brand-chroma) --- */
  --brand-25:  oklch(98.5% 0.008 var(--brand-hue));
  --brand-50:  oklch(97% 0.02 var(--brand-hue));
  --brand-100: oklch(93% 0.03 var(--brand-hue));
  --brand-200: oklch(87% 0.05 var(--brand-hue));
  --brand-300: oklch(78% var(--brand-chroma) var(--brand-hue));
  --brand-400: oklch(68% var(--brand-chroma) var(--brand-hue));
  --brand-500: oklch(58% var(--brand-chroma) var(--brand-hue));
  --brand-600: oklch(48% var(--brand-chroma) var(--brand-hue));
  --brand-700: oklch(40% var(--brand-chroma) var(--brand-hue));
  --brand-800: oklch(32% var(--brand-chroma) var(--brand-hue));
  --brand-900: oklch(24% var(--brand-chroma) var(--brand-hue));
  --brand-950: oklch(17% var(--brand-chroma) var(--brand-hue));

  /* --- Neutral scale (brand-tinted greys) --- */
  --neutral-50:  oklch(97% 0.01 var(--brand-hue));
  --neutral-100: oklch(93% 0.01 var(--brand-hue));
  --neutral-200: oklch(87% 0.01 var(--brand-hue));
  --neutral-300: oklch(78% 0.015 var(--brand-hue));
  --neutral-400: oklch(68% 0.015 var(--brand-hue));
  --neutral-500: oklch(55% 0.015 var(--brand-hue));
  --neutral-600: oklch(45% 0.015 var(--brand-hue));
  --neutral-700: oklch(37% 0.01 var(--brand-hue));
  --neutral-800: oklch(28% 0.01 var(--brand-hue));
  --neutral-900: oklch(20% 0.01 var(--brand-hue));
  --neutral-950: oklch(14% 0.01 var(--brand-hue));

  /* --- Success scale (generated from single hue) --- */
  --success-hue: 145;
  --success-chroma: 0.15;
  --success-light: oklch(93% 0.04 var(--success-hue));
  --success-mid:   oklch(55% var(--success-chroma) var(--success-hue));
  --success-dark:  oklch(35% var(--success-chroma) var(--success-hue));

  /* --- Warning scale (generated from single hue) --- */
  --warning-hue: 75;
  --warning-chroma: 0.15;
  --warning-light: oklch(93% 0.06 var(--warning-hue));
  --warning-mid:   oklch(65% var(--warning-chroma) var(--warning-hue));
  --warning-dark:  oklch(40% var(--warning-chroma) var(--warning-hue));

  /* --- Danger/error scale (generated from single hue) --- */
  --danger-hue: 25;
  --danger-chroma: 0.18;
  --danger-light: oklch(93% 0.04 var(--danger-hue));
  --danger-mid:   oklch(55% var(--danger-chroma) var(--danger-hue));
  --danger-dark:  oklch(35% var(--danger-chroma) var(--danger-hue));

  /* --- Info scale (generated from single hue) --- */
  --info-hue: 240;
  --info-chroma: 0.15;
  --info-light: oklch(93% 0.04 var(--info-hue));
  --info-mid:   oklch(55% var(--info-chroma) var(--info-hue));
  --info-dark:  oklch(35% var(--info-chroma) var(--info-hue));

  /* --- Semantic tokens (what components reference) --- */
  --color-primary:         var(--brand-500);
  --color-primary-content: #fff;
  --color-secondary:       var(--brand-800);
  --color-accent:          var(--brand-400);

  --color-surface:         #fff;
  --color-surface-alt:     var(--brand-50);
  --color-surface-dark:    var(--brand-950);

  --color-ink:             var(--neutral-900);
  --color-ink-soft:        var(--neutral-500);
  --color-ink-muted:       var(--neutral-400);

  --color-border:          var(--neutral-200);
  --color-border-soft:     var(--neutral-100);

  --color-success:         var(--success-mid);
  --color-warning:         var(--warning-mid);
  --color-danger:          var(--danger-mid);
  --color-info:            var(--info-mid);
}