/* Light/dark theme support.
   Inline colors in the app bundle reference these RGB triplets,
   e.g. rgba(var(--ink),0.52), so swapping them re-themes the whole site. */

:root {
  --ink: 255, 255, 255;
  --shade: 10, 12, 20;
  --acc: 126, 200, 244;
  --acc-green: 110, 231, 183;
  --acc-pink: 251, 182, 206;
  --acc-purple: 192, 132, 252;
  --pub-img-filter: brightness(0.88) contrast(0.95); /* dims paper thumbnails */

  /* Tag/badge background tints; same as the text accents in dark mode */
  --acc-tint: var(--acc);
  --acc-green-tint: var(--acc-green);
  --acc-pink-tint: var(--acc-pink);
  --acc-purple-tint: var(--acc-purple);
  --tint-k: 1;
}

/* :root + attribute outranks the bundle's :root, .dark and :root:not(.light) rules */
html[data-theme="light"]:root {
  color-scheme: light;
  --ink: 0, 0, 0;
  --shade: 255, 255, 255;
  --acc: 7, 89, 133;
  --acc-green: 6, 95, 70;
  --acc-pink: 157, 23, 77;
  --acc-purple: 107, 33, 168;
  --pub-img-filter: none;

  /* Brighter, more saturated tag backgrounds */
  --acc-tint: 14, 165, 233;
  --acc-green-tint: 16, 185, 129;
  --acc-pink-tint: 236, 72, 153;
  --acc-purple-tint: 168, 85, 247;
  --tint-k: 1.5;

  /* Page is darker than the blocks/tables that sit on it */
  --surface: #fcfcfb;
  --surface-head: #f3f3f1;

  --background: #e8e8e5;
  --foreground: #09090bf2;
  --card: #18181b0a;
  --card-foreground: #18181bee;
  --popover: #ffffff;
  --popover-foreground: #18181b;
  --primary: #0369a1;
  --primary-foreground: #ffffff;
  --secondary: #18181b0d;
  --secondary-foreground: #18181be0;
  --muted: #18181b08;
  --muted-foreground: #18181b99;
  --accent: #18181b0d;
  --accent-foreground: #18181bee;
  --border: #18181b1a;
  --input: #18181b1f;
  --ring: #0369a1;
  --glass-bg: #18181b08;
  --glass-border: #18181b1a;
  --glass-hover: #18181b10;
  --text-primary: #18181b;
  --text-secondary: #18181bb3;
  --accent-blue: #0369a1;
  --accent-purple: #7e22ce;
  --accent-green: #047857;
  --badge-green-text: #047857;
  --badge-green-bg: #0478571a;
  --badge-green-border: #04785740;
  --badge-pink-text: #be185d;
  --badge-pink-bg: #be185d1a;
  --badge-pink-border: #be185d40;
}

html[data-theme="light"] body {
  color: #09090bf2;
  background-color: #e8e8e5;
  background-image: linear-gradient(#ebebe8, #e3e3e0 60%, #ebebe8);
}

html[data-theme="light"] .table-scroll-hint::after {
  background: linear-gradient(90deg, transparent, #fcfcfbd9);
}

/* Light mode: blocks and tables are brighter than the page (inline styles, hence !important) */
html[data-theme="light"] [data-loc="client/src/pages/Research.tsx:270"],
html[data-theme="light"] [data-loc="client/src/pages/Home.tsx:406"],
html[data-theme="light"] [data-loc="client/src/pages/Home.tsx:458"],
html[data-theme="light"] [data-loc="client/src/pages/Presentations.tsx:396"],
html[data-theme="light"] [data-loc="client/src/pages/Home.tsx:pub-card"],
html[data-theme="light"] [data-loc="client/src/pages/Presentations.tsx:538"],
html[data-theme="light"] [data-loc="client/src/pages/Landing.tsx:371"],
html[data-theme="light"] [data-loc="client/src/pages/Landing.tsx:171"],
html[data-theme="light"] [data-loc="client/src/pages/Landing.tsx:285"] {
  background: var(--surface) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

html[data-theme="light"] [data-loc="client/src/pages/Research.tsx:270"]:hover,
html[data-theme="light"] [data-loc="client/src/pages/Home.tsx:458"]:hover,
html[data-theme="light"] [data-loc="client/src/pages/Landing.tsx:371"]:hover {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Table header rows */
html[data-theme="light"] [data-loc="client/src/pages/Home.tsx:421"],
html[data-theme="light"] [data-loc="client/src/pages/Presentations.tsx:553"] {
  background: var(--surface-head) !important;
}

/* Links inside the landing-page bio */
.bio-link {
  color: rgb(var(--acc));
  text-decoration: underline;
  text-decoration-color: rgba(var(--acc), 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

.bio-link:hover {
  text-decoration-color: rgb(var(--acc));
}

/* Brief color cross-fade while switching; removed again by theme-toggle.js */
html.theme-switching,
html.theme-switching * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* The switch: a round button in the bottom-right corner */
.theme-toggle {
  position: fixed;
  right: 24px;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 200;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink), 0.14);
  background: rgba(var(--shade), 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(var(--ink), 0.65);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.theme-toggle:hover {
  background: rgba(var(--acc), 0.15);
  border-color: rgba(var(--acc), 0.35);
  color: rgb(var(--acc));
  transform: translateY(-2px);
}

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

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s ease;
}

.theme-toggle:active svg {
  transform: rotate(30deg);
}

/* Show the icon for the mode you'd switch *to* */
html[data-theme="light"] .theme-toggle .icon-sun,
html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.theme-switching,
  html.theme-switching *,
  .theme-toggle,
  .theme-toggle svg {
    transition: none !important;
  }
}