@import "@heroui/styles";

@source "../../react/src/components/**/*.{ts,tsx,js,jsx}";

/* Important: This source is important to make sure storybook styles are compiled */

/* Custom theme overrides - Just use CSS! */
:root {
  /* Your values */
  /* --radius: 2.5rem; */
  /* --spacing: 0.1rem; */
  /* font-size: 20px; */

  /* --accent: oklch(0.5671 0.209451 257.9449); */
  /* Use OS-native cursor for interactive elements (macOS style) */
  --cursor-interactive: pointer;

  /* theme.css */

  /* variables.css */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Overrides light theme field tokens */
  /* --field-background: var(--color-neutral-200);
  --field-foreground: var(--foreground);
  --field-placeholder: var(--color-neutral-500);
  --field-border: var(--border);
  --field-border-width: 0px;
  --field-radius: calc(var(--radius) * 0.75);
  --field-shadow: none; */

  /* Way to make components and text bigger on mobile - a11y */
  /* @media (max-width: 640px) {
    font-size: 24px;
  } */
}

[data-theme="light"],
.light {
  /* --background: #f9f9f9; */
  /* --skeleton-animation: none; */ /* possible values: shimmer, pulse, none */
}

/* Dark theme overrides using data-theme or class */
[data-theme="dark"],
.dark {
  /* Your values */
  /* --radius: 0.5rem; */
  /* --cursor: default; */

  --cursor-interactive: pointer;
}

/* @theme inline { */
/* Radius */
/* --radius-xs: calc(var(--radius) * 0.25);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: calc(var(--radius) * 1);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-2xl: calc(var(--radius) * 2);
  --radius-3xl: calc(var(--radius) * 3);
  --radius-4xl: calc(var(--radius) * 4);
} */

/* @utility button {
  @apply rounded-lg;
} */

@theme inline {
  /* --color-field-focus: var(--color-neutral-300); */
}

body {
  background-color: var(--background);
}
