/* Raw color palette — constant, never changes per theme */
:root {
  --color-violet-gray-2: #0b0a1d;
  --color-violet-gray-5: #15122d;
  --color-violet-gray-10: #201a40;
  --color-violet-gray-15: #2b2152;
  --color-violet-gray-20: #362965;
  --color-violet-gray-25: #423278;
  --color-violet-gray-30: #4d3a87;
  --color-violet-gray-35: #594592;
  --color-violet-gray-40: #64529d;
  --color-violet-gray-50: #7e6bb5;
  --color-violet-gray-60: #9786c3;
  --color-violet-gray-70: #b0a4d0;
  --color-violet-gray-80: #d4bcff;
  --color-violet-gray-85: #ddcef7;
  --color-violet-gray-90: #e5e0ee;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-violet-50: #8e54f0;
  --color-violet-60: #a775ff;
  --color-violet-70: #bd99ff;

  --color-red-50: #d63d5b;
  --color-green-50: #31996e;
  --color-green-60: #09a571;
  --color-blue: #254ddb;

  /* Extended violet-gray scale (light end) */
  --color-violet-gray-95: #f8f7fc;
  --color-violet-gray-92: #f0edf8;
  --color-violet-40: #6923dc;
}

/* Semantic aliases — these change per theme */
:root,
[data-theme="dark"] {
  --color-foreground: var(--color-white);
  --color-foreground-secondary: var(--color-violet-gray-70);

  --color-base: var(--color-violet-gray-2);
  --color-surface: var(--color-violet-gray-5);
  --color-surface-alt: var(--color-violet-gray-10);
  --color-raised: var(--color-violet-gray-15);
  --color-hover: var(--color-violet-gray-20);
  --color-active: var(--color-violet-gray-25);

  --color-primary: var(--color-violet-50);
  --color-primary-hover: var(--color-violet-60);
  --color-highlight: var(--color-violet-70);

  --shadow-default: 2px 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 0 4px rgba(0, 0, 0, 0.4);

  --scrollbar-track: rgba(142, 84, 240, 0.1);
  --scrollbar-thumb: rgba(142, 84, 240, 0.6);
}

[data-theme="light"] {
  --color-foreground: var(--color-violet-gray-15);
  --color-foreground-secondary: var(--color-violet-gray-40);

  --color-base: var(--color-white);
  --color-surface: var(--color-violet-gray-95);
  --color-surface-alt: var(--color-violet-gray-92);
  --color-raised: var(--color-violet-gray-85);
  --color-hover: var(--color-violet-gray-80);
  --color-active: var(--color-violet-gray-60);

  --color-primary: var(--color-violet-40);
  --color-primary-hover: var(--color-violet-50);
  --color-highlight: var(--color-violet-40);

  --shadow-default: 2px 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 0 4px rgba(0, 0, 0, 0.12);

  --scrollbar-track: rgba(142, 84, 240, 0.06);
  --scrollbar-thumb: rgba(142, 84, 240, 0.35);
}

/*
 * Override hardcoded white fill on inline SVGs in light mode.
 * Icons using render fill="#ffffff" as an
 * SVG attribute. This rule overrides it to inherit from the
 * parent's text color (which is theme-aware via --color-foreground).
 */
[data-theme="light"] svg[fill="#ffffff"],
[data-theme="light"] svg[fill="#fff"],
[data-theme="light"] svg[fill="white"] {
  fill: var(--color-foreground);
}

/* Theme-aware logo: show dark text variant in light mode */
.logo-light {
  display: none;
}

[data-theme="light"] .logo-dark {
  display: none;
}

[data-theme="light"] .logo-light {
  display: block;
}

/* Overlap variant for containers that need shift-free logo swap */
.logo-swap {
  position: relative;
  display: inline-block;
}

.logo-swap .logo-dark,
.logo-swap .logo-light {
  display: block;
}

.logo-swap .logo-light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.logo-swap .logo-dark {
  opacity: 1;
}

[data-theme="light"] .logo-swap .logo-dark {
  opacity: 0;
}

[data-theme="light"] .logo-swap .logo-light {
  opacity: 1;
}

/* Smooth theme transition - applied briefly during theme switch */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease,
    fill 0.3s ease !important;
  transition-delay: 0s !important;
}