/*
 * Derived from @cloudflare/kumo@2.14.0 theme-kumo.css and kumo.css.
 * Only browser-ready custom properties and the skeleton animation are kept.
 * Tailwind @theme blocks and Kumo component styles are intentionally excluded.
 * Source integrity:
 * theme-kumo.css sha256-9tTI8X+AY3FzH2hdudiC9Qf3jHM/ngxk9g/Uj7P4iSw=
 * kumo.css sha256-zxFXi/G3MPaN4YLKlJ7WorU66FPz9aawxo4DxFTKUY4=
 */
@layer base {
  :root,
  [data-theme="kumo"] {
    --text-color-kumo-default: oklch(21% 0.006 285.885);
    --text-color-kumo-strong: oklch(14.5% 0 0);
    --text-color-kumo-subtle: oklch(55.6% 0 0);
    --text-color-kumo-inactive: oklch(87% 0 0);
    --text-color-kumo-placeholder: oklch(70.8% 0 0);
    --text-color-kumo-brand: #f6821f;
    --text-color-kumo-link: oklch(42.4% 0.199 265.638);
    --text-color-kumo-success: oklch(43.2% 0.095 166.913);
    --text-color-kumo-danger: oklch(50.5% 0.213 27.518);
    --text-color-kumo-warning: oklch(59.7% 0.144 57.5);
    --color-kumo-canvas: oklch(98.75% 0 0);
    --color-kumo-elevated: oklch(98% 0 0);
    --color-kumo-recessed: oklch(96% 0 0);
    --color-kumo-base: #fff;
    --color-kumo-tint: oklch(97% 0 0);
    --color-kumo-control: #fff;
    --color-kumo-interact: oklch(87% 0 0);
    --color-kumo-fill: oklch(92.2% 0 0);
    --color-kumo-fill-hover: oklch(96.5% 0 0);
    --color-kumo-brand: oklch(0.5772 0.2324 260);
    --color-kumo-brand-hover: oklch(48.8% 0.243 264.376);
    --color-kumo-line: oklch(14.5% 0 0 / 0.1);
    --color-kumo-hairline: oklch(93.5% 0 0);
    --color-kumo-focus: oklch(15% 0 0);
    --color-kumo-info-tint: oklch(93.2% 0.032 255.6 / 0.45);
    --color-kumo-warning-tint: oklch(93.1% 0.107 94.6 / 0.2);
    --color-kumo-danger-tint: oklch(93.6% 0.032 17.7 / 0.42);
    --color-kumo-success-tint: oklch(96.2% 0.043 156.7 / 0.57);
  }

  :root[data-mode="dark"],
  [data-mode="dark"] [data-theme="kumo"] {
    --text-color-kumo-default: oklch(97% 0 0);
    --text-color-kumo-strong: oklch(98.5% 0 0);
    --text-color-kumo-subtle: oklch(70.8% 0 0);
    --text-color-kumo-inactive: oklch(43.9% 0 0);
    --text-color-kumo-placeholder: oklch(55.6% 0 0);
    --text-color-kumo-brand: #f6821f;
    --text-color-kumo-link: oklch(70.7% 0.165 254.624);
    --color-kumo-canvas: oklch(10% 0 0);
    --color-kumo-elevated: oklch(12% 0 0);
    --color-kumo-recessed: oklch(15% 0 0);
    --color-kumo-base: oklch(17% 0 0);
    --color-kumo-tint: oklch(26.9% 0 0);
    --color-kumo-control: oklch(21% 0.006 285.885);
    --color-kumo-interact: oklch(37.1% 0 0);
    --color-kumo-fill: oklch(26.9% 0 0);
    --color-kumo-fill-hover: oklch(37.1% 0 0);
    --color-kumo-line: oklch(32% 0 0);
    --color-kumo-hairline: oklch(26.9% 0 0);
  }
}

@keyframes kumo-skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.kumo-skeleton {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
  background-size: 200% 100%;
  animation: kumo-skeleton 1.5s ease-in-out infinite;
}