/* RelationshipsIQ — Folio III Vellum Ground
   Canonical palette/contrast lock for the marketing site.
   This file is loaded last only to prevent legacy selectors from
   reintroducing off-palette colors or light text on light vellum. */

:root {
  /* Surfaces — Folio III Vellum Ground */
  --page: #EBE8DE !important;
  --surface: #F8F6EE !important;
  --app-surface: #E0DCD1 !important;
  --app-raised: #D7D2C5 !important;

  /* Typography & Hairlines */
  --ink: #12161A !important;
  --muted: #585F66 !important;
  --rule: rgba(18, 22, 26, 0.13) !important;
  --rule-soft: rgba(18, 22, 26, 0.07) !important;

  /* Data Scale & Accents (Ink Density) */
  --hot: #1F364D !important;
  --warm: #3A4550 !important;
  --cool: #707B85 !important;
  --deep: #B2B9C0 !important;
  --ghost: #D5D9DC !important;
  --sage: #7A5B3E !important;
  --clay: #585F66 !important;

  /* Engraved Linework & Astrometric Plate */
  --plate: rgba(31, 54, 77, 0.25) !important;
  --rings: rgba(31, 54, 77, 0.35) !important;
  --spokes: rgba(31, 54, 77, 0.20) !important;
  --constellation: rgba(31, 54, 77, 0.45) !important;
  --dust: rgba(88, 95, 102, 0.30) !important;

  /* Layout & Geometry */
  --measure: 62ch;
  --gutter: clamp(1.5rem, 6vw, 5rem);
  --radius: 3px;

  /* System Fonts */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Compatibility aliases — all resolve only to canonical Folio III tokens. */
  --riq-paper: var(--surface) !important;
  --riq-canvas: var(--page) !important;
  --riq-canvas-2: var(--app-surface) !important;
  --riq-ink: var(--ink) !important;
  --riq-ink-2: var(--warm) !important;
  --riq-muted: var(--muted) !important;
  --riq-muted-2: var(--cool) !important;
  --riq-line: var(--rule) !important;
  --riq-line-strong: rgba(18, 22, 26, 0.20) !important;
  --riq-signal: var(--hot) !important;
  --riq-signal-deep: var(--hot) !important;
  --riq-signal-soft: rgba(31, 54, 77, 0.07) !important;
  --riq-warm: var(--sage) !important;
  --riq-warm-soft: rgba(122, 91, 62, 0.07) !important;
  --riq-success: var(--sage) !important;
  --riq-danger: var(--clay) !important;
  --riq-inverse: var(--app-surface) !important;
  --riq-inverse-2: var(--app-raised) !important;

  --v2-ink: var(--ink) !important;
  --v2-ink-2: var(--hot) !important;
  --v2-blue: var(--hot) !important;
  --v2-cyan: var(--cool) !important;
  --v2-sea: var(--sage) !important;
  --v2-gold: var(--sage) !important;
  --v2-lilac: var(--cool) !important;
  --v2-coral: var(--clay) !important;
  --v2-paper: var(--surface) !important;
  --v2-muted: var(--muted) !important;
  --v2-dark: var(--app-surface) !important;
  --v2-dark-2: var(--app-raised) !important;
  --v2-line: var(--rule) !important;

  --tech-blue: var(--hot) !important;
  --tech-cyan: var(--cool) !important;
  --tech-sea: var(--sage) !important;
  --tech-gold: var(--sage) !important;
  --tech-lilac: var(--cool) !important;
}

/* Base Body & Material Texture Ground */
html,
body {
  background: var(--page) !important;
  color: var(--ink) !important;
}

body {
  font-family: var(--font-ui) !important;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
}

body::before {
  opacity: 0.04 !important;
}

/* Every page uses vellum as its ground. Large legacy 'dark' bands are
   light vellum surfaces, not inverse sections. */
