@import url("@radix-ui/colors/amber-dark.css") layer(base);
@import url("@radix-ui/colors/amber.css") layer(base);
@import url("@radix-ui/colors/blue-dark.css") layer(base);
@import url("@radix-ui/colors/blue.css") layer(base);
@import url("@radix-ui/colors/crimson-dark.css") layer(base);
@import url("@radix-ui/colors/crimson.css") layer(base);
@import url("@radix-ui/colors/cyan-dark.css") layer(base);
@import url("@radix-ui/colors/cyan.css") layer(base);
@import url("@radix-ui/colors/grass-dark.css") layer(base);
@import url("@radix-ui/colors/grass.css") layer(base);
@import url("@radix-ui/colors/gray-dark.css") layer(base);
@import url("@radix-ui/colors/gray.css") layer(base);
@import url("@radix-ui/colors/green-dark.css") layer(base);
@import url("@radix-ui/colors/green.css") layer(base);
@import url("@radix-ui/colors/lime-dark.css") layer(base);
@import url("@radix-ui/colors/lime.css") layer(base);
@import url("@radix-ui/colors/orange-dark.css") layer(base);
@import url("@radix-ui/colors/orange.css") layer(base);
@import url("@radix-ui/colors/purple-dark.css") layer(base);
@import url("@radix-ui/colors/purple.css") layer(base);
@import url("@radix-ui/colors/red-dark.css") layer(base);
@import url("@radix-ui/colors/red.css") layer(base);
@import url("@radix-ui/colors/sage-dark.css") layer(base);
@import url("@radix-ui/colors/sage.css") layer(base);
@import url("@radix-ui/colors/sky-dark.css") layer(base);
@import url("@radix-ui/colors/sky.css") layer(base);
@import url("@radix-ui/colors/slate-dark.css") layer(base);
@import url("@radix-ui/colors/slate.css") layer(base);
@import url("@radix-ui/colors/yellow-dark.css") layer(base);
@import url("@radix-ui/colors/yellow.css") layer(base);
/* stylelint-disable-next-line import-notation */
@import "tailwindcss";

@config "../../tailwind.config.cjs";

