/* ──────────────────────────────────────────────────────────────────────────
 * paper-theme.css — production baseline for the Paper visual system.
 *
 * Loaded after each page's inline <style> block so plain-specificity rules
 * override the site's original sage/forest tokens via cascade. The dev
 * theme tester in dev-banner.js is localhost-only; on production this file
 * is the single source of truth for Paper colors, fonts, grid, and SVGs.
 * ────────────────────────────────────────────────────────────────────── */

/* 1) Tokens — override the :root declared in each HTML's inline <style>.
 *    Same specificity (0,1,0) but later in cascade → wins. */
:root {
  --parchment: #F8F4EC;
  --ink: #2A251C;
  --ink-mid: #4A4336;
  --ink-muted: #7C7566;
  --ink-faint: #B8B0A2;
  --forest: #7A5F3E;
  --forest-mid: #8F7250;
  --forest-light: #A68863;
  --sage: #E8DFCB;
  --sage-light: #F0E9D8;
  --sage-pale: #F8F4EC;
  --sage-mid: #D4CAB3;
  --moss: #B5A27E;
  --moss-light: #CFBDA0;
  --serif: 'Libre Caslon Text', Georgia, serif;
  --sans: 'Lora', Georgia, serif;
  --body: 'Work Sans', system-ui, sans-serif;
}

/* 2) Display fonts (headings / labels) — route hardcoded 'Instrument Serif'
 *    through the --serif token so all display type becomes Libre Caslon.
 *    !important needed because original inline rules often hardcode fonts. */
h1, h2, h3, h4, h5, h6,
.nav-mark, .hero-label, .hero-headline, .page-hero h1,
.section-label, .section-headline, .phase-number, .outcome-number,
.next-study-title, .cta-strip h2, .contact-heading,
.project-title, .project-tag, [class*="title"], [class*="headline"],
.site-headline, .site-title {
  font-family: var(--serif) !important;
}

/* 3) Body copy — Work Sans (--body) for readability across nav, paragraphs,
 *    buttons, form fields, project meta, and "coming soon" pills. Overrides
 *    hardcoded 'DM Sans' and keeps UI chrome consistent. */
body p, body li, body .hero-desc, body .project-excerpt,
body .content-body p, body .content-body li,
body .takeaway p, body .cta-strip p, body .section-sub,
body .artifact-caption, body .contact-alt, body footer p,
body .nav-mark, body .nav-mark span, body .nav-links a, body .nav-dropdown-inner a,
body .btn-primary, body .btn-ghost, body .btn-home, body .btn-external,
body button, body [type="submit"], body #pw-submit,
body .project-tag, body .project-link,
body .hero-meta-label, body .hero-meta-value,
body input, body textarea, body select,
body .wip-badge {
  font-family: var(--body) !important;
}

/* 4) Button chrome — 10px corner radius across all action buttons. */
.btn-primary, .btn-ghost, .btn-home,
button, [type="submit"], #pw-submit {
  border-radius: 10px !important;
}

/* 5) Hero grid aesthetic — thin warm-brown 48px grid on .hero-wrapper and
 *    .page-hero with a bottom mask fade so the transition into the next
 *    section feels soft instead of abrupt. Grid sits on a ::before pseudo
 *    so the mask only affects the grid layer, not the hero's content. */
#hero-canvas { display: none !important; }

body { background-color: var(--parchment); background-image: none; }

.hero-wrapper, .page-hero {
  background-color: transparent !important;
  background-image: none !important;
  position: relative !important;
}

.hero-wrapper::before, .page-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(to right, rgba(122,95,62,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,95,62,0.06) 1px, transparent 1px) !important;
  background-size: 48px 48px, 48px 48px !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%) !important;
}

.hero-wrapper > *, .page-hero > * { position: relative; z-index: 1; }

/* Hide the sage divider line between hero and Selected Work. */
.hero-wrapper + hr { display: none !important; }

/* 6) Background overrides — places where the original HTML uses literal
 *    sage-green hexes or gradients. Re-route through Paper tokens. */
.hero-wrapper {
  background: var(--parchment) !important;
  background-image: linear-gradient(to top left,
    var(--sage-light) 0%, var(--sage-pale) 40%, var(--parchment) 100%) !important;
}
/* But the grid ::before needs transparent wrapper — re-apply the rule above
 * (Rule 5 is later in cascade, so its `background-image: none` wins). */

