/* Kalasutra palette: the logo's maroon background and gold artwork, applied
   to the default (dark) theme by overriding @medusajs/ui-preset's variables.
   :root.dark outranks the preset's .dark whatever the load order. */
:root.dark {
  --bg-base: rgba(77, 1, 6, 1);
  --bg-base-hover: rgba(90, 5, 11, 1);
  --bg-base-pressed: rgba(100, 10, 16, 1);
  --bg-subtle: rgba(62, 1, 5, 1);
  --bg-subtle-hover: rgba(74, 3, 8, 1);
  --bg-subtle-pressed: rgba(84, 6, 11, 1);
  --bg-component: rgba(94, 10, 16, 1);
  --bg-component-hover: rgba(107, 17, 24, 1);
  --bg-component-pressed: rgba(117, 24, 31, 1);
  --bg-field: rgba(94, 10, 16, 1);
  --bg-field-hover: rgba(107, 17, 24, 1);
  --bg-field-component: rgba(62, 1, 5, 1);
  --bg-field-component-hover: rgba(74, 3, 8, 1);
  --bg-interactive: rgba(248, 218, 120, 1);
  --bg-highlight: rgba(248, 218, 120, 0.12);
  --bg-highlight-hover: rgba(248, 218, 120, 0.2);

  --border-base: rgba(248, 218, 120, 0.18);
  --border-strong: rgba(248, 218, 120, 0.32);
  --border-interactive: rgba(248, 218, 120, 1);

  --fg-base: rgba(251, 243, 228, 1);
  --fg-subtle: rgba(251, 243, 228, 0.72);
  --fg-muted: rgba(251, 243, 228, 0.5);
  --fg-interactive: rgba(248, 218, 120, 1);
  --fg-interactive-hover: rgba(255, 233, 163, 1);
  --fg-on-inverted: rgba(58, 0, 4, 1);

  /* Primary buttons in gold, secondary in a lighter maroon. */
  --button-inverted: rgba(248, 218, 120, 1);
  --button-inverted-hover: rgba(255, 227, 154, 1);
  --button-inverted-pressed: rgba(233, 199, 102, 1);
  --button-neutral: rgba(94, 10, 16, 1);
  --button-neutral-hover: rgba(107, 17, 24, 1);
  --button-neutral-pressed: rgba(117, 24, 31, 1);
}

/* The nav sets its own translucent dark:bg-zinc-900/70. */
:root.dark .nav-material {
  background-color: rgba(62, 1, 5, 0.8) !important;
}