/* ============================================================
   AURORA — Theme Engine
   Light: warm white with mesh gradient depth
   Dark: rich navy with subtle glow accents
   ============================================================ */

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
  /* Surfaces — warm, not flat white */
  --bg-canvas: #fafafb;
  --bg-surface: #f4f4f6;
  --bg-surface-soft: #f8f8fa;
  --bg-surface-elevated: #ffffff;
  --bg-hero: var(--color-navy);
  --bg-hero-deep: var(--color-navy-deep);

  /* Text */
  --text-primary: #0a0e1a;
  --text-body: #2a2a34;
  --text-secondary: #5a5a66;
  --text-tertiary: #787884;
  --text-muted: #a8a8b3;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --text-on-primary: #ffffff;

  /* Borders — subtle, warm */
  --border-hairline: rgba(10, 14, 26, 0.06);
  --border-hairline-soft: rgba(10, 14, 26, 0.03);
  --border-hairline-strong: rgba(10, 14, 26, 0.12);
  --border-focus: var(--color-primary);

  /* Glass */
  --glass-card-bg: rgba(255, 255, 255, 0.60);
  --glass-card-border: rgba(255, 255, 255, 0.25);
  --glass-card-hover-bg: rgba(255, 255, 255, 0.72);
  --glass-nav-bg: rgba(250, 250, 251, 0.70);
  --glass-nav-border: rgba(10, 14, 26, 0.05);
  --glass-section-bg: rgba(255, 255, 255, 0.40);
  --glass-hero-bg: rgba(10, 14, 26, 0.40);
  --glass-hero-border: rgba(255, 255, 255, 0.06);
  --glass-blur-strength: var(--glass-blur);
  --glass-sat: var(--glass-saturation);
  --glass-inner-glow: var(--shadow-inner-light);

  /* Nav */
  --nav-text: var(--text-secondary);
  --nav-text-hover: var(--color-primary);

  /* Shadows */
  --shadow-card: var(--shadow-2);
  --shadow-card-hover: var(--shadow-4);
  --shadow-nav: var(--shadow-2);

  /* Overlay */
  --overlay-scrim: rgba(10, 14, 26, 0.40);

  /* Selection */
  --selection-bg: rgba(0, 102, 255, 0.12);
  --selection-text: var(--text-primary);

  /* Scrollbar */
  --scrollbar-thumb: rgba(10, 14, 26, 0.18);
  --scrollbar-thumb-hover: rgba(10, 14, 26, 0.30);
  --scrollbar-thumb-active: rgba(0, 102, 255, 0.50);
  --scrollbar-track: transparent;
  --scrollbar-track-hover: rgba(10, 14, 26, 0.03);
  --scrollbar-width: 10px;
  --scrollbar-radius: var(--radius-full);
  --scrollbar-gutter: 2px;

  /* Mesh background for sections */
  --section-mesh: var(--mesh-combined);

  /* Tints — muted, refined (not pastel) */
  --tint-blue: rgba(0, 102, 255, 0.06);
  --tint-cyan: rgba(0, 212, 255, 0.06);
  --tint-coral: rgba(255, 107, 107, 0.06);
  --tint-amber: rgba(255, 169, 77, 0.06);
  --tint-lime: rgba(81, 207, 102, 0.06);
  --tint-violet: rgba(132, 94, 247, 0.06);
  --tint-pink: rgba(247, 131, 172, 0.06);
  --tint-teal: rgba(32, 201, 151, 0.06);
  --tint-text: var(--text-body);

  /* Dot opacity */
  --dot-opacity: 0.7;
}

