/* Stuart Digital — Fresh Neutral deck brand system.
   Pair with fraunces.css (the @font-face) and marks.html (wordmark + monogram).
   Load fraunces.css first, then this. Style everything through the tokens,
   never hard-code a hex, so both light and dark themes stay correct. */

:root {
  --paper: #f4f2ed; --panel: #ffffff; --ink: #101114; --ink-soft: #4a4b52;
  --ink-faint: #8b877d; --line: #e3ded2; --line-soft: #ece8de;
  --champagne: #c2a878; --champagne-ink: #8a6d34; --champagne-bg: #efe6d3;
  --shadow: 0 1px 2px rgba(16,17,20,.04), 0 10px 34px rgba(16,17,20,.07);
  --serif: 'FrauncesEmb', 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101114; --panel: #1b1c20; --ink: #f4f2ed; --ink-soft: #b8b4a8;
    --ink-faint: #86837b; --line: #2a2b31; --line-soft: #212228;
    --champagne: #c2a878; --champagne-ink: #d8be86; --champagne-bg: #24241d;
    --shadow: 0 1px 2px rgba(0,0,0,.34), 0 12px 38px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"] {
  --paper: #f4f2ed; --panel: #ffffff; --ink: #101114; --ink-soft: #4a4b52;
  --ink-faint: #8b877d; --line: #e3ded2; --line-soft: #ece8de;
  --champagne: #c2a878; --champagne-ink: #8a6d34; --champagne-bg: #efe6d3;
  --shadow: 0 1px 2px rgba(16,17,20,.04), 0 10px 34px rgba(16,17,20,.07);
}
:root[data-theme="dark"] {
  --paper: #101114; --panel: #1b1c20; --ink: #f4f2ed; --ink-soft: #b8b4a8;
  --ink-faint: #86837b; --line: #2a2b31; --line-soft: #212228;
  --champagne: #c2a878; --champagne-ink: #d8be86; --champagne-bg: #24241d;
  --shadow: 0 1px 2px rgba(0,0,0,.34), 0 12px 38px rgba(0,0,0,.4);
}

/* type roles: Fraunces display, Inter body, mono for labels/data */
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
h1, h2, h3.display { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  font-variation-settings: 'opsz' 144, 'wght' 500, 'SOFT' 0, 'WONK' 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--champagne-ink); display: flex; align-items: center; gap: 13px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--champagne); }

/* ---- the marks (see marks.html for the SVG to drop in) ---- */

/* wordmark = Option B (logo #213 winner): serif "Stuart" (Fraunces) + tracked
   champagne "DIGITAL" (Space Grotesk). Needs grotesk.css loaded too. */
.wordmark { height: clamp(30px, 4.8vw, 48px); width: auto; display: block; }
.wordmark .wm-name { font-family: var(--serif); font-weight: 500;
  font-variation-settings: 'opsz' 144, 'wght' 500, 'SOFT' 0, 'WONK' 0;
  font-size: 104px; letter-spacing: -4px; fill: var(--ink); }
.wordmark .wm-desc { font-family: 'GroteskEmb', 'Space Grotesk', var(--sans);
  font-weight: 500; font-size: 42px; letter-spacing: 16px; fill: var(--champagne); }

/* SD monogram: persistent corner mark, champagne circle + Fraunces SD */
.monomark { position: fixed; top: 15px; left: 20px; z-index: 30; width: 32px; height: 32px; opacity: .92; }
.monomark circle { fill: none; stroke: var(--champagne); stroke-width: 2.5; }
.monomark text { font-family: var(--serif); font-weight: 500;
  font-variation-settings: 'opsz' 144, 'wght' 500; font-size: 56px; letter-spacing: -1px; fill: var(--ink); }
@media (max-width: 640px) { .monomark { display: none; } }