.project-image { background: var(--sage-light) !important; }
[style*="background: #e4ede0"],
[style*="background:#e4ede0"] { background: var(--sage-light) !important; }
#pw-submit {
  background: var(--forest) !important;
  color: var(--parchment) !important;
  font-family: var(--sans) !important;
}
.item-img[style*="#ffffff"], .item-img[style*="#FFFFFF"] {
  background: var(--sage-pale) !important;
}
.btn-home:hover { background: var(--forest-mid) !important; }

/* 7) SVG hex → token map — re-theme fills and strokes in SVGs that still
 *    carry the original sage/forest hex values as attributes. */
svg [fill="#2D4A2D"], svg [fill="#2d4a2d"] { fill: var(--forest); }
svg [stroke="#2D4A2D"], svg [stroke="#2d4a2d"] { stroke: var(--forest); }
svg [fill="#3D5E3A"], svg [fill="#3d5e3a"] { fill: var(--forest-mid); }
svg [stroke="#3D5E3A"], svg [stroke="#3d5e3a"] { stroke: var(--forest-mid); }
svg [fill="#4E7249"], svg [fill="#4e7249"] { fill: var(--forest-light); }
svg [stroke="#4E7249"], svg [stroke="#4e7249"] { stroke: var(--forest-light); }
svg [fill="#C8D5C0"], svg [fill="#c8d5c0"] { fill: var(--sage); }
svg [stroke="#C8D5C0"], svg [stroke="#c8d5c0"] { stroke: var(--sage); }
svg [fill="#E4EDE0"], svg [fill="#e4ede0"] { fill: var(--sage-light); }
svg [stroke="#E4EDE0"], svg [stroke="#e4ede0"] { stroke: var(--sage-light); }
svg [fill="#F0F4EE"], svg [fill="#f0f4ee"] { fill: var(--sage-pale); }
svg [stroke="#F0F4EE"], svg [stroke="#f0f4ee"] { stroke: var(--sage-pale); }
svg [fill="#A8BBA0"], svg [fill="#a8bba0"] { fill: var(--sage-mid); }
svg [stroke="#A8BBA0"], svg [stroke="#a8bba0"] { stroke: var(--sage-mid); }
svg [fill="#6B8C5F"], svg [fill="#6b8c5f"] { fill: var(--moss); }
svg [stroke="#6B8C5F"], svg [stroke="#6b8c5f"] { stroke: var(--moss); }
svg [fill="#8FAB82"], svg [fill="#8fab82"] { fill: var(--moss-light); }
svg [stroke="#8FAB82"], svg [stroke="#8fab82"] { stroke: var(--moss-light); }
svg [fill="#1A2218"], svg [fill="#1a2218"] { fill: var(--ink); }
svg [stroke="#1A2218"], svg [stroke="#1a2218"] { stroke: var(--ink); }
svg [fill="#364230"], svg [fill="#364230"] { fill: var(--ink-mid); }
svg [stroke="#364230"], svg [stroke="#364230"] { stroke: var(--ink-mid); }
svg [fill="#6B7A63"], svg [fill="#6b7a63"] { fill: var(--ink-muted); }
svg [stroke="#6B7A63"], svg [stroke="#6b7a63"] { stroke: var(--ink-muted); }
svg [fill="#9DAA94"], svg [fill="#9daa94"] { fill: var(--ink-faint); }
svg [stroke="#9DAA94"], svg [stroke="#9daa94"] { stroke: var(--ink-faint); }
svg [fill="#F7F5F0"], svg [fill="#f7f5f0"] { fill: var(--parchment); }
svg [stroke="#F7F5F0"], svg [stroke="#f7f5f0"] { stroke: var(--parchment); }

/* 8) Class-based SVG palette — the project-card SVGs (.syst-svg, .geo-svg,
 *    .price-svg, .cedu-svg, .ramus-svg, .eim-svg) embed their own <style>
 *    block with sage-green hexes. Override with !important and token vars. */
.syst-svg .main, .geo-svg .main, .price-svg .main, .cedu-svg .main,
.ramus-svg .main, .eim-svg .main,
.hero-graphic .syst-svg .main, .hero-graphic .cedu-svg .main,
.hero-graphic .geo-svg .main, .hero-graphic .price-svg .main { fill: var(--sage-mid) !important; }

.syst-svg .sec, .geo-svg .sec, .price-svg .sec, .cedu-svg .sec,
.ramus-svg .sec, .eim-svg .sec,
.hero-graphic .syst-svg .sec, .hero-graphic .cedu-svg .sec,
.hero-graphic .geo-svg .sec, .hero-graphic .price-svg .sec { fill: var(--sage) !important; }

