/* ============================================================
   Theme recolor base — full design-token mapping.
   Each theme file defines a coordinated --t-* palette;
   this file maps those tokens onto every surface of the page.
   No layout or typography is touched here — color only.

   Two surface families:
   - --t-*        : page canvas & section backgrounds
   - --t-paper-*  : "physical paper" elements (cards, panels,
                    spec sheets). Defaults to the surface family;
                    a dark theme may keep them light (paper
                    specimens floating in the night).
   ============================================================ */

/* Bridge the original variables into the themed token set */
:root {
  --ink: var(--t-ink);
  --ink-2: var(--t-ink);
  --slate: var(--t-ink-soft);
  --slate-dark: var(--t-ink-soft);
  --blue: var(--t-accent);
  --blue-dark: var(--t-accent-dark);
  --blue-soft: var(--t-accent-soft);
  --blue-pale: var(--t-surface-alt);
  --mint: var(--t-success);
  --mint-soft: var(--t-surface-alt);
  --warm-white: var(--t-canvas);
  --border: var(--t-border);
  --border-dark: var(--t-deep-border);

  --t-paper: var(--t-surface);
  --t-paper-alt: var(--t-surface-alt);
  --t-paper-ink: var(--t-ink);
  --t-paper-soft: var(--t-ink-soft);
  --t-paper-mute: var(--t-ink-mute);
  --t-paper-border: var(--t-border);
}

body { color: var(--t-ink); background: var(--t-canvas); }

/* ---------- Surfaces & section rhythm ---------- */
.site-header, .site-header.scrolled { background: var(--t-canvas); border-bottom-color: var(--t-border); }
.hero.section { background: var(--t-canvas); }
.proof-band { background: var(--t-canvas); border-color: var(--t-border); }
.specs-section, .products-section { background: var(--t-canvas); }
.solutions-section { background: var(--t-surface-alt); border-color: var(--t-border); }
.faq-section { background: var(--t-surface-alt); border-top-color: var(--t-border); }
.demo-section { background: var(--t-surface-alt); border-color: var(--t-border); }
.privacy-section { background: var(--t-surface-alt); color: var(--t-ink); border-block-color: var(--t-border); }
.mobile-nav { background: var(--t-canvas); }
.mobile-nav > a:not(.button) { color: var(--t-ink); border-bottom-color: var(--t-border); }

/* ---------- Text tones ---------- */
.hero h1 { color: var(--t-ink); }
.hero h1 > span { color: var(--t-ink-mute); }
.hero-lead, .hero-proof { color: var(--t-ink-soft); }
.bento-card h3, .solution-grid h3, .product-card h3 { color: var(--t-ink); }
.bento-card p, .solution-grid p, .product-card p { color: var(--t-ink-soft); }
.proof-grid strong { color: var(--t-ink); }
.proof-grid span { color: var(--t-ink-soft); }
.eyebrow { color: var(--t-accent); }
.eyebrow.light { color: var(--t-deep-soft); }
.feature-index, .solution-number { color: var(--t-ink-mute); }
.text-link, .card-label span, .faq-list details p a { color: var(--t-accent); }
.faq-list details p { color: var(--t-ink-soft); }
.faq-list summary { color: var(--t-ink); }
.faq-list, .faq-list details { border-color: var(--t-border-strong); }
.faq-list summary span::before, .faq-list summary span::after { border-top-color: var(--t-ink); }
.brand, .desktop-nav .docs-link { color: var(--t-ink); }
.desktop-nav a, .sign-in { color: var(--t-ink-soft); }
.desktop-nav a:hover, .sign-in:hover { color: var(--t-accent); }
.menu-toggle span { border-top-color: var(--t-ink); }

/* ---------- Buttons ---------- */
.button-primary { color: var(--t-on-accent); background: var(--t-accent); }
.button-primary:hover { background: var(--t-accent-dark); }
.button-secondary { color: var(--t-ink); background: transparent; border-color: var(--t-border-strong); }
.button-secondary:hover { border-color: var(--t-ink-mute); }
.hero-product .button-secondary, .demo-shell .button-secondary,
.spec-definition-card .button-secondary { color: var(--t-paper-ink); border-color: var(--t-paper-border); }
.button-white { color: var(--t-ink); background: var(--t-surface); }
.button-white:hover { background: var(--t-surface-alt); }
.skip-link { color: var(--t-canvas); background: var(--t-ink); }

/* ---------- Grids & borders ---------- */
.bento-grid, .product-grid, .country-tags { border-color: var(--t-border); }
.bento-card { border-color: var(--t-border); background: transparent; }
.bento-large, .visual-output { background: transparent; }
.product-card { color: var(--t-ink); border-color: var(--t-border); background: transparent; }
.product-card:hover { background: var(--t-surface); border-color: var(--t-border); }
.solution-grid { border-color: var(--t-border); }
.solution-grid article { border-color: var(--t-border); }
.country-tags span { color: var(--t-ink-soft); border-color: var(--t-border); background: transparent; }
.proof-grid > div { border-left-color: var(--t-border); }

