@source "../../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
@import "@cloudflare/kumo/styles";
@import "tailwindcss" source('../');
@import "@fontsource/ibm-plex-sans/400.css";
@import "@fontsource/ibm-plex-sans/500.css";
@import "@fontsource/ibm-plex-sans/600.css";
@import "@fontsource/ibm-plex-mono/400.css";
@import "@fontsource/ibm-plex-mono/500.css";

@theme {
  --font-sans: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --color-accent-200: #ffd0ad;
  --color-accent-300: #ffb27a;
  --color-accent-400: #ff9348;
  --color-accent-500: #f6821f;
  --color-accent-600: #d96a0b;
  --color-accent-800: #7a3a06;
  --color-accent-950: #2a1404;

  /* Semantic palette: the only non-gray hues allowed outside `accent`. `merged` is for finished work: merged, applied, completed. */
  --color-success-200: var(--color-emerald-200);
  --color-success-300: var(--color-emerald-300);
  --color-success-400: var(--color-emerald-400);
  --color-success-500: var(--color-emerald-500);
  --color-success-700: var(--color-emerald-700);
  --color-success-800: var(--color-emerald-800);
  --color-success-900: var(--color-emerald-900);
  --color-success-950: var(--color-emerald-950);

  --color-warning-100: var(--color-amber-100);
  --color-warning-200: var(--color-amber-200);
  --color-warning-300: var(--color-amber-300);
  --color-warning-400: var(--color-amber-400);
  --color-warning-500: var(--color-amber-500);
  --color-warning-700: var(--color-amber-700);
  --color-warning-800: var(--color-amber-800);
  --color-warning-900: var(--color-amber-900);
  --color-warning-950: var(--color-amber-950);

  --color-danger-200: var(--color-red-200);
  --color-danger-300: var(--color-red-300);
  --color-danger-400: var(--color-red-400);
  --color-danger-500: var(--color-red-500);
  --color-danger-700: var(--color-red-700);
  --color-danger-800: var(--color-red-800);
  --color-danger-900: var(--color-red-900);
  --color-danger-950: var(--color-red-950);

  --color-merged-200: var(--color-violet-200);
  --color-merged-300: var(--color-violet-300);
  --color-merged-400: var(--color-violet-400);
  --color-merged-500: var(--color-violet-500);
  --color-merged-600: var(--color-violet-600);
  --color-merged-950: var(--color-violet-950);

  /* Kumo surfaces are achromatic; alias the gray scale onto neutral so legacy gray-* utilities match. */
  --color-gray-50: var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-900: var(--color-kumo-neutral-925);
  --color-gray-950: var(--color-kumo-neutral-1000);

  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-kumo-hairline, currentcolor);
  }

  html {
    color-scheme: dark;
  }

  html,
  body {
    @apply bg-kumo-canvas font-sans text-kumo-default antialiased;
  }

  ::selection {
    background: rgb(246 130 31 / 0.35);
  }

  .using-mouse * {
    outline: none !important;
  }
}

:root {
  --sh-class: #7eb5ff;
  --sh-identifier: #d4d4d4;
  --sh-sign: #8b949e;
  --sh-string: #88bbb6;
  --sh-keyword: #ffada8;
  --sh-comment: #8b8b8b;
  --sh-jsxliterals: #d2a8ff;
  --sh-entity: #56d4dd;
  --sh-property: #79c0ff;
}

