/* ============================================================
   Kumo — Color tokens
   Semantic, light/dark-adaptive via light-dark().
   Mode is driven by `color-scheme`, toggled with [data-mode].
   Values mirror Cloudflare Kumo's theme-kumo.css (oklch inlined).
   ============================================================ */

:root {
  color-scheme: light;
}
[data-mode="dark"] {
  color-scheme: dark;
}

:root,
[data-theme="kumo"] {
  /* ---- Brand (Cloudflare) ---- */
  --color-cf-orange: #f6821f;
  --color-cf-orange-deep: #f48120;
  --color-cf-yellow: #faad3f;
  --color-cf-text-gray: #404041;

  /* ---- Brand blue (interactive accent) ---- */
  --color-kumo-brand: light-dark(oklch(57.72% 0.2324 260), oklch(52% 0.2324 260));
  --color-kumo-brand-hover: oklch(48.8% 0.243 264.376);

  /* ---- Text ---- */
  --text-color-kumo-default: light-dark(oklch(21% 0.006 285.885), oklch(97% 0 0));
  --text-color-kumo-inverse: light-dark(oklch(97% 0 0), oklch(20.5% 0 0));
  --text-color-kumo-strong: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
  --text-color-kumo-subtle: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  --text-color-kumo-inactive: light-dark(oklch(87% 0 0), oklch(43.9% 0 0));
  --text-color-kumo-placeholder: light-dark(oklch(70.8% 0 0), oklch(55.6% 0 0));
  --text-color-kumo-brand: #f6821f;
  --text-color-kumo-link: light-dark(oklch(42.4% 0.199 265.638), oklch(70.7% 0.165 254.624));
  --text-color-kumo-info: light-dark(oklch(42.4% 0.199 265.638), oklch(70.7% 0.165 254.624));
  --text-color-kumo-success: light-dark(oklch(43.2% 0.095 166.913), oklch(90.5% 0.093 164.15));
  --text-color-kumo-danger: light-dark(oklch(50.5% 0.213 27.518), oklch(70.4% 0.191 22.216));
  --text-color-kumo-warning: light-dark(oklch(47.6% 0.114 61.907), oklch(85.2% 0.199 91.936));
  --text-color-kumo-badge-neutral-subtle: light-dark(oklch(26.9% 0 0), oklch(92.2% 0 0));
  --text-color-kumo-badge-inverted: light-dark(#fff, #000);

  /* ---- Surfaces (hierarchy: canvas > base > elevated/recessed) ---- */
  --color-kumo-canvas: light-dark(oklch(98.75% 0 0), oklch(10% 0 0));
  --color-kumo-base: light-dark(#fff, oklch(17% 0 0));
  --color-kumo-elevated: light-dark(oklch(98% 0 0), oklch(12% 0 0));
  --color-kumo-recessed: light-dark(oklch(96% 0 0), oklch(15% 0 0));
  --color-kumo-tint: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
  --color-kumo-contrast: light-dark(oklch(8.5% 0 0), oklch(98.5% 0 0));
  --color-kumo-overlay: light-dark(oklch(97.5% 0 0), oklch(26.9% 0 0));
  --color-kumo-control: light-dark(#fff, oklch(21% 0.006 285.885));
  --color-kumo-interact: light-dark(oklch(87% 0 0), oklch(37.1% 0 0));
  --color-kumo-fill: light-dark(oklch(92.2% 0 0), oklch(26.9% 0 0));
  --color-kumo-fill-hover: light-dark(oklch(96.5% 0 0), oklch(37.1% 0 0));

  /* ---- Lines, hairlines, focus ---- */
  --color-kumo-line: light-dark(oklch(14.5% 0 0 / 0.1), oklch(32% 0 0));
  --color-kumo-hairline: light-dark(oklch(93.5% 0 0), oklch(26.9% 0 0));
  --color-kumo-focus: light-dark(oklch(15% 0 0), oklch(93.5% 0 0));

  /* ---- Shadows ---- */
  --color-kumo-shadow-edge: light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.1));
  --color-kumo-shadow-drop: light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.3));

  /* ---- Semantic status ---- */
  --color-kumo-info-tint: light-dark(oklch(93.2% 0.032 255.585), oklch(37.9% 0.146 265.522));
  --color-kumo-info: light-dark(oklch(68.5% 0.169 237.323), oklch(70.7% 0.165 254.624));
  --color-kumo-warning-tint: light-dark(oklch(97.3% 0.071 103.193), oklch(55.4% 0.135 66.442));
  --color-kumo-warning: light-dark(oklch(79.5% 0.184 86.047), oklch(85.2% 0.199 91.936));
  --color-kumo-danger-tint: light-dark(oklch(93.6% 0.032 17.717), oklch(39.6% 0.141 25.723));
  --color-kumo-danger: light-dark(oklch(63.7% 0.237 25.331), oklch(57.7% 0.245 27.325));
  --color-kumo-success-tint: light-dark(oklch(95% 0.052 163.051), oklch(37.8% 0.077 168.94));
  --color-kumo-success: light-dark(oklch(59.6% 0.145 163.225), oklch(76.5% 0.177 163.223));
  --color-kumo-banner-info: light-dark(oklch(93.2% 0.032 255.585 / 0.7), oklch(37.9% 0.146 265.522 / 0.5));
  --color-kumo-banner-warning: light-dark(oklch(97.3% 0.071 103.193), oklch(55.4% 0.135 66.442 / 0.5));

  /* ---- Badge palette ---- */
  --color-kumo-badge-red: light-dark(oklch(57.7% 0.245 27.325), oklch(50.5% 0.213 27.518));
  --color-kumo-badge-green: light-dark(oklch(59.6% 0.145 163.225), oklch(50.8% 0.118 165.612));
  --color-kumo-badge-orange: oklch(81.5% 0.197 76);
  --color-kumo-badge-purple: light-dark(oklch(60% 0.118 295), oklch(50.8% 0.118 295));
  --color-kumo-badge-teal: light-dark(oklch(54.9% 0.096 184.565), oklch(51.1% 0.096 186.391));
  --color-kumo-badge-blue: light-dark(oklch(54.6% 0.245 262.881), oklch(48.8% 0.243 264.376));
  --color-kumo-badge-neutral: light-dark(oklch(55.6% 0 0), oklch(43.9% 0 0));
  --color-kumo-badge-inverted: light-dark(oklch(14.5% 0 0), #fff);
}