/* ===========================================================================
   SANA — theme tokens (dark / light)
   ---------------------------------------------------------------------------
   style.css consumes these tokens instead of hard-coded colours, so switching
   `data-theme` on <html> re-skins the whole site. Tailwind utility classes are
   handled separately in theme-tailwind-light.css.

   The *-boost tokens scale alpha per theme: a 40% white veil that reads well on
   near-black needs to be a much denser ink on a light surface, and the deep
   drop shadows have to lighten up so light mode does not look muddy.
   =========================================================================== */

:root {
  color-scheme: dark;

  --page-bg: #000000;

  /* text */
  --ink-rgb: 255 255 255;
  --ink-2: #cbd5e1;
  --ink-3: #94a3b8;
  --ink-4: #64748b;

  /* surfaces */
  --surface-3: #475569;
  --veil-rgb: 255 255 255;
  --veil-boost: 1;
  --panel-rgb: 15 23 42;
  --panel-boost: 1;
  --deep-rgb: 2 6 23;
  --scrim-rgb: 0 0 0;
  --scrim-boost: 1;

  /* depth */
  --shadow-rgb: 0 0 0;
  --shadow-boost: 1;
  --glow-boost: 1;

  /* accent */
  --accent: #22d3ee;
  --accent-strong: #06b6d4;
  --accent-bright: #00e5ff;
  --accent-soft: #a5f3fc;
  --accent-rgb: 34 211 238;
  --accent-deep-rgb: 6 182 212;

  /* ink that sits on top of a saturated accent fill — identical in both themes */
  --ink-inv-rgb: 0 0 0;

  /* media treatment */
  --media-brightness: 1;
}

:root[data-theme="light"] {
  color-scheme: light;

  --page-bg: #eef2f7;

  --ink-rgb: 15 23 42;
  --ink-2: #334155;
  --ink-3: #475569;
  --ink-4: #64748b;

  --surface-3: #cbd5e1;
  --veil-rgb: 15 23 42;
  --veil-boost: 0.5;
  --panel-rgb: 255 255 255;
  --panel-boost: 1.9;
  --deep-rgb: 226 232 240;
  --scrim-rgb: 241 245 249;
  --scrim-boost: 1.15;

  --shadow-rgb: 100 116 139;
  --shadow-boost: 0.5;
  --glow-boost: 0.45;

  --accent: #0e7490;
  --accent-strong: #0891b2;
  --accent-bright: #0891b2;
  --accent-soft: #155e75;
  --accent-rgb: 8 145 178;
  --accent-deep-rgb: 14 116 144;

  --ink-inv-rgb: 255 255 255;

  --media-brightness: 1.04;
}

html,
body,
main {
  background-color: var(--page-bg) !important;
}

/* The home page's WebGL space tunnel is a fixed canvas at z-index -10, so it
   paints above the root canvas background but below every block background.
   html keeps the themed page colour; body and main have to stay transparent
   on that page or they cover the tunnel completely. */
body:has(#grid-scan-container),
body:has(#grid-scan-container) main {
  background-color: transparent !important;
}

/* Themed colours animate rather than snap when the toggle is hit. Everything is
   scoped to the transition class so the initial paint is not animated. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease,
    fill 0.35s ease, stroke 0.35s ease, box-shadow 0.35s ease !important;
}

/* ---------------------------------------------------------------------------
   Toggle control
   --------------------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--accent-deep-rgb) / 0.3);
  background: rgb(var(--accent-deep-rgb) / 0.08);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* style.css forces `padding-inline: 1.5rem !important` on every nav button — the
   square toggle has to opt out or it stretches into a pill. */
nav .theme-toggle:not(.theme-toggle--wide) {
  padding-inline: 0 !important;
}

.theme-toggle:hover {
  background: rgb(var(--accent-deep-rgb) / 0.18);
  border-color: rgb(var(--accent-deep-rgb) / 0.55);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / calc(0.35 * var(--glow-boost)));
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* dark theme shows the sun (the thing you can switch *to*) */
.theme-toggle .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle .theme-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

:root[data-theme="light"] .theme-toggle .theme-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

:root[data-theme="light"] .theme-toggle .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* sidebar variant sits inline with a label */
.theme-toggle--wide {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  justify-content: flex-start;
}

.theme-toggle--wide svg {
  position: static;
}

.theme-toggle--wide .theme-icon-sun,
.theme-toggle--wide .theme-icon-moon {
  position: absolute;
  left: 1rem;
}

.theme-toggle-label {
  margin-left: 1.9rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: rgb(var(--ink-rgb) / 0.85);
}

.theme-toggle-label::after {
  content: "Light mode";
}

:root[data-theme="light"] .theme-toggle-label::after {
  content: "Dark mode";
}

/* ---------------------------------------------------------------------------
   Light-mode corrections the automatic inversion cannot infer
   --------------------------------------------------------------------------- */

/* dropdown panel uses an arbitrary hex */
:root[data-theme="light"] .bg-\[\#0E162B\] {
  background-color: #ffffff !important;
}

/* photographic and video content stays as shot — only nudged for the lighter page */
:root[data-theme="light"] img:not(.theme-exempt),
:root[data-theme="light"] video:not(.theme-exempt) {
  filter: brightness(var(--media-brightness));
}

/* full-bleed hero media sits under dark-on-light copy, so it needs holding back */
:root[data-theme="light"] .hero-slide-img,
:root[data-theme="light"] #hero-video {
  filter: brightness(1.12) saturate(0.92);
}

:root[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgb(238 242 247 / 0.55),
    rgb(238 242 247 / 0.25) 45%,
    rgb(238 242 247 / 0.9)
  );
}

/* the three.js scan grid is drawn in additive light — invisible on white */
:root[data-theme="light"] .grid-scan-container {
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* glass panels need a real edge once the backdrop is light */
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .nav-inner,
:root[data-theme="light"] .pin-tooltip {
  border-color: rgb(15 23 42 / 0.1);
  box-shadow: 0 18px 45px rgb(100 116 139 / 0.18);
}

:root[data-theme="light"] .sana-footer-grid-overlay,
:root[data-theme="light"] .sana-footer-top-glow {
  opacity: 0.4;
}

/* Saturated accent fills keep white labels in light mode. The fill stays strong in
   both themes, so flipping the label to dark ink would drop it below contrast.
   !important is needed because several of these labels are set with !important in
   style.css, which no amount of specificity here can outrank. */
:root[data-theme="light"] :is(
    .nav-cta-btn,
    .nav-cta-action,
    .sana-footer-btn,
    .dropdown-link.active,
    .nav-dropdown-item:hover,
    .sideMenuDropDown a,
    .projects-bottom-controls .project-ctrl-btn:hover,
    .hub-case-link:hover .link-icon-circle
  ),
:root[data-theme="light"] :is(
    .nav-cta-btn,
    .nav-cta-action,
    .sana-footer-btn
  ) :is(span, svg, i) {
  color: #ffffff !important;
}

:root[data-theme="light"]
  :is([class*="from-cyan-5"], [class*="from-cyan-6"], [class*="from-blue-5"], [class*="from-blue-6"])[class*="bg-gradient-to"]:not([class*="bg-clip-text"]),
:root[data-theme="light"]
  :is([class*="from-cyan-5"], [class*="from-cyan-6"], [class*="from-blue-5"], [class*="from-blue-6"])[class*="bg-gradient-to"]:not([class*="bg-clip-text"])
  :is(span, svg, .text-white, .text-slate-300) {
  color: #ffffff !important;
}