@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: var(--scrollbar-thumb);
    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
    --scrollbar-track: transparent;
    --scrollbar-gutter: auto;
    --scrollbar-width: thin;
    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

    --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);

    /* Backdrop */
    --backdrop: rgba(0, 0, 0, 0.5);

    /* Calculated Colors */
    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);

    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
    --background-inverse: var(--foreground);

    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);

    --field-hover: color-mix(
      in oklab,
      var(--field-background, var(--default)) 90%,
      var(--field-foreground, var(--foreground)) 2%
    );
    --field-focus: var(--field-background, var(--default));
    --field-border-hover: color-mix(
      in oklab,
      var(--field-border, var(--border)) 88%,
      var(--field-foreground, var(--foreground)) 10%
    );
    --field-border-focus: color-mix(
      in oklab,
      var(--field-border, var(--border)) 74%,
      var(--field-foreground, var(--foreground)) 22%
    );

    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
    --default-soft-foreground: var(--default-foreground);
    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);

    --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
    --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);

    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);

    --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
    --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);

    --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
    --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);

    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);

    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);

    /* 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 */

    /* Tooltip Default Delays */
    --tooltip-delay: 1500ms;
    --tooltip-close-delay: 500ms;
  }

  .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: var(--scrollbar-thumb);
    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
    --scrollbar-track: transparent;
    --scrollbar-gutter: auto;
    --scrollbar-width: thin;
    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

    --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);

    /* Backdrop */
    --backdrop: rgba(0, 0, 0, 0.6);

    /* 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 */

    /* Calculated Colors */
    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);

    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
    --background-inverse: var(--foreground);

    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);

    --field-hover: color-mix(
      in oklab,
      var(--field-background, var(--default)) 90%,
      var(--field-foreground, var(--foreground)) 2%
    );
    --field-focus: var(--field-background, var(--default));
    --field-border-hover: color-mix(
      in oklab,
      var(--field-border, var(--border)) 88%,
      var(--field-foreground, var(--foreground)) 10%
    );
    --field-border-focus: color-mix(
      in oklab,
      var(--field-border, var(--border)) 74%,
      var(--field-foreground, var(--foreground)) 22%
    );

    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
    --default-soft-foreground: var(--default-foreground);
    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);

    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);

    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);

    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);

    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);

    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);

    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
  }

  /* Vibrant palette - more saturated soft foregrounds, less contrast */
  [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) {
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
    --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
  }

  [data-vibrant-palette="true"].dark,
  [data-vibrant-palette="true"][data-theme="dark"] {
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
    --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
  }
}
