/* GENERATED. Do not edit. Copy this file whole, this header included.
   Source:    cloudflare-os packages/workshop-shared/src/style/theme.css
   Generator: node scripts/style-tokens.ts (cloudflare-os)
   sha256:    65ec6dfb2b18477a926dd1a2a7390528aac3c84b01d40e27c085eaff5076ee7b
   The sha256 is of every byte after this header. Check a copy with
     sed '1,/^\*\/$/d' tokens.css | shasum -a 256
   and compare it with the line above: a mismatch means the copy was edited.
   Light values are on :root; dark under [data-mode="dark"] and [data-theme="dark"].
   The names are the console's: --color-kumo-base is its bg-kumo-base.
*/
:root {
  --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;
  --text-tooltip: 14px;
  --text-tooltip--line-height: 20px;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --text-8: 8px;
  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-26: 26px;
  --text-28: 28px;
  --tracking-tight-10: -0.1px;
  --tracking-tight-15: -0.15px;
  --tracking-tight-20: -0.2px;
  --tracking-tight-25: -0.25px;
  --tracking-tight-30: -0.3px;
  --tracking-tight-35: -0.35px;
  --tracking-tight-40: -0.4px;
  --tracking-caps-4: 0.04em;
  --tracking-caps-6: 0.06em;
  --tracking-caps-8: 0.08em;
  --z-index-overlay: 100;
  --z-index-dialog: 1000;
  --z-index-popover: 1100;
  --z-index-nested: 1200;
  --z-index-nested-dialog: 1300;
  --z-index-palette: 1500;
  --z-index-toast: 2000;
  --z-index-lightbox: 2000;
  --z-index-tooltip: 3000;
  --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;
  --color-kumo-brand: #ff4801;
  --color-kumo-brand-hover: #e03f00;
  --color-kumo-line: #1411100f;
  --color-kumo-ring: #cac8c3;
  --color-kumo-bubble-user: #f1f0ee;
  --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);
  --color-kumo-tip-shadow: #14111014;
  --color-kumo-arrow-edge: #1411100f;
  --color-kumo-arrow-stroke: transparent;
  --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: oklch(52% 0.006 60);
  --text-color-kumo-inactive: oklch(66% 0.005 60);
  --text-color-kumo-brand: #ff4801;
  --text-color-kumo-link: #ff4801;
  --text-color-kumo-success: oklch(72.3% 0.219 149.579);
  --text-color-kumo-danger: oklch(63.7% 0.237 25.331);
  --text-color-kumo-warning: oklch(47.6% 0.114 61.907);
  --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;
  --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;
  --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: 0.25rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --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);
  --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;

  /* Colours the console leaves to Kumo's own theme, resolved from it */
  --text-color-kumo-placeholder: oklch(70.8% 0 none);
  --text-color-kumo-info: oklch(42.4% 0.199 265.638);
  --text-color-kumo-badge-orange-subtle: oklch(47% 0.157 37.304);
  --text-color-kumo-badge-teal-subtle: oklch(43.7% 0.078 188.216);
  --text-color-kumo-badge-neutral-subtle: oklch(26.9% 0 none);
  --text-color-kumo-badge-inverted: #fff;
  --color-kumo-canvas: oklch(98.75% 0 0);
  --color-kumo-hairline: oklch(93.5% 0 0);
  --color-kumo-focus: oklch(15% 0 0);
  --color-kumo-shadow-edge: oklch(0% 0 0 / 0.12);
  --color-kumo-shadow-drop: oklch(0% 0 0 / 0.08);
  --color-kumo-banner-info: oklch(93.2% 0.032 255.585 / 0.7);
  --color-kumo-banner-warning: oklch(97.3% 0.071 103.193);
  --color-kumo-badge-red: oklch(57.7% 0.245 27.325);
  --color-kumo-badge-green: oklch(59.6% 0.145 163.225);
  --color-kumo-badge-orange: oklch(81.5% 0.197 76);
  --color-kumo-badge-purple: oklch(55.8% 0.288 302.321);
  --color-kumo-badge-teal: oklch(54.9% 0.096 184.565);
  --color-kumo-badge-blue: oklch(54.6% 0.245 262.881);
  --color-kumo-badge-neutral: oklch(55.6% 0 none);
  --color-kumo-badge-inverted: oklch(14.5% 0 none);

  /* Tailwind's own leading, tracking and radius steps */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --radius-xs: 0.125rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

  /* Line heights: Tailwind's leading-N is N x 4px (leading-4.5 is --leading-4-5) */
  --leading-3: 12px;
  --leading-3-25: 13px;
  --leading-3-5: 14px;
  --leading-3-75: 15px;
  --leading-4: 16px;
  --leading-4-25: 17px;
  --leading-4-5: 18px;
  --leading-4-75: 19px;
  --leading-5: 20px;
  --leading-5-25: 21px;
  --leading-5-5: 22px;
  --leading-5-75: 23px;
  --leading-6: 24px;
  --leading-6-25: 25px;
  --leading-6-5: 26px;
  --leading-6-75: 27px;
  --leading-7: 28px;
  --leading-7-25: 29px;
  --leading-7-5: 30px;
  --leading-7-75: 31px;
  --leading-8: 32px;
  --leading-8-25: 33px;
  --leading-8-5: 34px;
  --leading-8-75: 35px;
  --leading-9: 36px;
  --leading-9-25: 37px;
  --leading-9-5: 38px;
  --leading-9-75: 39px;
  --leading-10: 40px;
  --leading-10-25: 41px;
  --leading-10-5: 42px;
  --leading-10-75: 43px;
  --leading-11: 44px;
  --leading-11-25: 45px;
  --leading-11-5: 46px;
  --leading-11-75: 47px;
  --leading-12: 48px;
  --leading-12-25: 49px;
  --leading-12-5: 50px;
  --leading-12-75: 51px;
  --leading-13: 52px;
}