.syst-svg .neu, .geo-svg .neu, .price-svg .neu, .cedu-svg .neu,
.ramus-svg .neu, .eim-svg .neu,
.hero-graphic .syst-svg .neu, .hero-graphic .cedu-svg .neu,
.hero-graphic .geo-svg .neu, .hero-graphic .price-svg .neu { fill: var(--parchment) !important; }

.syst-svg .acc, .geo-svg .acc, .price-svg .acc, .cedu-svg .acc,
.ramus-svg .acc, .eim-svg .acc,
.hero-graphic .syst-svg .acc, .hero-graphic .cedu-svg .acc,
.hero-graphic .geo-svg .acc, .hero-graphic .price-svg .acc { fill: var(--forest-light) !important; }

.syst-svg .str, .geo-svg .str, .price-svg .str, .cedu-svg .str,
.ramus-svg .str, .eim-svg .str,
.hero-graphic .syst-svg .str, .hero-graphic .cedu-svg .str,
.hero-graphic .geo-svg .str, .hero-graphic .price-svg .str { stroke: var(--sage-mid) !important; }

.syst-svg .loop, .geo-svg .loop, .price-svg .loop, .cedu-svg .loop,
.ramus-svg .loop, .eim-svg .loop { stroke: var(--forest-light) !important; }

/* When these SVGs sit directly on the light hero background with no card
 *    behind them, .neu=parchment disappears. Bump to --sage in hero contexts. */
.page-hero .syst-svg .neu, .hero-wrapper .syst-svg .neu,
.page-hero .geo-svg .neu, .hero-wrapper .geo-svg .neu,
.page-hero .price-svg .neu, .hero-wrapper .price-svg .neu,
.page-hero .cedu-svg .neu, .hero-wrapper .cedu-svg .neu,
.page-hero .ramus-svg .neu, .hero-wrapper .ramus-svg .neu,
.page-hero .eim-svg .neu, .hero-wrapper .eim-svg .neu { fill: var(--sage) !important; }

/* In .page-hero and .hero-wrapper (home) the cert has no sage-light card
 * wrapper around it, so .geo-neu (parchment) would merge with the parchment
 * page bg. Bump to --sage so the inner card rect reads. */
.page-hero .geo-svg .geo-neu,
.hero-wrapper .geo-svg .geo-neu { fill: var(--sage) !important; }

/* When .geo-neu is bumped to --sage for the hero contexts, the .geo-sec rects
 * inside it (also --sage) would vanish. Bump them a shade darker so they
 * still read against the sage inner card. */
.page-hero .geo-svg .geo-sec,
.hero-wrapper .geo-svg .geo-sec { fill: var(--sage-mid) !important; }

/* .geo-svg uses prefixed class names. */
.geo-svg .geo-main { fill: var(--sage-mid) !important; }
.geo-svg rect.geo-main[x="9.67"] { fill: var(--forest-light) !important; }
body .geo-svg .geo-acc { fill: #E5BE8C !important; } /* sparkle stays gold */
.geo-svg .geo-sec { fill: var(--sage) !important; }
.geo-svg .geo-neu { fill: var(--parchment) !important; }
.geo-svg .geo-acc { fill: var(--forest-light) !important; }
.geo-svg .geo-str { stroke: var(--sage-mid) !important; }

/* .price-svg bars 1–3 swap from green to warm-brown shades (darkest→lightest). */
.price-svg .price-s1 polygon { fill: var(--forest) !important; }
.price-svg .price-s2 polygon { fill: var(--forest-mid) !important; }
.price-svg .price-s3 polygon { fill: var(--forest-light) !important; }

/* 9) Case-study content images — 10px rounded corners across all image
 *    containers used within locked content sections. */
.showcase-item img, .cross-item img,
.overview-img,
.artifact-grid img, .motion-grid img,
.phase-section img,
.fade-up .content-grid img {
  border-radius: 10px !important;
}

/* 10) Locked-content section headers — route to semi-bold Work Sans so
 *     subsection titles (e.g. "GTM System Mapping") read as UI labels
 *     rather than display type. */
:root[data-theme] h3.showcase-title,
:root[data-theme] h3.cross-item-title,
:root h3.showcase-title,
:root h3.cross-item-title {
  font-family: var(--body) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}