@layer base {
  /* HeroUI Default Theme */
  :root,
  .light,
  .default,
  [data-theme="light"],
  [data-theme="default"] {
    color-scheme: light;

    /* == Common Variables == */

    /* Primitive Colors (Do not change between light and dark) */
    --white: oklch(100% 0 0);
    --black: oklch(0% 0 0);
    --snow: oklch(0.9911 0 0);
    --eclipse: oklch(0.2103 0.0059 285.89);

    /* Spacing scale */
    --spacing: 0.25rem;

    /* Border */
    --border-width: 1px;
    --field-border-width: 0px;
    --disabled-opacity: 0.5;

    /* Ring offset - Used for focus ring */
    --ring-offset-width: 2px;

    /* Cursor */
    --cursor-interactive: pointer;
    --cursor-disabled: not-allowed;

    /* Radius */
    --radius: 0.5rem;
    --field-radius: calc(var(--radius) * 1.5);

    /* == Light Theme Variables == */

    /* Base Colors */
    --background: oklch(0.9702 0 0);
    --foreground: var(--eclipse);

    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
    --surface: var(--white);
    --surface-foreground: var(--foreground);

    --surface-secondary: oklch(0.9524 0.0013 286.37);
    --surface-secondary-foreground: var(--foreground);

    --surface-tertiary: oklch(0.9373 0.0013 286.37);
    --surface-tertiary-foreground: var(--foreground);

    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
    --overlay: var(--white);
    --overlay-foreground: var(--foreground);

    --muted: oklch(0.5517 0.0138 285.94);

    --scrollbar: oklch(87.1% 0.006 286.286);

    --default: oklch(94% 0.001 286.375);
    --default-foreground: var(--eclipse);

    --accent: oklch(0.6204 0.195 253.83);
    --accent-foreground: var(--snow);

    /* Form Fields */
    --field-background: var(--white);
    --field-foreground: oklch(0.2103 0.0059 285.89);
    --field-placeholder: var(--muted);
    --field-border: transparent; /* no border by default on form fields */

    /* Status Colors */
    --success: oklch(0.7329 0.1935 150.81);
    --success-foreground: var(--eclipse);

    --warning: oklch(0.7819 0.1585 72.33);
    --warning-foreground: var(--eclipse);

    --danger: oklch(0.6532 0.2328 25.74);
    --danger-foreground: var(--snow);

    /* Component Colors */
    --segment: var(--white);
    --segment-foreground: var(--eclipse);

    /* Misc Colors */
    --border: oklch(90% 0.004 286.32);
    --separator: oklch(92% 0.004 286.32);
    --focus: var(--accent);
    --link: var(--foreground);

    /* Shadows */
    /* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */
    --surface-shadow:
      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
      0 0 1px 0 rgba(0, 0, 0, 0.06);
    /* Overlay shadow */
    --overlay-shadow:
      0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
      0 14px 28px 0 rgba(0, 0, 0, 0.08);
    --field-shadow:
      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
      0 0 1px 0 rgba(0, 0, 0, 0.06);
    /* Skeleton Default Global Animation */
    --skeleton-animation: shimmer; /* shimmer, pulse, none */
  }

  .dark,
  [data-theme="dark"] {
    color-scheme: dark;
    /* == Dark Theme Variables == */

    /* Base Colors */
    --background: oklch(12% 0.005 285.823);
    --foreground: var(--snow);

    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
    --surface: oklch(0.2103 0.0059 285.89);
    --surface-foreground: var(--foreground);

    --surface-secondary: oklch(0.257 0.0037 286.14);
    --surface-tertiary: oklch(0.2721 0.0024 247.91);

    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
    --overlay: oklch(0.2103 0.0059 285.89);
    --overlay-foreground: var(--foreground);

    --muted: oklch(70.5% 0.015 286.067);

    --scrollbar: oklch(70.5% 0.015 286.067);

    --default: oklch(27.4% 0.006 286.033);
    --default-foreground: var(--snow);

    /* Form Fields */
    --field-background: oklch(0.2103 0.0059 285.89);
    --field-foreground: var(--foreground);

    /* Status Colors */
    --warning: oklch(0.8203 0.1388 76.34);
    --warning-foreground: var(--eclipse);

    --danger: oklch(0.594 0.1967 24.63);
    --danger-foreground: var(--snow);

    /* Component Colors */
    --segment: oklch(0.3964 0.01 285.93);
    --segment-foreground: var(--foreground);

    /* Misc Colors */
    --border: oklch(28% 0.006 286.033);
    --separator: oklch(25% 0.006 286.033);
    --focus: var(--accent);
    --link: var(--foreground);

    /* Shadows */
    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
  }
}