/* ============================================================
   Shyam BV — Paper Terminal
   Design tokens + base styles
   ============================================================ */

@font-face { font-family: "fallback"; src: local("Georgia"); }

:root {
  /* tunable via Tweaks — defaults below, overridden inline by JS */
  --accent: #c75b39;            /* coral / terracotta */
  --accent-soft: #c75b3922;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* light "paper" */
  --bg:        #f4efe6;
  --bg-2:      #efe8db;
  --surface:   #faf6ee;
  --ink:       #2b2722;
  --ink-2:     #6b6358;
  --ink-3:     #9b9384;
  --line:      #ddd4c4;
  --line-2:    #e7dfd1;
  --shadow:    0 1px 0 #fff8 inset, 0 12px 32px -18px #4a3f2e44;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:        #1b1815;
  --bg-2:      #211d19;
  --surface:   #242019;
  --ink:       #ece4d6;
  --ink-2:     #a59c8c;
  --ink-3:     #6f6657;
  --line:      #332e27;
  --line-2:    #2b2620;
  --shadow:    0 1px 0 #ffffff0a inset, 0 18px 44px -22px #00000088;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }

/* faint scanline / paper grid texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 100% 28px;
  opacity: .35;
  pointer-events: none;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
  z-index: 0;
}

body.no-tex::before { opacity: 0 !important; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ---------- shared bits ---------- */
.mono-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prompt { color: var(--accent); }
.dim { color: var(--ink-2); }
.faint { color: var(--ink-3); }

.cursor {
  display: inline-block;
  width: 0.6em; height: 1.05em;
  background: var(--accent);
  vertical-align: -0.18em;
  margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* section header marker:  $ section_name */
.sec-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 34px;
  padding-top: 14px;
}
.sec-head .hash { color: var(--accent); font-weight: 700; }
.sec-head h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex: none;
  white-space: nowrap;
}
.sec-head .rule { flex: 1; height: 1px; background: var(--line); align-self: center; }
.sec-head .idx { font-size: 12px; color: var(--ink-3); }

section { padding: 64px 0; scroll-margin-top: 76px; }

/* reveal on scroll — transform-only (never hides content, capture-safe) */
.reveal { opacity: 1; }
.reveal.in { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding: 0 18px; }
  section { padding: 48px 0; }
}