@import "tailwindcss";

/* ============================================================
   WEB THEME (default)
   ------------------------------------------------------------
   A "technical print" layout painted in the gruvbox dark-hard
   palette. Tokens live here; the page markup uses Tailwind
   utilities plus the @utility classes below. Everything visual
   is scoped to html[data-theme="web"] so the skeuo desktop
   (which reads its own vars from skeuo.css) is never affected.
   ============================================================ */

:root {
  /* gruvbox dark-hard */
  --bg: #1d2021;
  --bg-raised: #282828;
  --bg-well: #161819;

  --ink: #fbf1c7;
  --body: #d5c4a1;
  --muted: #a89984;
  --faint: #928374;

  /* one accent (orange); other gruvbox hues are for status only */
  --accent: #fe8019;
  --accent-strong: #d65d0e;
  --negative: #fb4934;
  --positive: #b8bb26;

  --rule: rgba(235, 219, 178, 0.16);
  --rule-soft: rgba(235, 219, 178, 0.09);
  --rule-strong: rgba(235, 219, 178, 0.3);

  --fill: rgba(235, 219, 178, 0.035);
  --fill-strong: rgba(235, 219, 178, 0.07);

  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Beats page.css's :root when the web theme is active. The desk is a light,
   colourful, cartoon-skeuomorphic surface — the dark gruvbox values in :root
   are only the fallback for the desktop mode. */
html[data-theme="web"] {
  color-scheme: light;
  --bg: #f7e7c6;
  --bg-raised: #fffdf6;
  --bg-well: #eed9b0;
  --accent: #f4823a;
  --accent2: #d4611c;
  --accent3: #f2c14e;
  --green: #58bd72;
  --red: #ea6f6a;
  --gray: #7f7768;
}

@theme inline {
  --color-ink: var(--ink);
  --color-body: var(--body);
  --color-muted: var(--muted);
  --color-faint: var(--faint);
  --color-accent: var(--accent);
  --color-accent-strong: var(--accent-strong);
  --color-positive: var(--positive);
  --color-negative: var(--negative);
  --color-bg: var(--bg);

  --font-sans: var(--font-plex);
  --font-mono: var(--font-plexmono);
  --font-display: var(--font-news);
}

html[data-theme="web"] {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  background-color: var(--bg);
}

html[data-theme="web"] ::selection {
  background: rgba(244, 130, 58, 0.3);
  color: var(--ink);
}

html[data-theme="web"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html[data-theme="web"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html[data-theme="web"] ::-webkit-scrollbar-track {
  background: var(--bg-well);
}
html[data-theme="web"] ::-webkit-scrollbar-thumb {
  background: #d9c49b;
  border: 3px solid var(--bg-well);
  border-radius: 99px;
}
html[data-theme="web"] ::-webkit-scrollbar-thumb:hover {
  background: #c9b184;
}

/* Phones never get the desktop-mode button. */
html[data-device="phone"] .desktop-toggle {
  display: none !important;
}

/* ------------------------------------------------------------------
   Type
   ------------------------------------------------------------------ */

@utility display {
  font-family: var(--font-news), Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--ink);
}

@utility serif-num {
  font-family: var(--font-news), Georgia, serif;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

/* run-in metadata label: mono, sentence case — deliberately not all-caps */
@utility label {
  font-family: var(--font-plexmono), ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
}

@utility lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
}

@utility measure {
  max-width: 34rem;
}

@utility measure-wide {
  max-width: 46rem;
}

/* ------------------------------------------------------------------
   Surfaces — restrained translucency, hairline rules
   ------------------------------------------------------------------ */

@utility shell {
  width: 100%;
  max-width: 1840px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 5rem);
}

@utility glass {
  background-color: var(--fill);
  border: 1px solid var(--rule);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

@utility glass-soft {
  background-color: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
}

@utility glass-sunken {
  background-color: var(--bg-well);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
}

@utility glass-bar {
  background-color: rgba(29, 32, 33, 0.94);
  border-bottom: 1px solid rgba(235, 219, 178, 0.22);
  backdrop-filter: blur(12px) saturate(120%);
}

@utility glass-press-sm {
  background-color: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition-property: background-color, border-color, color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;

  &:hover {
    background-color: var(--fill-strong);
    border-color: var(--rule-strong);
    color: var(--ink);
  }
  &:active {
    background-color: rgba(0, 0, 0, 0.25);
  }
}

@utility rule {
  border-top: 1px solid var(--rule);
}

@utility rule-strong {
  border-top: 1px solid var(--rule-strong);
}

@utility rule-soft {
  border-top: 1px solid var(--rule-soft);
}

@utility index-num {
  font-family: var(--font-plexmono), ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Motion — scroll reveals only
   ------------------------------------------------------------------ */

/* Scroll reveal. Hidden until `.is-in` lands, and every block on the editorial
   page is wrapped, so the page fills in from top to bottom: the first screenful
   cascades in document order on load, everything else reveals as it scrolls in.
   A failed JS bundle leaves the page visible via the <noscript> rule in layout. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.animate-blink {
  animation: blink 1.05s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="web"] {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .animate-blink {
    animation: none !important;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------
   Helpers
   ------------------------------------------------------------------ */

html[data-theme="web"] .link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(254, 128, 25, 0.4);
  transition: text-decoration-color 150ms ease-out;
}
html[data-theme="web"] .link:hover {
  text-decoration-color: var(--accent);
}

html[data-theme="web"] .hide-scrollbar {
  scrollbar-width: none;
}
html[data-theme="web"] .hide-scrollbar::-webkit-scrollbar {
  display: none;
}