/* ---------- Icons & accents ---------- */
.feature-icon { color: var(--t-accent); background: var(--t-accent-soft); border-color: var(--t-border); }
.product-icon { color: var(--t-accent); background: transparent; }
.solution-icon, .solution-icon.blue, .solution-icon.mint,
.solution-icon.amber, .solution-icon.violet { color: var(--t-accent); background: transparent; }
.product-card > span { color: var(--t-accent); }
.flow-arrow svg { stroke: var(--t-accent); }
.flow-arrow > span { border-top-color: var(--t-border-strong); }
.face-frame span { border-color: var(--t-accent); }
.guide { border-top-color: var(--t-ink-mute); }
.guide::before, .guide::after { background: var(--t-accent); }
.measurement { color: var(--t-accent); border-color: var(--t-paper-border); background: var(--t-paper); }
.specs-copy .specs-note { color: var(--t-ink-soft); border-left-color: var(--t-accent); }

/* ---------- Hero product card (paper specimen) ---------- */
.hero-product { background: var(--t-paper); border-color: var(--t-paper-border); }
.hero-product-top { color: var(--t-paper-soft); border-bottom-color: var(--t-paper-border); background: transparent; }
.window-dots span, .window-dots span:first-child,
.window-dots span:nth-child(2), .window-dots span:last-child { background: var(--t-paper-border); }
.hero-photo-card { border-color: var(--t-paper-border); background: var(--t-paper); }
.card-label { color: var(--t-paper-soft); border-bottom-color: var(--t-paper-border); background: var(--t-paper); }
.source-photo-wrap { background: var(--t-paper-alt); }
.source-card::after { color: var(--t-paper-soft); border-top-color: var(--t-paper-border); }
.result-size { color: var(--t-paper-soft); border-top-color: var(--t-paper-border); }
.hero-checks div { color: var(--t-paper-soft); border-color: var(--t-paper-border); background: transparent; }
.crop-visual { background: var(--t-paper); border-color: var(--t-paper-border); }
.crop-caption { color: var(--t-paper-soft); background: var(--t-paper); border-top-color: var(--t-paper-border); }
.background-compare figure { background: var(--t-paper-alt); border-color: var(--t-paper-border); }
.background-compare figcaption { color: var(--t-paper-soft); background: var(--t-paper); border-bottom-color: var(--t-paper-border); }
.mini-check-list li, .output-options span { color: var(--t-ink-soft); border-color: var(--t-border); background: transparent; }
.custom-spec-callout { border-bottom-color: var(--t-border); background: transparent; }
.custom-spec-callout p { color: var(--t-ink-soft); }
.custom-spec-callout strong { color: var(--t-ink); }

/* ---------- Demo section (paper instrument) ---------- */
.demo-shell { background: var(--t-paper); border-color: var(--t-paper-border); }
.demo-toolbar { background: var(--t-paper); border-bottom-color: var(--t-paper-border); }
.demo-step { color: var(--t-paper-soft); }
.demo-step b { color: var(--t-on-accent); background: var(--t-accent); }
.toolbar-separator { background: var(--t-paper-border); }
.sample-button { background: var(--t-paper); border-color: var(--t-paper-border); }
.sample-button:hover, .sample-button.active { border-color: var(--t-accent); outline-color: var(--t-accent); }
.document-tab { color: var(--t-paper-soft); background: var(--t-paper); border-color: var(--t-paper-border); }
.document-tab:hover, .document-tab.active { color: var(--t-paper); border-color: var(--t-paper-ink); background: var(--t-paper-ink); }
.demo-content { background: var(--t-paper-alt); }
.demo-image-panel { background: var(--t-paper); border-color: var(--t-paper-border); }
.panel-heading { border-bottom-color: var(--t-paper-border); }
.panel-heading span { color: var(--t-paper-ink); }
.panel-heading small { color: var(--t-paper-soft); }
.demo-image-wrap { background: var(--t-paper); background-image: none; }
.demo-processing > span { border-color: var(--t-paper-border); }
.demo-processing i { background: var(--t-paper-mute); }
.demo-processing svg { stroke: var(--t-accent); }
.result-wrap { background: var(--t-paper); border-color: var(--t-paper-border); }
.demo-loader span { border-color: var(--t-paper-border); border-top-color: var(--t-accent); }
.spec-card dt { color: var(--t-paper-soft); }
.spec-card dd { color: var(--t-paper-ink); }
.spec-card dl > div { border-bottom-color: var(--t-paper-border); }
.spec-card-head { border-bottom-color: var(--t-paper-border); color: var(--t-paper-ink); }
.spec-card-head i { background: var(--t-success); }
.spec-checks span { color: var(--t-paper-soft); }
.spec-checks i { color: var(--t-paper-ink); background: var(--t-paper-alt); }
.color-dot { border-color: var(--t-paper-border); background: var(--t-paper); }
.demo-cta { background: var(--t-paper); border-top-color: var(--t-paper-border); }
.demo-cta p { color: var(--t-paper-ink); }
.demo-cta p span { color: var(--t-paper-soft); }

