/* ──────────────────────────────────────────────────────────
   Swift Grid — Theme: Back (a.k.a. "Terminal" / V2)
   Green-forward, developer-console vibe. Grid background,
   scanline, blinking cursor, mono-lowercase labels. Scoped
   under [data-theme="back"] so it cannot leak.
   ────────────────────────────────────────────────────────── */

/* ─── Typography: full terminal mode ───────────────────────
   Body + headings + paragraphs + list items all run in
   JetBrains Mono so the page reads like a developer console.
   Mono fonts are wider than Inter so we dial body size a hair
   and tighten heading tracking to keep rhythm intact.
   We only ship 400/500/600 weights self-hosted, so we cap
   heading weight at 600 to avoid synthetic-bold rendering. */

[data-theme="back"] body {
  font-family: var(--sg-font-mono);
  font-size: 15px;           /* Inter-equivalent optical size for JB Mono */
  line-height: 1.6;
  letter-spacing: -0.005em;
}

[data-theme="back"] h1,
[data-theme="back"] h2,
[data-theme="back"] h3,
[data-theme="back"] h4 {
  font-family: var(--sg-font-mono);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

/* Huge headlines (hero) — tighten even more so JB Mono doesn't push wide */
[data-theme="back"] h1 {
  letter-spacing: -0.045em;
}

[data-theme="back"] p,
[data-theme="back"] li,
[data-theme="back"] blockquote,
[data-theme="back"] dt,
[data-theme="back"] dd,
[data-theme="back"] summary,
[data-theme="back"] label {
  font-family: var(--sg-font-mono);
  letter-spacing: -0.005em;
}

/* Preserve Inter for small UI chrome where mono-at-12px gets noisy:
   eyebrow chips, tiny meta text, footer legal line, etc. Components
   that want sans opt in with .sg-sans. */
[data-theme="back"] .sg-sans,
[data-theme="back"] .font-sans {
  font-family: var(--sg-font-sans) !important;
}

/* Buttons stay mono but slightly tighter so "$ command" reads crisply */
[data-theme="back"] button,
[data-theme="back"] .btn,
[data-theme="back"] a[role="button"] {
  font-feature-settings: "calt" 0;   /* disable ligatures so $/→/# stay literal */
}

/* ─── Grid background ─── */
[data-theme="back"] .grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center center;
}
[data-theme="back"] .grid-fade {
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 50%, transparent 100%);
}

/* ─── Scanline ─── */
[data-theme="back"] .scanline { position: relative; overflow: hidden; }
[data-theme="back"] .scanline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(33, 194, 119, 0.6), transparent);
  animation: sg-back-scan 8s linear infinite;
  pointer-events: none;
}
@keyframes sg-back-scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

/* ─── Blinking cursor ─── */
[data-theme="back"] .cursor::after {
  content: '▍';
  color: var(--sg-green);
  margin-left: 4px;
  animation: sg-back-blink 1s step-end infinite;
}
@keyframes sg-back-blink {
  50% { opacity: 0; }
}

/* ─── Mono prefix utility (the "// comment" look) ─── */
[data-theme="back"] .mono-label {
  font-family: var(--sg-font-mono);
  font-size: 0.75rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--sg-green);
}

/* ─── Big numeric gradient (for section numerals) ─── */
[data-theme="back"] .num-gradient {
  background: linear-gradient(180deg, rgba(33, 194, 119, 0.9), rgba(33, 194, 119, 0.1));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-family: var(--sg-font-mono);
  font-weight: 600;
}

/* ─── Reduced motion guards (theme-scoped) ─── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="back"] .scanline::after,
  [data-theme="back"] .cursor::after { animation: none !important; }
}