/* ---- DARK THEME ---- */
[data-theme="dark"] {
  /* Surfaces — rich navy, not flat black */
  --bg-canvas: #0a0e1a;
  --bg-surface: #121829;
  --bg-surface-soft: #0d1220;
  --bg-surface-elevated: #1a2236;
  --bg-hero: var(--color-navy);
  --bg-hero-deep: var(--color-navy-deep);

  /* Text */
  --text-primary: #f4f4f6;
  --text-body: #d1d1d8;
  --text-secondary: #a8a8b3;
  --text-tertiary: #787884;
  --text-muted: #5a5a66;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.5);
  --text-on-primary: #ffffff;

  /* Borders — extremely subtle */
  --border-hairline: rgba(255, 255, 255, 0.05);
  --border-hairline-soft: rgba(255, 255, 255, 0.03);
  --border-hairline-strong: rgba(255, 255, 255, 0.10);
  --border-focus: var(--color-primary);

  /* Glass */
  --glass-card-bg: rgba(26, 34, 54, 0.50);
  --glass-card-border: rgba(255, 255, 255, 0.06);
  --glass-card-hover-bg: rgba(26, 34, 54, 0.65);
  --glass-nav-bg: rgba(10, 14, 26, 0.70);
  --glass-nav-border: rgba(255, 255, 255, 0.04);
  --glass-section-bg: rgba(255, 255, 255, 0.02);
  --glass-hero-bg: rgba(10, 14, 26, 0.30);
  --glass-hero-border: rgba(255, 255, 255, 0.04);
  --glass-blur-strength: var(--glass-blur);
  --glass-sat: 130%;
  --glass-inner-glow: var(--shadow-inner-dark);

  /* Nav */
  --nav-text: var(--text-secondary);
  --nav-text-hover: var(--color-accent);

  /* Shadows — deeper in dark mode */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-nav: 0 4px 16px rgba(0, 0, 0, 0.3);

  /* Overlay */
  --overlay-scrim: rgba(0, 0, 0, 0.60);

  /* Selection */
  --selection-bg: rgba(0, 102, 255, 0.25);
  --selection-text: #ffffff;

  /* Scrollbar */
  --scrollbar-thumb: rgba(255, 255, 255, 0.10);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.20);
  --scrollbar-thumb-active: rgba(0, 212, 255, 0.45);
  --scrollbar-track: transparent;
  --scrollbar-track-hover: rgba(255, 255, 255, 0.02);
  --scrollbar-width: 10px;
  --scrollbar-radius: var(--radius-full);
  --scrollbar-gutter: 2px;

  /* Mesh background — stronger glow in dark */
  --section-mesh: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 102, 255, 0.12), transparent 60%),
                   radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 212, 255, 0.08), transparent 60%),
                   radial-gradient(ellipse 50% 40% at 50% 100%, rgba(132, 94, 247, 0.06), transparent 60%);

  /* Tints — deep, muted */
  --tint-blue: rgba(0, 102, 255, 0.10);
  --tint-cyan: rgba(0, 212, 255, 0.08);
  --tint-coral: rgba(255, 107, 107, 0.08);
  --tint-amber: rgba(255, 169, 77, 0.08);
  --tint-lime: rgba(81, 207, 102, 0.08);
  --tint-violet: rgba(132, 94, 247, 0.08);
  --tint-pink: rgba(247, 131, 172, 0.08);
  --tint-teal: rgba(32, 201, 151, 0.08);
  --tint-text: var(--text-body);

  /* Dot opacity */
  --dot-opacity: 0.5;
}

/* ---- THEME TRANSITION ---- */
[data-theme] {
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

/* ---- SELECTION ---- */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* ---- SCROLLBAR DESIGN SYSTEM ---- */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit / Chromium */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
  margin: var(--scrollbar-gutter) 0;
}

::-webkit-scrollbar-track:hover {
  background: var(--scrollbar-track-hover);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--duration-fast) var(--ease-standard);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: padding-box;
}

/* Corner where horizontal and vertical scrollbars meet */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Thin variant for modals, dropdowns, code blocks */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

/* Hidden scrollbar (for carousels, horizontal sliders) */
.scrollbar-none {
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}