/* ---------- Semantic: compliance-pass / live ---------- */
.live-status { color: var(--t-success); }
.live-status i { background: var(--t-success); box-shadow: none; }
.hero-checks span, .mini-check-list span { color: var(--t-success); }
.definition-status { color: var(--t-paper-soft) !important; }
.definition-status i { background: var(--t-success); }

/* ---------- Dark sections (API bridge / status / footer) ---------- */
.api-bridge { background: var(--t-deep); }
.api-bridge-copy h2 { color: var(--t-deep-text); }
.api-bridge-copy > p { color: var(--t-deep-soft); }
.api-bridge-copy .docs-note { color: var(--t-deep-mute); border-left-color: var(--t-deep-border); }
.api-status { color: var(--t-deep-soft); background: var(--t-deep); }
.api-status b, .api-status > span { color: var(--t-deep-text); }
.code-window { background: var(--t-code-bg); border-color: var(--t-deep-border); }
.code-tabs, .code-tabs small { color: var(--t-deep-mute); border-bottom-color: var(--t-deep-border); }
.code-tabs .active { color: var(--t-deep-text); border-bottom-color: var(--t-deep-soft); }
.code-window pre { color: var(--t-deep-soft); }
.code-purple { color: var(--t-code-1); }
.code-blue { color: var(--t-code-2); }
.code-green { color: var(--t-code-3); }
.code-muted { color: var(--t-deep-mute); }
.code-response { color: var(--t-deep-soft); background: var(--t-code-bg); border-top-color: var(--t-deep-border); }
.code-response span { color: var(--t-deep-text); }
.site-footer { color: var(--t-deep-soft); background: var(--t-deep); border-top-color: var(--t-deep-border); }
.site-footer .brand, .footer-grid nav h2 { color: var(--t-deep-text); }
.footer-brand p, .footer-grid nav a { color: var(--t-deep-soft); }
.footer-grid nav a:hover { color: var(--t-deep-text); }
.footer-bottom { color: var(--t-deep-mute); border-top-color: var(--t-deep-border); }

/* ---------- Spec definition card (paper sheet) ---------- */
.spec-definition-card { background: var(--t-paper-alt); border-color: var(--t-paper-border); }
.definition-head { background: var(--t-paper); border-bottom-color: var(--t-paper-border); }
.definition-head span { color: var(--t-paper-soft); }
.definition-head strong { color: var(--t-paper-ink); }
.passport-preview { background: var(--t-paper-alt); background-image: none; }
.passport-preview img { border-color: var(--t-paper-border); }
.preview-lines span { border-top-color: var(--t-paper-border); }
.definition-list { background: var(--t-paper); }
.definition-list > div { border-bottom-color: var(--t-paper-border); }
.definition-list > div:nth-child(even) { border-left-color: var(--t-paper-border); }
.definition-list span { color: var(--t-paper-soft); }
.definition-list strong { color: var(--t-paper-ink); }
.definition-list i { border-color: var(--t-paper-border); background: var(--t-paper); }
.definition-footer { color: var(--t-paper-soft); background: var(--t-paper); border-top-color: var(--t-paper-border); }

/* ---------- Privacy section (light surface in every theme) ---------- */
.privacy-heading h2, .privacy-grid h3 { color: var(--t-ink); }
.privacy-heading p, .privacy-section .eyebrow { color: var(--t-ink-soft); }
.privacy-section .light-link { color: var(--t-accent); }
.privacy-grid { border-color: var(--t-border); background: transparent; }
.privacy-grid article { border-color: var(--t-border); }
.privacy-grid article > span { color: var(--t-ink-mute); }
.privacy-grid p { color: var(--t-ink-soft); }

/* ---------- Final CTA — blue card floats on rice paper, not on the dark band ---------- */
.final-cta { background: var(--t-canvas); border-top: 1px solid var(--t-border); padding-block: 72px; }
.final-cta-inner { background: var(--t-cta); padding-inline: 72px; }
.final-cta .eyebrow { color: var(--t-cta-soft); }
.final-cta h2 { color: var(--t-cta-text); }
.final-cta p { color: var(--t-cta-soft); }
.final-cta small { color: var(--t-cta-soft); }
.final-cta small a { color: var(--t-cta-text); }
.cta-decoration span { background: var(--t-cta-deco); }

/* ---------- Responsive border overrides ---------- */
@media (max-width: 960px) {
  .solution-grid article, .privacy-grid article,
  .proof-grid > div { border-color: var(--t-border); }
  .final-cta-inner { padding-inline: 44px; }
}
@media (max-width: 680px) {
  .proof-grid > div, .proof-grid > div:nth-child(3), .proof-grid > div:nth-child(4) { border-top-color: var(--t-border); }
  .proof-grid > div:nth-child(even) { border-left-color: var(--t-border); }
  .solution-grid article, .privacy-grid article { border-color: var(--t-border); }
  .final-cta { padding-block: 40px; }
  .final-cta-inner { padding-inline: 24px; }
}