/* Adapted from Cloudflare OS, Apache-2.0. See /THIRD-PARTY-NOTICES.txt. */
:root {
/* ===== FONTS ===== */
  --font-sans: "FT Kunst Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Helvetica Neue", sans-serif;
  --font-mono: "Apercu Mono Pro", "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Kumo Text roles: base controls 14px, large body 16px.
     The studio deliberately does not use the smaller xs/sm roles. */
  --text-base: 0.875rem;
  --text-base--line-height: 1.25rem;
  --text-lg: 1rem;
  --text-lg--line-height: 1.5rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 2.25rem;
  --text-display: clamp(2.5rem, 4.5vw, 4rem);

  /* ===== KUMO SEMANTIC COLOR OVERRIDES =====
     Near-neutral, barely-warm greys for every surface, border, and neutral text. The brand orange
     is reserved for *intent only* (active item, links, primary action, focus) so it actually pops.
     This is the single biggest lever between a "consumer/playground" feel and an enterprise one. */

  /* Background tokens — near-white neutrals with a faint warm undertone */
  --color-kumo-base: #fcfcfb;
  --color-kumo-elevated: #f8f8f7;
  --color-kumo-tint: #f3f3f1;
  --color-kumo-overlay: #fbfbfa;
  --color-kumo-recessed: #efeeec;
  --color-kumo-control: #ffffff;
  --color-kumo-contrast: #14110f;
  --color-kumo-fill: #e8e7e4;
  --color-kumo-fill-hover: #dededb;
  --color-kumo-interact: #cac8c3;

  /* Brand — warm orange accent (intent only) */
  --color-kumo-brand: #ff4801;
  --color-kumo-brand-hover: #e03f00;

  /* Border / line tokens — neutral hairlines */
  --color-kumo-line: #dedee3;
  --color-kumo-ring: #cac8c3;

  /* Chat surface tokens */
  --color-kumo-bubble-user: #f1f0ee;

  /* Status tints — keep functional colors, warm the tints */
  --color-kumo-info: oklch(62.3% 0.214 259.815);
  --color-kumo-info-tint: oklch(90% 0.06 250);
  --color-kumo-warning: oklch(79.5% 0.184 86.047);
  --color-kumo-warning-tint: oklch(92% 0.08 85);
  --color-kumo-danger: oklch(63.7% 0.237 25.331);
  --color-kumo-danger-tint: oklch(92% 0.06 25);
  --color-kumo-success: oklch(72.3% 0.219 149.579);
  --color-kumo-success-tint: oklch(92% 0.08 150);

  /* Tooltip */
  --color-kumo-tip-shadow: #14111014;
  --color-kumo-arrow-edge: var(--color-kumo-line);
  --color-kumo-arrow-stroke: transparent;

  /* Text color tokens — near-neutral greys (faint warm undertone, no brown) */
  --text-color-kumo-default: #1c1a18;
  --text-color-kumo-default-hover: #100f0d;
  --text-color-kumo-inverse: #ffffff;
  --text-color-kumo-strong: #100f0d;
  --text-color-kumo-subtle: #5f636b;
  --text-color-kumo-inactive: #656a73;
  --text-color-kumo-brand: #ff4801;
  --text-color-kumo-link: #ff4801;
  --text-color-kumo-success: #187744;
  --text-color-kumo-danger: oklch(63.7% 0.237 25.331);
  --text-color-kumo-warning: oklch(47.6% 0.114 61.907);

  /* ===== CUSTOM BRAND TOKENS (for direct use alongside Kumo tokens) ===== */
  --color-accent-100: #ff4801;
  --color-accent-200: #ff7038;
  --color-background-100: #fcfcfb;
  --color-background-200: #f8f8f7;
  --color-background-300: #f3f3f1;
  --color-foreground-100: #100f0d;
  --color-foreground-200: #100f0d;
  --color-foreground-300: #1c1a18;
  --color-border-100: #e8e7e4;
  --color-border-100-50: #e8e7e480;
  --color-selection-bg: #ffe9e0;
  --color-selection-text: #ff500a;
  --color-shadow-accent-light: #ffa683;
  --color-shadow-accent-dark: #b13200;

  /* Category colors */
  --color-compute-100: #0a95ff;
  --color-compute-200: #0a95ff1a;
  --color-storage-100: #ee0ddb;
  --color-storage-200: #ee0ddb1a;
  --color-ai-100: #19e306;
  --color-ai-200: #f2f5e1;
  --color-media-100: #9616ff;
  --color-media-200: #f8ebee;

  /* Status colors */
  --color-status-live: oklch(72.3% 0.219 149.579);
  --color-status-draft: oklch(68.1% 0.162 75.834);
  --color-status-building: oklch(62.3% 0.214 259.815);

  /* Spacing / layout */
  --spacing: 0.25rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Transitions.
     Default CSS curves are too weak to feel intentional; keep them for legacy callers but add
     stronger custom variants (per Emil Kowalski's guidance) for UI motion:
       --ease-out-strong    entrances / responsive feedback (starts fast)
       --ease-in-out-strong on-screen movement / morphing
       --ease-drawer        iOS-like drawer/sheet curve */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-stack: 1px 6px 6px 0 #fff3 inset, 0 0 0px 0 #ffffff59 inset,
    0 4px 12px 0 #00000005, 0 0 0px 0 #00000005, 0 2px 12px 0 #00000008;

}
[data-mode="dark"] {
  /* Seal-inspired dark palette: violet-tinted surfaces around hue 285, not neutral black. */
  --color-kumo-base: oklch(0.115 0.012 285);
  --color-kumo-elevated: oklch(0.155 0.011 285);
  --color-kumo-tint: oklch(0.225 0.025 285);
  --color-kumo-overlay: oklch(0.155 0.011 285);
  --color-kumo-recessed: oklch(0.1 0.012 285);
  --color-kumo-control: oklch(0.155 0.011 285);
  --color-kumo-contrast: var(--color-kumo-brand);
  --color-kumo-strong: var(--color-kumo-brand-hover);
  --color-kumo-fill: oklch(0.225 0.025 285);
  --color-kumo-fill-hover: oklch(0.295 0.045 285);
  --color-kumo-interact: oklch(0.34 0.022 285);
  --color-kumo-line: oklch(0.34 0.022 285);
  --color-kumo-ring: oklch(0.52 0.065 285);
  --color-kumo-bubble-user: oklch(0.225 0.025 285);

  --color-kumo-brand: #b84e00;
  --color-kumo-brand-hover: #a54200;

  --color-kumo-info: oklch(62.3% 0.214 259.815);
  --color-kumo-info-tint: oklch(0.25 0.065 259.815);
  --color-kumo-warning: oklch(55.5% 0.163 48.998);
  --color-kumo-warning-tint: oklch(0.27 0.06 84.429);
  --color-kumo-danger: oklch(50.5% 0.213 27.518);
  --color-kumo-danger-tint: oklch(0.25 0.065 25.331);
  --color-kumo-success: oklch(52.7% 0.154 150.069);
  --color-kumo-success-tint: oklch(0.25 0.06 150.069);

  --color-kumo-tip-shadow: #00000066;
  --color-kumo-arrow-edge: transparent;
  --color-kumo-arrow-stroke: var(--color-kumo-line);

  --text-color-kumo-default: oklch(0.92 0.01 285);
  --text-color-kumo-default-hover: oklch(0.97 0.006 285);
  --text-color-kumo-inverse: #ffffff;
  --text-color-kumo-strong: oklch(0.92 0.01 285);
  --text-color-kumo-subtle: #b4b1c1;
  --text-color-kumo-inactive: #a9a6b7;
  --text-color-kumo-brand: #ff8a5c;
  --text-color-kumo-link: #ff8a5c;
  --text-color-kumo-success: oklch(79.2% 0.209 151.711);
  --text-color-kumo-danger: oklch(70.4% 0.191 22.216);
  --text-color-kumo-warning: oklch(82.8% 0.189 84.429);

  --color-accent-100: #b84e00;
  --color-accent-200: #ff8a5c;
  --color-background-100: oklch(0.115 0.012 285);
  --color-background-200: oklch(0.155 0.011 285);
  --color-background-300: oklch(0.225 0.025 285);
  --color-foreground-100: oklch(0.92 0.01 285);
  --color-foreground-200: oklch(0.78 0.018 285);
  --color-foreground-300: oklch(0.66 0.02 285);
  --color-border-100: oklch(0.34 0.022 285);
  --color-border-100-50: oklch(0.34 0.022 285 / 0.5);
  --color-selection-bg: color-mix(in srgb, var(--color-kumo-brand) 28%, transparent);
  --color-selection-text: oklch(0.97 0.006 285);
  --color-shadow-accent-light: #ff663355;
  --color-shadow-accent-dark: #00000080;

  --color-compute-100: oklch(74% 0.16 250);
  --color-compute-200: oklch(0.25 0.065 250);
  --color-storage-100: oklch(78% 0.22 325);
  --color-storage-200: oklch(0.25 0.07 325);
  --color-ai-100: oklch(79.2% 0.209 151.711);
  --color-ai-200: oklch(0.25 0.06 150);
  --color-media-100: oklch(78% 0.19 300);
  --color-media-200: oklch(0.25 0.07 300);

  --color-status-live: oklch(79.2% 0.209 151.711);
  --color-status-draft: oklch(82.8% 0.189 84.429);
  --color-status-building: oklch(74% 0.16 250);

  --shadow-stack: 1px 6px 6px 0 #ffffff08 inset, 0 0 0 1px #ffffff05 inset,
    0 18px 40px 0 #00000033, 0 4px 12px 0 #0000002e;
}