@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: hsl(0deg 100% 70%);
    --destructive-foreground: hsl(210deg 40% 98%);
    --error: hsl(0deg 77% 64%);
    --error-foreground: hsl(210deg 40% 98%);
    --success: hsl(130deg 100% 70%);
    --success-foreground: hsl(210deg 40% 98%);
    --action: hsl(52deg 96.8% 82%);
    --action-hover: hsl(54deg 100% 86.7%);
    --action-foreground: hsl(42deg 100% 29%);
    --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%);

    /* 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);
  }

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

@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%);
}