/* ============================================================
   Prose Minion Website — design tokens + base styles
   Tokens ported verbatim from design/mock/pm-embed.css (the Prose
   Minion / Frame Minion design language). Section/component styles
   live in sections.css — see CLAUDE.md for the file-map rationale.
   ============================================================ */

:root {
  /* Warm dark browns (FM language) */
  --bg:          #15110d;
  --bg-grad-top: #211910;
  --header:      #2a2017;
  --surface:     #221a13;
  --surface-2:   #2b2017;
  --surface-3:   #36281b;
  --inset:       #1b150f;
  --border:      #3a2c1f;
  --border-2:    #4d3a28;
  --border-soft: #2e231a;

  --text:        #f3ece1;
  --text-2:      #c9bbab;
  --muted:       #a4937f;
  --dim:         #7a6c5b;
  --faint:       #5c5044;

  /* Accent — coral/orange (PM skull + FM brand) */
  --accent:      #e0673a;
  --accent-hi:   #ee7d49;
  --accent-lo:   #c8552c;
  --accent-soft: rgba(224,103,58,0.14);
  --accent-line: linear-gradient(90deg, #e8763f 0%, #d2592f 48%, rgba(210,89,47,0) 100%);

  --blue:   #5aa2f0;
  --green:  #6fc98a;
  --pink:   #e0589e;
  --amber:  #e2b24a;

  --r-card: 12px;
  --r-tile: 9px;
  --r-input: 8px;
  --r-pill: 999px;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(224,103,58,0.32); }

@keyframes pmmarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pmrise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Decorative glow/fade used behind device mockups and feature art */
.pm-glow { position: relative; }
.pm-glow::before {
  content: ''; position: absolute; inset: -10% -6%;
  background: radial-gradient(58% 52% at 50% 42%, rgba(224,103,58,0.30), transparent 70%);
  filter: blur(46px); z-index: -1; pointer-events: none;
}
.pm-fade { position: relative; }
.pm-fade::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none;
}

a.pmlink { color: var(--text-2); text-decoration: none; transition: color .15s ease; }
a.pmlink:hover { color: var(--text); }
/* Mono variant — font-family lifted from inline styles so its single quote
   can't be mangled by Netlify's HTML post-processing on rewritten .html links. */
a.pmlink-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }

/* Branded-webfont utility classes — extracted from inline font-family styles so the
   single quotes can't be mangled by Netlify's Pretty-URLs re-serialization (see the
   CLAUDE.md deploy gotcha). NOTE: intentionally distinct from the --mono/--sans
   system-font tokens above, which are a different stack used by the VS Code mock. */
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }
.font-sans    { font-family: 'IBM Plex Sans', sans-serif; }

.pm-marq:hover { animation-play-state: paused; }