/* ===================================================================
   TOKO.AI — COLOR TOKENS
   Brand anchors: sky #70e1f5 (trust, digital) + peach #ffd194 (warmth, UMKM)
   Both anchors sit at ~85% lightness / ~0.10 chroma — we build full ramps
   around them in OKLCH, holding L/C steps consistent and only varying hue.
   Neutrals carry a faint warm hue (50) instead of true gray, so the whole
   UI feels warm/approachable rather than clinical SaaS-gray.
   =================================================================== */

:root {
  /* ---------- Neutral (warm gray) ramp ---------- */
  --neutral-0:   oklch(99% 0.003 80);
  --neutral-50:  oklch(97.5% 0.005 75);
  --neutral-100: oklch(94.5% 0.008 72);
  --neutral-200: oklch(89% 0.011 70);
  --neutral-300: oklch(80% 0.013 68);
  --neutral-400: oklch(66% 0.016 64);
  --neutral-500: oklch(53% 0.017 60);
  --neutral-600: oklch(43% 0.016 56);
  --neutral-700: oklch(33% 0.014 52);
  --neutral-800: oklch(23% 0.011 48);
  --neutral-900: oklch(16% 0.009 45);
  --neutral-950: oklch(11% 0.007 45);

  /* ---------- Sky (primary) ramp — hue 205, anchored at 400 ---------- */
  --sky-50:  oklch(97.5% 0.015 205);
  --sky-100: oklch(95% 0.030 205);
  --sky-200: oklch(91% 0.050 205);
  --sky-300: oklch(87.5% 0.070 205);
  --sky-400: oklch(83% 0.090 205); /* ≈ #70e1f5 brand anchor */
  --sky-500: oklch(72% 0.120 206); /* primary action color */
  --sky-600: oklch(61% 0.138 207);
  --sky-700: oklch(50% 0.132 208);
  --sky-800: oklch(40% 0.108 208);
  --sky-900: oklch(30% 0.078 209);

  /* ---------- Peach (secondary) ramp — hue 70, anchored at 400 ---------- */
  --peach-50:  oklch(97.5% 0.015 75);
  --peach-100: oklch(95% 0.032 74);
  --peach-200: oklch(91% 0.055 73);
  --peach-300: oklch(87.5% 0.075 72);
  --peach-400: oklch(83% 0.095 72); /* ≈ #ffd194 brand anchor */
  --peach-500: oklch(74% 0.125 62);
  --peach-600: oklch(63% 0.145 50);
  --peach-700: oklch(52% 0.135 42);
  --peach-800: oklch(42% 0.108 37);
  --peach-900: oklch(31% 0.078 34);

  /* ---------- Mint (extended-family) ramp — hue ~162-165 ----------
     Continues the sky/peach arc (coral 28 -> peach 70 -> mint 162 -> sky 205)
     using the identical L/C steps. Promoted here from web/app/landing.css,
     which defined it landing-scoped; promoting it makes the arc a real
     4-hue DS family instead of a landing-only extension. See this plan's
     Self-Review for the discrepancy this resolves. ---------- */
  --mint-50:  oklch(97.5% 0.015 162);
  --mint-100: oklch(95% 0.030 162);
  --mint-200: oklch(91% 0.050 162);
  --mint-300: oklch(87.5% 0.070 162);
  --mint-400: oklch(83% 0.090 162);
  --mint-500: oklch(72% 0.120 163);
  --mint-600: oklch(61% 0.138 164);
  --mint-700: oklch(50% 0.132 165);

  /* ---------- Coral (extended-family) ramp — hue ~25-28 ---------- */
  --coral-50:  oklch(97.5% 0.015 28);
  --coral-100: oklch(95% 0.030 28);
  --coral-200: oklch(91% 0.050 28);
  --coral-300: oklch(87.5% 0.070 28);
  --coral-400: oklch(83% 0.090 28);
  --coral-500: oklch(72% 0.120 27);
  --coral-600: oklch(61% 0.138 26);
  --coral-700: oklch(50% 0.132 25);

  /* ---------- Plum ramp — hue ~318-322. Dashboard primary accent ----------
     Introduced with the Toko Dashboard v2 design. v2 binds plum-700 to its --tk-accent,
     so this ramp carries the role sky used to hold across /dasbor. Same L/C ladder as every
     family above — only hue differs. */
  --plum-50:  oklch(97.5% 0.015 322);
  --plum-100: oklch(95% 0.030 322);
  --plum-200: oklch(91% 0.050 321);
  --plum-300: oklch(87.5% 0.070 321);
  --plum-400: oklch(83% 0.090 320);
  --plum-500: oklch(72% 0.120 320);
  --plum-600: oklch(61% 0.138 319);
  --plum-700: oklch(50% 0.132 318);
  --plum-800: oklch(40% 0.108 318);
  --plum-900: oklch(30% 0.078 317);

  /* ---------- Jade ramp — hue ~152-156. Positive/settled states ----------
     Seated between success (148) and mint (162) so all three stay tellable apart. */
  --jade-50:  oklch(97.5% 0.015 152);
  --jade-100: oklch(95% 0.030 152);
  --jade-200: oklch(91% 0.050 153);
  --jade-300: oklch(87.5% 0.070 153);
  --jade-400: oklch(83% 0.090 154);
  --jade-500: oklch(72% 0.120 154);
  --jade-600: oklch(61% 0.138 155);
  --jade-700: oklch(50% 0.132 155);
  --jade-800: oklch(40% 0.108 156);
  --jade-900: oklch(30% 0.078 156);

  /* ---------- Marigold ramp — hue ~87-92. Category/label accents ----------
     Warmer and more saturated than warning (85), which stays reserved for semantics. */
  --marigold-50:  oklch(97.5% 0.015 92);
  --marigold-100: oklch(95% 0.030 92);
  --marigold-200: oklch(91% 0.050 91);
  --marigold-300: oklch(87.5% 0.070 91);
  --marigold-400: oklch(83% 0.090 90);
  --marigold-500: oklch(72% 0.120 90);
  --marigold-600: oklch(61% 0.138 89);
  --marigold-700: oklch(50% 0.132 88);
  --marigold-800: oklch(40% 0.108 88);
  --marigold-900: oklch(30% 0.078 87);

  /* v2 reaches for a neutral step between 100 and 200 that the ramp above skips. */
  --neutral-150: oklch(92% 0.0095 71);

  /* ---------- Functional (same L/C family, distinct hue) ---------- */
  --success-500: oklch(62% 0.135 148);
  --success-100: oklch(93% 0.045 150);
  --warning-500: oklch(76% 0.135 85);
  --warning-100: oklch(94% 0.05 90);
  --error-500:   oklch(58% 0.175 25);
  --error-100:   oklch(93% 0.05 22);

  /* ================= Semantic aliases ================= */
  --color-bg:            var(--neutral-0);
  --color-bg-subtle:     var(--neutral-50);
  --color-bg-sunken:     var(--neutral-100);
  --color-surface:       var(--neutral-0);
  --color-surface-raised:#ffffff;
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-500);
  --color-text-faint:    var(--neutral-400);
  --color-text-inverse:  var(--neutral-0);

  --color-ink:           var(--neutral-900); /* Uber-style near-black for primary CTAs */
  --color-ink-hover:     var(--neutral-800);

  --color-primary:       var(--sky-500);
  --color-primary-hover: var(--sky-600);
  --color-primary-active:var(--sky-700);
  --color-primary-bg:    var(--sky-50);
  --color-primary-border:var(--sky-300);

  --color-secondary:       var(--peach-400);
  --color-secondary-hover: var(--peach-500);
  --color-secondary-bg:    var(--peach-50);
  --color-secondary-border:var(--peach-300);

  --color-success: var(--success-500);
  --color-success-bg: var(--success-100);
  --color-warning: var(--warning-500);
  --color-warning-bg: var(--warning-100);
  --color-error: var(--error-500);
  --color-error-bg: var(--error-100);

  --color-focus-ring: var(--sky-300);

  /* Hover accent — interactive elements warm to peach/yellow on hover */
  --color-hover-warm:        var(--peach-400); /* solid fill hover (dark text) */
  --color-hover-warm-tint:   var(--peach-50);  /* subtle bg hover for ghost/outline */
}