/* ==========================================================================
   0. Easing Tokens (used by View Transition animation)
   ========================================================================== */
:root {
  --expo-in: linear(
    0 0%, 0.0085 31.26%, 0.0167 40.94%,
    0.0289 48.86%, 0.0471 55.92%,
    0.0717 61.99%, 0.1038 67.32%,
    0.1443 72.07%, 0.1989 76.7%,
    0.2659 80.89%, 0.3465 84.71%,
    0.4419 88.22%, 0.554 91.48%,
    0.6835 94.51%, 0.8316 97.34%, 1 100%
  );
  --expo-out: linear(
    0 0%, 0.1684 2.66%, 0.3165 5.49%,
    0.446 8.52%, 0.5581 11.78%,
    0.6535 15.29%, 0.7341 19.11%,
    0.8011 23.3%, 0.8557 27.93%,
    0.8962 32.68%, 0.9283 38.01%,
    0.9529 44.08%, 0.9711 51.14%,
    0.9833 59.06%, 0.9915 68.74%, 1 100%
  );
}

/* ==========================================================================
   1. color-scheme — the single switch that drives light-dark()
   Must be on html (same element as [data-theme]) so light-dark() resolves
   correctly. Using html[data-theme] for specificity to win over Blocksy's
   own :root declarations set via the Customizer.
   ========================================================================== */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark;  }

/* ==========================================================================
   2. Design Tokens via light-dark()
   Declared on html[data-theme] (not :root) so they win specificity over
   Blocksy's inline Customizer variables. light-dark() resolves because
   color-scheme is set on the same element above.
   ========================================================================== */
html[data-theme="light"],
html[data-theme="dark"] {
  /* Site-level */
  --site-bg-color:   light-dark(#ffffff,  #0c1117);
  --site-text-color: light-dark(#192a3d,  #c9d1d9);

  /* Blocksy Palette */
  --theme-palette-color-1: light-dark(#C5CDD6, #1c232c); /* Primary Accent (#light, #dark) */
  --theme-palette-color-2: light-dark(#0047ab, #0047ab); /* Hover Accent (#1559ed, #3d7eff); */
  --theme-palette-color-3: light-dark(#3A4F66, #8b949e); /* Body Text */
  --theme-palette-color-4: light-dark(#192a3d, #f0f6fc); /* Headings */
  --theme-palette-color-5: light-dark(#e1e8ed, #21262d); /* Borders */
  --theme-palette-color-6: light-dark(#f2f5f7, #161b22); /* Subtle BG */
  --theme-palette-color-7: light-dark(#fafbfc, #10161e); /* Near-white/black tint */
  --theme-palette-color-8: light-dark(#ffffff, #0c1117); /* Main Site BG */
  --theme-palette-color-9: light-dark(#7A8CA0, #A8B3BD); /* Light Gray (lighter than color-3) */

}

/* ==========================================================================
   3. Base Text & Background
   ========================================================================== */
html body {
  background-color: var(--site-bg-color);
  color: var(--site-text-color);
}

/* ==========================================================================
   4. Elementor Global Colors
   Also scoped under html[data-theme] to override Elementor's own kit styles.
   ========================================================================== */
html[data-theme="light"] [class*="elementor-kit-"],
html[data-theme="dark"]  [class*="elementor-kit-"] {
  --e-global-color-primary:   light-dark(#76C1D4, #5b9bff);
  --e-global-color-secondary: light-dark(#54595F, #9aa0a6);
  --e-global-color-text:      light-dark(#131415, #e6e6e6);
  --e-global-color-accent:    light-dark(#61CE70, #61ce70);
}

/* ==========================================================================
   5. Theme Toggle — single icon button
   Structure: button.dark-mode-toggle > (icon-sun, icon-moon)
   Both icons are stacked in the same spot; only one is visible at a time,
   swapped with a fade based on [data-theme]. Icon color is fixed white.
   ========================================================================== */
.dark-mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

.dark-mode-toggle svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: none;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.icon-sun circle {
  fill: currentColor;
}

.icon-sun line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.icon-moon path {
  fill: currentColor;
}

/* Light mode: sun visible, moon hidden */
html[data-theme="light"] .dark-mode-toggle .icon-sun  { opacity: 1; }
html[data-theme="light"] .dark-mode-toggle .icon-moon { opacity: 0; }

/* Dark mode: moon visible, sun hidden */
html[data-theme="dark"] .dark-mode-toggle .icon-moon { opacity: 1; }
html[data-theme="dark"] .dark-mode-toggle .icon-sun  { opacity: 0; }

/* ==========================================================================
   6. Fixed Dot Grid Background
   light-dark() works here because color-scheme is inherited from html.
   ========================================================================== */
.dot-grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: 28px 28px;
  background-position: center;
  background-image: radial-gradient(
    light-dark(rgba(25, 42, 61, 0.18), rgba(242, 245, 247, 0.18)) 1px,
    transparent 1px
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at center, black 30%, transparent 85%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .dot-grid-bg { background-size: 22px 22px; }
}

/* ==========================================================================
   7. View Transition — theme switch animation
   ========================================================================== */

/* The snapshot layers sit above the whole page during the transition and
   would otherwise swallow pointer/mousemove events (freezing anything that
   tracks the mouse, like the custom cursor) — let events pass through.
   Each selector gets its own rule: if a browser doesn't support one of
   these (e.g. wildcard args), an invalid selector in a comma-joined list
   would otherwise drop the ENTIRE rule, including the ones it does support. */
::view-transition {
  pointer-events: none;
}

::view-transition-group(root) {
  pointer-events: none;
}

::view-transition-image-pair(root) {
  pointer-events: none;
}

::view-transition-old(root) {
  pointer-events: none;
}

::view-transition-new(root) {
  pointer-events: none;
}

::view-transition-group(root) {
  animation-timing-function: var(--expo-in);
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>')
    center / 0 no-repeat;
  animation: theme-wipe-scale 1s;
  animation-fill-mode: both;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  animation-fill-mode: both;
  z-index: -1;
}

.dark::view-transition-new(root) {
  animation: theme-wipe-scale 1s;
  animation-fill-mode: both;
}

@keyframes theme-wipe-scale {
  to {
    mask-size: 200vmax;
  }
}