@layer base {
  :root {
    color-scheme: light;
  }

  :root,
  .marimo {
    --monospace-font: var(--marimo-monospace-font, "Fira Mono", monospace);
    --text-font: var(--marimo-text-font, "PT Sans", sans-serif);
    --heading-font: var(--marimo-heading-font, "Lora", serif);
    --radius: 8px;
    /* stylelint-disable-next-line unit-allowed-list */
    --markdown-max-width: 80ch;

    /* Radix light colors: https://github.com/radix-ui/colors/blob/main/src/light.ts */

    /* Radix dark colors: https://github.com/radix-ui/colors/blob/main/src/dark.ts */

    /* Base colors. */
    --background: light-dark(hsl(0deg 0% 100%), hsl(150deg 7.7% 10.2%));
    --foreground: light-dark(hsl(222.2deg 47.4% 11.2%), hsl(155deg 7% 93%));
    --muted: light-dark(hsl(210deg 40% 96.1%), hsl(180deg 14% 1%));
    --muted-foreground: light-dark(hsl(215.4deg 16.3% 46.9%),
        hsl(155deg 5% 68.3%));
    --popover: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
    --popover-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
        hsl(155deg 5% 68.3%));
    --card: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
    --card-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
        hsl(155deg 5% 76.3%));
    --border: light-dark(hsl(214.3deg 31.8% 91.4%), hsl(153deg 3.7% 24.2%));
    --input: light-dark(hsl(0deg 0% 64%), hsl(154deg 3.3% 28.7%));
    --primary: light-dark(hsl(208deg 93.5% 47.4%), hsl(192deg 59.8% 39%));
    --primary-foreground: light-dark(hsl(210deg 40% 98%), hsl(190deg 80% 84%));
    --secondary: light-dark(hsl(210deg 40% 96.1%), hsl(155deg 7% 93%));
    --secondary-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
        hsl(151deg 5.5% 15.2%));
    --accent: light-dark(hsl(209deg 100% 96.5%), hsl(192deg 56.6% 26.5%));
    --accent-foreground: light-dark(hsl(211deg 90% 42%), hsl(190deg 80% 84%));
    --ring: hsl(215deg 20.2% 65.1%);

    /* Semantic colors. */
    --destructive: var(--red-9, #e5484d);
    --destructive-hover: var(--red-10, #dc3e42);
    --destructive-border: var(--red-11, #ce2c31);
    --destructive-foreground: var(--red-1, #fffcfc);
    --error: var(--red-9, #e5484d);
    --error-foreground: var(--red-1, #fffcfc);
    --success: var(--grass-9, #46a758);
    --success-hover: var(--grass-10, #3e9b4f);
    --success-border: var(--grass-11, #2a7e3b);
    --success-foreground: var(--grass-1, #fbfefb);
    --action: var(--yellow-9, #ffe629);
    --action-hover: var(--yellow-10, #ffdc00);
    --action-border: var(--yellow-11, #9e6c00);
    --action-foreground: var(--yellow-12, #473b1f);
    --link: light-dark(hsl(211deg 90% 42%), hsl(211deg 90% 62%));
    --link-visited: light-dark(hsl(272deg 51% 54%), hsl(272deg 51% 74%));
    --stale: hsl(42deg 56% 44% / 25%);

    accent-color: var(--primary);

    /* Base shadows. */
    --base-shadow: light-dark(hsl(0deg 0% 85% / 40%), hsla(0deg 0% 36% / 60%));
    --base-shadow-darker: light-dark(hsl(0deg 0% 50% / 40%),
        hsl(0deg 0% 50% / 60%));
    --base-shadow-opacity: 5%;

    /* Codemirror editor */
    --cm-background: light-dark(var(--background), #282c34);
    --cm-comment: light-dark(#708090, #6b7280);
    --cm-selection-background-light: #d7d4f0;
    --cm-selection-background-dark: #1177cc80;
    --cm-reactive-reference-color-light: #005f87;
    --cm-reactive-reference-color-dark: #2a7aa5;
    --cm-reactive-reference-border-color: #bad3de;
    --cm-search-match-background-light: #99ff7780;
    --cm-search-match-background-dark: #22bb0070;
    --cm-search-match-selected-background-dark: #6199ff88;
  }

  :root:has(body.dark),
  .dark,
  .marimo:is(.dark *) {
    color-scheme: dark;
  }

  .dark,
  .marimo:is(.dark *) {
    --ring: var(--blue-8, #2870bd);
    --destructive: var(--red-6, #72232d);
    --destructive-hover: var(--red-7, #8c333a);
    --destructive-border: var(--red-11, #ff9592);
    --destructive-foreground: var(--red-12, #ffd1d9);
    --error: var(--red-6, #72232d);
    --error-foreground: var(--red-12, #ffd1d9);
    --success: var(--grass-6, #2d5736);
    --success-hover: var(--grass-7, #366740);
    --success-border: var(--grass-11, #71d083);
    --success-foreground: var(--grass-12, #c2f0c2);
    --action: var(--yellow-6, #524202);
    --action-hover: var(--yellow-7, #665417);
    --action-border: var(--yellow-11, #f5e147);
    --action-foreground: var(--yellow-12, #f6eeb4);
    --stale: hsl(54deg 100% 86.7% / 25%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marimo,
  .marimo::before,
  .marimo::after,
  .marimo *,
  .marimo *::before,
  .marimo *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;

    /*
    Set to 0s, because `transition-property` defaults to `all`, so any non-zero
    duration gives every element a transition. Libraries that change an
    attribute and measure synchronously (e.g. Plotly hover labels) would read
    stale geometry.
    */
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  .marimo .running-app-icon {
    visibility: visible !important;
    animation-name: none !important;
  }
}

@media (forced-colors: active) {
  .marimo :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;

    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }

  a.hyperlink {
    @apply text-link;
  }

  a.hyperlink:hover {
    text-decoration: underline;
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

@theme {
  /* Migrated from tailwind.config.cjs - theme.extend.boxShadow */
  --shadow-none: none;
  --shadow-xxs: 0px 0px 2px 0px var(--base-shadow-darker);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-xs: 1px 1px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-sm: 2px 2px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-md: 4px 4px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-lg: 5px 6px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-xl: 8px 9px 4px 0px var(--base-shadow), 0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-2xl: 10px 12px 10px 0px var(--base-shadow), 0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-xs-solid: 1px 1px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-sm-solid: 2px 2px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-md-solid: 4px 4px 0px 0px var(--base-shadow-darker), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-lg-solid: 5px 6px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 75% / 50%);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-xl-solid: 7px 8px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 85% / 50%);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);

  /* Solid shadows with lighter shade color */

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-sm-solid-shade:
    2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);

  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
  --shadow-md-solid-shade:
    4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
}