@utility label-small {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.markdown {
  @apply text-[0.9375rem] leading-7 text-gray-300;
  overflow-wrap: anywhere;
}
.markdown > :first-child {
  margin-top: 0;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  @apply mt-6 mb-3 font-semibold text-gray-100;
}
.markdown h1 {
  @apply border-b border-gray-800 pb-2 text-2xl;
}
.markdown h2 {
  @apply border-b border-gray-800 pb-1.5 text-xl;
}
.markdown h3 {
  @apply text-lg;
}
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown table,
.markdown pre {
  @apply my-3;
}
.markdown ul {
  @apply list-disc pl-6;
}
.markdown ol {
  @apply list-decimal pl-6;
}
.markdown a {
  @apply text-accent-400 underline-offset-2 hover:underline;
}
.markdown a.mention {
  @apply font-medium text-gray-100;
}
.markdown blockquote {
  @apply border-l-2 border-gray-700 pl-4 text-gray-400;
}
.markdown code {
  @apply rounded bg-gray-800/70 px-1.5 py-0.5 font-mono text-[0.85em];
}
.markdown pre {
  @apply overflow-x-auto rounded-md border border-gray-800 bg-gray-900 p-4 text-sm leading-6;
}
.markdown pre code {
  @apply bg-transparent p-0;
}
.markdown table {
  @apply block w-full overflow-x-auto border-collapse text-sm;
}
.markdown th,
.markdown td {
  @apply border border-gray-800 px-3 py-1.5;
}
.markdown th {
  @apply bg-gray-900 text-left font-semibold;
}
.markdown img {
  @apply inline max-w-full;
}
.markdown hr {
  @apply my-6 border-gray-800;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-rise {
  animation: rise 0.35s ease-out both;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.animate-pulse-dot {
  animation: pulse-dot 1.4s ease-in-out infinite;
}

@keyframes indeterminate {
  from {
    left: -35%;
  }
  to {
    left: 100%;
  }
}

.animate-indeterminate {
  animation: indeterminate 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-indeterminate {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.6;
  }
}

.markdown .markdown-alert {
  @apply rounded-r-md border-l-4 py-1 pr-3 text-gray-300;
}
.markdown .markdown-alert-title {
  @apply mb-1 text-sm font-semibold;
}
.markdown .markdown-alert-note {
  @apply border-gray-500 bg-gray-500/5;
}
.markdown .markdown-alert-note .markdown-alert-title {
  @apply text-gray-300;
}
.markdown .markdown-alert-tip {
  @apply border-success-500 bg-success-500/5;
}
.markdown .markdown-alert-tip .markdown-alert-title {
  @apply text-success-400;
}
.markdown .markdown-alert-important {
  @apply border-accent-500 bg-accent-500/5;
}
.markdown .markdown-alert-important .markdown-alert-title {
  @apply text-accent-400;
}
.markdown .markdown-alert-warning {
  @apply border-warning-500 bg-warning-500/5;
}
.markdown .markdown-alert-warning .markdown-alert-title {
  @apply text-warning-400;
}
.markdown .markdown-alert-caution {
  @apply border-danger-500 bg-danger-500/5;
}
.markdown .markdown-alert-caution .markdown-alert-title {
  @apply text-danger-400;
}
.markdown [align="center"] {
  @apply text-center;
}
.markdown [align="right"] {
  @apply text-right;
}
.markdown p[align="center"] img,
.markdown div[align="center"] img {
  @apply inline-block;
}
.markdown details {
  @apply my-3 rounded-md border border-gray-800 px-3 py-2;
}
.markdown summary {
  @apply cursor-pointer font-medium text-gray-200;
}
.markdown kbd {
  @apply rounded border border-gray-700 bg-gray-900 px-1.5 py-0.5 font-mono text-xs;
}

select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.875rem;
}

/* Marketing surfaces */
@utility text-balance-pretty {
  text-wrap: balance;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.animate-caret {
  animation: caret 1s steps(1) infinite;
}

@keyframes graph-draw {
  from {
    stroke-dashoffset: var(--graph-length, 400);
  }
  to {
    stroke-dashoffset: 0;
  }
}

.animate-graph-draw {
  stroke-dasharray: var(--graph-length, 400);
  animation: graph-draw 1.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-rise,
  .animate-caret,
  .animate-graph-draw {
    animation: none;
  }
}

@utility button-emphasis-primary {
  --kumo-button-emphasis-ring: color-mix(in oklch, var(--color-kumo-brand), black 10%);
  --kumo-button-emphasis-bg: color-mix(in oklch, var(--color-kumo-brand), white 30%);
  --kumo-button-emphasis-gradient-start: color-mix(in oklch, var(--color-kumo-brand), white 15%);
  --kumo-button-emphasis-gradient-end: var(--color-kumo-brand);
  background-image: linear-gradient(
    to bottom,
    var(--kumo-button-emphasis-gradient-start),
    var(--kumo-button-emphasis-gradient-end)
  );
}