/*
 * Ore & Sable surface standard.
 * Each surface owns two text roles. Nested surfaces reset both roles.
 * Keep this stylesheet on every marketing page and the portal layout.
 * Layered !important color declarations intentionally supersede the legacy
 * page-specific overrides, including their !important declarations. Layout,
 * typography sizes, animation timing and semantic chart marks stay untouched.
 */
:root {
  --os-black: #101410;
  --os-white: #ffffff;
  --os-gold: #d8bd76;
  --os-grey: #e2e4e5;
  --os-deep-gold: #67501c;
  --os-charcoal: #252c27;
  --os-deep-grey: #3b4541;
}

@layer os-contrast {
  /* Black: white body text, gold emphasis. */
  :where([data-surface="black"], .hero-experience, .experience-core,
    .experience-destinations > div, .engine-panel, .forex-stats,
    .mx-opportunity, .mx-opportunity-tile, .mx9-card, .mx9-context,
    .copy-motion, .copy-node, .guide-callout, .pricing-table thead,
    .brand-editorial figcaption, .legacy-hero figcaption,
    button, .button, .header-cta, .primary,
    .portal-nav button[aria-current="page"]) {
    --os-surface: var(--os-black);
    --os-text: var(--os-white);
    --os-accent: var(--os-gold);
    color-scheme: dark;
  }

  /* White: black body text, deep gold emphasis. */
  :where([data-surface="white"], .steward-dashboard-preview,
    .steward-preview, .broker-card, .membership-card, .fee-cards article,
    .resource-grid > a, .compound-controls, .compound-chart,
    .outcome-card, .outcome-notice, .portal-header, .portal-nav,
    .panel, .status-grid article, input, select, textarea,
    .market-status button, .portal-nav button, .logo-motion-toggle, .skip) {
    --os-surface: var(--os-white);
    --os-text: var(--os-black);
    --os-accent: var(--os-deep-gold);
    color-scheme: light;
  }

  /* Gold: black body text, charcoal emphasis; never white on gold. */
  :where([data-surface="gold"], .button.gold, .steward-simulation-label,
    .pricing-status, .fee-commitment, .step-state.action,
    .experience-select button[aria-pressed="true"],
    #mx-replay-example button[aria-pressed="true"]) {
    --os-surface: var(--os-gold);
    --os-text: var(--os-black);
    --os-accent: var(--os-charcoal);
    color-scheme: light;
  }

  /* Grey: black body text, deep grey emphasis. */
  :where([data-surface="grey"], .steward-metrics > div,
    .report-grid > div, .report-empty, .preview-badge, .steward-readonly,
    .brand-story, .forex-explanation, .enrollment-status,
    .participation-summary, .validation-status, .broker-category,
    .scenario-preset, .notice, .pill, .step-state, .success, .error,
    input[readonly], .onboarding-steps > li[data-step-state="action"]) {
    --os-surface: var(--os-grey);
    --os-text: var(--os-black);
    --os-accent: var(--os-deep-grey);
    color-scheme: light;
  }

  /* Only explicit surface roots paint backgrounds. Text inherits locally. */
  :where([data-surface], .hero-experience, .experience-core,
    .experience-destinations > div, .engine-panel, .forex-stats,
    .mx-opportunity, .mx-opportunity-tile, .mx9-card, .mx9-context,
    .copy-motion, .copy-node, .guide-callout, .pricing-table thead,
    .brand-editorial figcaption, .legacy-hero figcaption,
    .steward-dashboard-preview, .steward-preview, .broker-card,
    .membership-card, .fee-cards article, .resource-grid > a,
    .compound-controls, .compound-chart, .outcome-card, .outcome-notice,
    .steward-metrics > div, .report-grid > div, .report-empty,
    .preview-badge, .steward-readonly, .brand-story, .forex-explanation,
    .enrollment-status, .participation-summary, .validation-status,
    .broker-category, .scenario-preset, .steward-simulation-label,
    .pricing-status, .fee-commitment, .portal-header, .portal-nav,
    .panel, .status-grid article, .notice, .pill, .step-state,
    .success, .error, .onboarding-steps > li[data-step-state="action"],
    button, .button, .header-cta, .primary, input, select, textarea, .skip) {
    background: var(--os-surface) !important;
  }

  :where(body, body *) {
    color: var(--os-text) !important;
  }
  :where(.eyebrow, em, .wordmark span, .journey-number, .journey-owner,
    .tab-num, .caption-number, .layer-label, .mx-kicker, .mx9-category,
    .pair-composition-label, .experience-north, .experience-topline,
    .experience-core > span, .experience-destinations span,
    .broker-index, .step-number, .compound-chart-label,
    .footer-motto, .section-footnote, .pricing-note, .quiet, .role-note) {
    color: var(--os-accent) !important;
  }
  :where(.eyebrow, em) * { color: inherit !important; }

  /* Legacy token users receive the same local foregrounds. */
  [data-surface] {
    --bg: var(--os-surface);
    --text: var(--os-text);
    --muted: var(--os-text);
    --gold: var(--os-accent);
    --gold-soft: var(--os-accent);
    --ink: var(--os-black);
    --paper: var(--os-white);
    --line: color-mix(in srgb, var(--os-text) 30%, var(--os-surface));
  }

  /* Menus keep their parent header's palette, including the mobile drawer. */
  .site-header nav { background: var(--os-surface) !important; }
  .menu-toggle { --os-surface: var(--os-black); --os-text: var(--os-white); }
  .menu-toggle span { background: var(--os-text) !important; }
  .site-header nav a[aria-current="page"]:after,
  .orbit-outer:after { background: var(--os-accent) !important; }

  /* Distinguish links and states without depending only on their colors. */
  :where(p, li, dd, .market-sources, .evidence-footer) a,
  .text-link, .source-link, .subtle-link, .steward-portal-link {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  :where(a, button):hover { text-decoration-thickness: 2px; }
  :where(button, .button, .header-cta, .primary, input, textarea, select) {
    border-color: var(--os-accent) !important;
  }
  :where(button, .button, .header-cta, .primary):hover {
    box-shadow: inset 0 0 0 2px var(--os-accent);
  }
  .button.outline, .membership-card .button { border-width: 2px; }
  .steward-report-tabs button,
  .experience-select button,
  .portal-nav button { border: 1px solid var(--os-accent); }
  .steward-report-tabs button[aria-selected="true"] {
    --os-surface: var(--os-gold);
    --os-text: var(--os-black);
    --os-accent: var(--os-charcoal);
    box-shadow: inset 0 -4px var(--os-black);
  }
  .portal-nav button[aria-current="page"] {
    --os-surface: var(--os-black);
    --os-text: var(--os-white);
    --os-accent: var(--os-gold);
  }
  [data-surface="gold"] .button.gold {
    --os-surface: var(--os-black);
    --os-text: var(--os-white);
    --os-accent: var(--os-gold);
  }
  .gold :where(span, em, strong), button :where(span, em, strong) {
    color: var(--os-text) !important;
  }
  .text-link:not(.button), .compound-reset, .text-button {
    --os-surface: inherit;
    --os-text: inherit;
    --os-accent: inherit;
    background: transparent !important;
  }
  button:disabled, .engine-tab, .broker-filters span {
    opacity: 1 !important;
  }
  button:disabled { border-style: dashed; cursor: not-allowed; }
  input::placeholder, textarea::placeholder {
    color: var(--os-accent) !important;
    opacity: 1;
  }
  input { accent-color: var(--os-deep-gold); }
  :focus-visible {
    outline: 3px solid var(--os-black) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 7px var(--os-white) !important;
  }
  ::selection { background: var(--os-black); color: var(--os-white); }

  /* Text over photography gets an opaque backing. Photos remain unchanged. */
  .legacy-hero figcaption { padding: 18px 22px; border-radius: 6px; }
  .legacy-hero:after, .hero:after { background: none !important; }

  /* Graph labels use the two text roles; candle and status marks stay semantic. */
  svg text { fill: var(--os-text) !important; }
  .compound-chart [data-path="target"] { stroke: var(--os-accent); }
  .compound-chart svg > path:first-child { stroke: var(--os-text); }
  .steward-demo-chart > path:first-child { stroke: var(--os-text); }
  .chart-labels text { fill: var(--os-accent) !important; }
  .experience-links path { stroke: var(--os-white); }
  .experience-links .experience-signal { stroke: var(--os-gold); }
  .onboarding-progress { background: var(--os-grey) !important; }
  .onboarding-progress > span { background: var(--os-deep-gold) !important; }
  .market-status-square { border-color: var(--os-black) !important; }

  /* Retain system high-contrast mode rather than imposing brand colors. */
  @media (forced-colors: active) {
    :where(body, body *) {
      --os-surface: Canvas;
      --os-text: CanvasText;
      --os-accent: CanvasText;
      forced-color-adjust: auto;
    }
    :where(a, button, input, select, textarea) { forced-color-adjust: auto; }
  }
}