/* Dark mode: the values that differ from light. */
[data-mode="dark"],
[data-theme="dark"] {
  --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: #b84e00;
  --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-brand: #b84e00;
  --color-kumo-brand-hover: #a54200;
  --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-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: oklch(0.34 0.022 285);
  --text-color-kumo-default: oklch(0.92 0.01 285);
  --text-color-kumo-default-hover: oklch(0.97 0.006 285);
  --text-color-kumo-strong: oklch(0.92 0.01 285);
  --text-color-kumo-subtle: oklch(0.66 0.02 285);
  --text-color-kumo-inactive: oklch(0.58 0.025 285);
  --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, #b84e00 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;
  --color-kumo-strong: #a54200;
  --text-color-kumo-placeholder: oklch(55.6% 0 none);
  --text-color-kumo-info: oklch(70.7% 0.165 254.624);
  --text-color-kumo-badge-orange-subtle: oklch(90.1% 0.076 70.697);
  --text-color-kumo-badge-teal-subtle: oklch(91% 0.096 180.426);
  --text-color-kumo-badge-neutral-subtle: oklch(92.2% 0 none);
  --text-color-kumo-badge-inverted: #000;
  --color-kumo-canvas: oklch(10% 0 0);
  --color-kumo-hairline: oklch(26.9% 0 none);
  --color-kumo-focus: oklch(93.5% 0 0);
  --color-kumo-shadow-edge: oklch(100% 0 0 / 0.1);
  --color-kumo-shadow-drop: oklch(0% 0 0 / 0.3);
  --color-kumo-banner-info: oklch(37.9% 0.146 265.522 / 0.5);
  --color-kumo-banner-warning: oklch(55.4% 0.135 66.442 / 0.5);
  --color-kumo-badge-red: oklch(50.5% 0.213 27.518);
  --color-kumo-badge-green: oklch(50.8% 0.118 165.612);
  --color-kumo-badge-purple: oklch(49.6% 0.265 301.924);
  --color-kumo-badge-teal: oklch(51.1% 0.096 186.391);
  --color-kumo-badge-blue: oklch(48.8% 0.243 264.376);
  --color-kumo-badge-neutral: oklch(43.9% 0 none);
  --color-kumo-badge-inverted: #fff;
}