/* Most styling comes from Bootstrap utilities in the markup.
   This file only retunes variables and defines the few repeated components.

   Light and dark schemes come from one set of tokens via light-dark(), so
   Bootstrap's own [data-bs-theme] dark mode is unused. */

/* ---------- design tokens ---------- */

:root {
  color-scheme: light dark;

  --paper: light-dark(#fbfaf7, #15171c);
  --paper-tint: light-dark(#f3f0ea, #1b1e24);
  --surface: light-dark(#ffffff, #21242b);
  --ink: light-dark(#1a1d24, #e9e7e2);
  --ink-tint: light-dark(#353842, #beb7b8);
  --muted: light-dark(#6c6a72, #9d9ca1);
  --line: light-dark(#c9bdb2, #484449);
  --line-tint: light-dark(#e4ded6, #303034);

  --primary: light-dark(#b3216b, #dd5a92);
  --primary-wash: light-dark(rgba(179, 33, 107, 0.08), rgba(221, 90, 146, 0.14));
  --secondary: light-dark(#c4452f, #e06a4a);
  --accent: light-dark(#d98a1f, #e8a33a);
  --accent-wash: light-dark(rgba(217, 138, 31, 0.09), rgba(232, 163, 58, 0.12));

  /* Effects. */
  --glass-bg: light-dark(rgba(251, 250, 247, 0.8), rgba(21, 23, 28, 0.82));
  --stage-glow: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.06));
  --stage-top: light-dark(#f4f1eb, #262a33);
  --stage-bottom: light-dark(#e6e1d5, #1a1d23);
  --swatch-border: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
  --label-border: light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12));
  --selection-bg: light-dark(rgba(179, 33, 107, 0.2), rgba(221, 90, 146, 0.3));

  /* Part-legend swatches. */
  --part-red: #e6194b;
  --part-green: #3cb44b;
  --part-yellow: #ffe119;
  --part-blue: #4363d8;
  --part-orange: #f58231;
  --part-purple: #911eb4;
  --part-cyan: #42d4f4;
  --part-pink: #f032e6;

  /* Bootstrap theme. */
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--paper-tint);
  --bs-border-color: var(--line-tint);

  /* Bootstrap's utilities read these rgb triplets, not the plain color tokens above.
     light-dark() cannot express number lists, so the dark values live in the media query below. */
  --bs-body-bg-rgb: 251, 250, 247;
  --bs-body-color-rgb: 26, 29, 36;
  --bs-emphasis-color-rgb: 26, 29, 36;
  --bs-tertiary-bg-rgb: 243, 240, 234;
  --bs-primary-rgb: 179, 33, 107;
  --bs-link-color-rgb: 179, 33, 107;
  --bs-link-hover-color-rgb: 26, 29, 36;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-line-height: 1.65;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-weight-heading: 600;
  --font-weight-label: 500;

  --bs-border-width: 1px;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-box-shadow-sm:
    0 1px 2px light-dark(rgba(20, 20, 30, 0.05), rgba(0, 0, 0, 0.4)),
    0 4px 14px -8px light-dark(rgba(20, 20, 30, 0.12), rgba(0, 0, 0, 0.6));
  --bs-box-shadow:
    0 2px 6px light-dark(rgba(20, 20, 30, 0.06), rgba(0, 0, 0, 0.45)),
    0 18px 40px -20px light-dark(rgba(20, 20, 30, 0.25), rgba(0, 0, 0, 0.75));

  /* Swiper theme. */
  --swiper-theme-color: var(--primary);
  --swiper-navigation-color: var(--ink);
  --swiper-navigation-size: 2.5rem;
  /* Arrows sit outside the carousel, but not past the viewport edge */
  --swiper-navigation-sides-offset: calc(-1 * min(3.5rem, (100vw - 100%) / 2 - 0.75rem));
  --swiper-pagination-bullet-inactive-color: var(--line);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 4px;

  --transition: 0.15s ease-in-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg-rgb: 21, 23, 28;
    --bs-body-color-rgb: 233, 231, 226;
    --bs-emphasis-color-rgb: 233, 231, 226;
    --bs-tertiary-bg-rgb: 27, 30, 36;
    --bs-primary-rgb: 221, 90, 146;
    --bs-link-color-rgb: 221, 90, 146;
    --bs-link-hover-color-rgb: 233, 231, 226;
  }
}

::selection {
  background: var(--selection-bg);
}

a:not(.btn):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- typography ---------- */

body {
  -webkit-font-smoothing: antialiased; /* makes text less chunky on macOS */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Newsreader", "Inter", serif;
  font-weight: var(--font-weight-heading);
}

.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 2.5rem;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.75rem;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.micro-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- header ---------- */

.hero-heading {
  text-wrap: balance;
  font-weight: var(--font-weight-heading);
  line-height: 0.9;
}

.title-mark {
  background: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-wash {
  background-image:
    radial-gradient(60% 90% at 12% 18%, var(--primary-wash), transparent 70%),
    radial-gradient(60% 90% at 88% 14%, var(--accent-wash), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 420px;
}

.venue-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--primary);
  outline: solid 4px var(--primary-wash);
}

.author-link {
  color: var(--ink);
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  transition:
    color var(--transition),
    text-decoration-color var(--transition);
}

.author-link:hover,
.author-link:focus-visible {
  color: var(--primary);
  text-decoration-color: var(--primary);
}

/* ---------- button ---------- */

.btn {
  --bs-btn-font-size: var(--font-size-sm);
  --bs-btn-font-weight: var(--font-weight-label);
}

/* Retint Bootstrap's buttons via their own variables. */
.btn-dark {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-color: var(--paper);
  --bs-btn-hover-bg: var(--ink-tint);
  --bs-btn-hover-border-color: var(--ink-tint);
  --bs-btn-hover-color: var(--paper);
  --bs-btn-active-bg: var(--ink-tint);
  --bs-btn-active-border-color: var(--ink-tint);
  --bs-btn-active-color: var(--paper);
  --bs-btn-disabled-bg: var(--muted);
  --bs-btn-disabled-border-color: var(--muted);
  --bs-btn-disabled-color: var(--paper);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-dark {
  --bs-btn-color: var(--ink-tint);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--paper-tint);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-active-color: var(--paper);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* ---------- navbar ---------- */

.navbar {
  --bs-nav-link-font-size: var(--font-size-sm);
  --bs-navbar-color: var(--ink);
  --bs-navbar-hover-color: var(--primary);
  --bs-navbar-brand-color: var(--ink);
  --bs-navbar-brand-hover-color: var(--ink);
}

/* Clear the navbar when jumping to an anchor. */
:target {
  scroll-margin-top: 3rem;
}

/* Bootstrap rings .nav-link with a hardcoded rgba(13,110,253,.25) that no
   variable can reach; the accent outline above already marks focus. */
.nav-link:focus-visible {
  box-shadow: none;
}

/* ---------- swiper ---------- */

.swiper-button-prev,
.swiper-button-next {
  padding: 0.75rem;
}

/* ---------- mesh viewer ---------- */

.viewer {
  background-image:
    radial-gradient(60% 80% at 50% 28%, var(--stage-glow), transparent 70%),
    linear-gradient(180deg, var(--stage-top) 0%, var(--stage-bottom) 100%);
}

.viewer-label {
  border: var(--bs-border-width) solid var(--label-border);
  max-width: calc(100% - 1rem);
}

/* ---------- part labels ---------- */

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: var(--bs-border-width) solid var(--swatch-border);
  flex-shrink: 0;
}
.swatch-red {
  background-color: var(--part-red);
}
.swatch-green {
  background-color: var(--part-green);
}
.swatch-blue {
  background-color: var(--part-blue);
}
.swatch-yellow {
  background-color: var(--part-yellow);
}
.swatch-purple {
  background-color: var(--part-purple);
}
.swatch-pink {
  background-color: var(--part-pink);
}
.swatch-orange {
  background-color: var(--part-orange);
}
.swatch-cyan {
  background-color: var(--part-cyan);
}

/* ---------- misc ---------- */

.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line-tint);
}

/* ---------- utility ---------- */

.bg-surface {
  background-color: var(--surface);
}

/* Tinted section that fades back to the page color at both edges. */
.bg-tint-fade {
  background-image: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--paper-tint) 18%,
    var(--paper-tint) 82%,
    var(--paper) 100%
  );
}

.glass {
  background-color: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.max-w-thumb {
  max-width: 6.5rem;
}
.max-w-reading {
  max-width: 68ch;
}
.max-w-media {
  max-width: 960px;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.z-1050 {
  z-index: 1050;
}