main,
.v2-hero,
.page-hero,
.hero,
.v2-section,
.section,
.v2-section.dark,
.section.dark,
.v2-section.inverse,
.section.inverse,
.home-v2,
.product-v2,
.intelligence-v2,
.usecases-v2,
.integrations-v2,
.resources-v2,
.plans-v2,
.alternatives-v2,
.security-page {
  background: var(--page) !important;
  color: var(--ink) !important;
}

/* Typography Rules */
body,
p,
li,
dd,
dt,
input,
select,
textarea,
button {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.v2-display,
.v2-section-title,
.page-hero h1,
.home-hero h1,
.hero h1,
.v2-cta h2,
.intel-cluster__copy h2,
.resource-guide h3,
.usecase-card h3,
.stage-body h3,
.agent-answer h3,
.evidence-card h3,
.metric-head h3,
.article-body h2,
.article-body h3 {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
}

.display,
.v2-display,
.page-hero h1,
.home-hero h1,
.hero h1 {
  letter-spacing: -0.03em !important;
  line-height: 0.98 !important;
}

p,
li,
dd,
dt,
.lede,
.v2-lede,
.v2-section-copy,
.section-intro,
.section-copy,
.muted,
.v2-section.dark p,
.v2-section.dark li,
.v2-section.dark span,
.section.dark p,
.section.dark li,
.section.dark span {
  color: var(--muted) !important;
}

.data,
.label,
.micro-label,
.v2-kicker,
.v2-eyebrow,
.eyebrow,
.section-label,
.section-kicker,
.hero-kicker,
.card-number,
.timeline-num,
.feature-num,
.intel-label,
.graph-label,
.tier,
.meta,
.asset-symbol,
.stage-index,
.shift-index,
.plan-tier small,
.intel-instrument small,
.atlas-title,
.hero-funnel__label {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

.label,
.v2-kicker,
.v2-eyebrow,
.eyebrow,
.section-label,
.section-kicker,
.hero-kicker,
.card-number,
.timeline-num,
.feature-num,
.intel-label,
.graph-label,
.tier,
.meta,
.plan-tier small,
.intel-instrument small,
.atlas-title,
.hero-funnel__label {
  color: var(--hot) !important;
}

/* Structural Components: plates rather than floating cards. */
.plate,
.v2-glass,
.card,
.metric-panel,
.goal-card,
.access-card,
.matrix-card,
.cta-band,
.proof,
.person,
.product-frame,
.graph-panel,
.intel-panel,
.show-panel,
.workflow,
.integration-panel,
.integration-item,
.faq-list,
.pricing-card,
.resource-card,
.comparison-card,
.feature-panel,
.timeline-content,
.feature-matrix,
.content-card,
.quote-card,
.privacy-card,
.article-card,
.plan,
.answer-box,
.form-shell,
.selector,
.selector-result,
.comparison-wrap,
.table-wrap,
.security-callout,
.notice,
.graph-float,
.queue,
.stat,
.goal-lens-card,
.today-brief,
.weather-board,
.change-timeline,
.portfolio-card,
.runway-summary,
.asset-card,
.reciprocity-panel,
.room-panel,
.agent-answer,
.evidence-card,
.intel-instrument,
.usecase-card,
.usecase-mini,
.merge-card,
.atlas-link,
.resource-guide,
.resource-side a,
.plan,
.plan-tier,
.plan-note,
.shift-old,
.shift-new,
.chain-step,
.integration-side,
.source-chip,
.activation-item,
.v2-cta,
.os-map a,
.agent-question,
.give-row,
.room-slot {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.plate-inset,
.v2-inverse,
.runway-bars,
.demo-dark-section {
  background: var(--app-surface) !important;
  color: var(--ink) !important;
  border-color: var(--rule-soft) !important;
}

/* Critical contrast correction: legacy inverse classes are NOT dark in
   Folio III. Their text therefore remains ink/graphite. */
.v2-inverse h1,
.v2-inverse h2,
.v2-inverse h3,
.v2-inverse h4,
.v2-inverse h5,
.v2-inverse h6,
.v2-inverse strong,
.v2-inverse b,
.v2-inverse em,
.v2-inverse .v2-section-title,
.v2-inverse .v2-section-copy,
.v2-inverse .v2-eyebrow,
.v2-inverse .v2-kicker,
.runway-bars h1,
.runway-bars h2,
.runway-bars h3,
.runway-bars strong,
.runway-bars b {
  color: var(--ink) !important;
}

.v2-inverse p,
.v2-inverse li,
.v2-inverse span,
.v2-inverse small,
.runway-bars p,
.runway-bars li,
.runway-bars span,
.runway-bars small {
  color: var(--muted) !important;
}

.v2-inverse .v2-eyebrow,
.v2-inverse .v2-kicker,
.v2-inverse .label {
  color: var(--hot) !important;
}

/* True ink panels may use archival paper text. These are explicitly
   opt-in; light text is never inferred from a beige/inset class name. */
[data-surface="ink"],
.ink-panel,
.demo-command,
.demo-conversion {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border-color: var(--ink) !important;
}

[data-surface="ink"] h1,
[data-surface="ink"] h2,
[data-surface="ink"] h3,
[data-surface="ink"] strong,
[data-surface="ink"] b,
.ink-panel h1,
.ink-panel h2,
.ink-panel h3,
.ink-panel strong,
.ink-panel b,
.demo-command h1,
.demo-command h2,
.demo-command h3,
.demo-command strong,
.demo-command b,
.demo-conversion h1,
.demo-conversion h2,
.demo-conversion h3,
.demo-conversion strong,
.demo-conversion b {
  color: var(--surface) !important;
}

[data-surface="ink"] p,
[data-surface="ink"] li,
[data-surface="ink"] span,
[data-surface="ink"] small,
.ink-panel p,
.ink-panel li,
.ink-panel span,
.ink-panel small,
.demo-command p,
.demo-command li,
.demo-command span,
.demo-command small,
.demo-conversion p,
.demo-conversion li,
.demo-conversion span,
.demo-conversion small {
  color: var(--deep) !important;
}

[data-surface="ink"] .label,
[data-surface="ink"] .v2-eyebrow,
[data-surface="ink"] .v2-kicker,
.ink-panel .label,
.ink-panel .v2-eyebrow,
.ink-panel .v2-kicker,
.demo-command .demo-signal-label,
.demo-conversion .demo-section-kicker {
  color: var(--ghost) !important;
}

/* Header / footer stay on vellum. */
.site-header,
.home-header,
.hdr,
.footer {
  background: var(--page) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}

.footer p,
.footer a,
.footer span {
  color: var(--muted) !important;
}

.footer h4,
.footer .brand span,
.footer .footer-tagline {
  color: var(--ink) !important;
}

.footer .brand b {
  color: var(--hot) !important;
}

/* Outlined Buttons: no pills; ink fill on hover. */
button,
.btn,
.btn-action,
.home-cta,
.hero-primary,
.hero-secondary {
  font-family: var(--font-data) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

button:hover,
.btn:hover,
.btn-action:hover,
.home-cta:hover,
.hero-primary:hover,
.hero-secondary:hover {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border-color: var(--ink) !important;
}

/* Controls */
input,
select,
textarea {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--cool) !important;
}

label {
  color: var(--muted) !important;
}

/* Canonical magnitude classes */
.mag-1 { color: var(--hot) !important; }
.mag-2 { color: var(--warm) !important; }
.mag-3 { color: var(--cool) !important; }
.mag-4 { color: var(--deep) !important; }
.mag-ghost { color: var(--ghost) !important; }
.mag-verified { color: var(--sage) !important; }

/* Selection / focus */
::selection {
  background: var(--app-raised) !important;
  color: var(--ink) !important;
}

:focus-visible {
  outline-color: var(--hot) !important;
}