/* MRVËY 2026 visual system
   Fashion-led type, restrained chroma, no decorative mono voice. */
:root {
  --brand-ink: #10120f;
  --brand-matte: #10120f;
  --brand-paper: #f4f5f0;
  --brand-paper-bright: #fbfcf8;
  --brand-soft: #dfe2da;
  --brand-green: #9be879;
  --brand-green-soft: #c9f6ba;
  --brand-green-deep: #5a9e45;
  --brand-acid: #c5ff32;
  --brand-fuchsia: #ff3d9a;
  --brand-cobalt: #5865ff;
  --brand-display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --brand-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --brand-ease: cubic-bezier(.22, 1, .36, 1);

  /* Bridge the legacy surface tokens into the business-card palette. */
  --bg: var(--brand-matte);
  --surface: #171916;
  --surface-dark: #0c0e0c;
  --accent: var(--brand-green);
  --accent-light: var(--brand-green-soft);
  --accent-deep: #28340d;
  --accent-deep-hover: #354713;
  --on-accent: var(--brand-matte);
  --gold: var(--brand-green);
  --select-bg: rgba(155, 232, 121, .30);
  --nav-bg: rgba(16, 18, 15, .9);

  /* Keep legacy and chapter components on the same voice. */
  --font-display: var(--brand-display);
  --font-body: var(--brand-body);
  --font-label: var(--brand-body);
  --story-display: var(--brand-display);
  --story-body: var(--brand-body);
  --story-mono: var(--brand-body);
  --exp-display: var(--brand-display);
  --exp-body: var(--brand-body);
}

html {
  font-family: var(--brand-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--brand-body);
  font-synthesis: none;
}

h1,
h2,
h3,
h4,
.section-title,
.legal-title,
.footer-brand {
  font-family: var(--brand-display);
  font-synthesis: none;
}

a,
button {
  touch-action: manipulation;
}

::selection {
  color: inherit;
  background: var(--select-bg);
  text-shadow: none;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--brand-ink);
}

/* Remove the old terminal-like utility voice without flattening hierarchy. */
.nav-wordmark,
.nav-links a,
.nav-cta,
.nav-lang,
.footer-nav a,
.footer-tagline,
.footer-copy,
.btn-primary,
.btn-secondary,
.story-page button,
.story-page a,
.legal-key,
.legal-stamp,
.product-spec,
.product-availability-note,
.production-window__foot,
.logo-preview__control-label,
.logo-preview__stage-meta,
.logo-preview__measure,
.logo-preview__brief span,
.cust-technique-caption {
  font-family: var(--brand-body);
  font-variant-numeric: proportional-nums;
  letter-spacing: .015em;
}

.nav-links a,
.nav-cta,
.footer-nav a {
  text-transform: none;
  font-weight: 650;
}

.nav-wordmark,
.footer-brand {
  letter-spacing: .16em;
}

.story-price,
.story-price-range,
[data-story-price-summary],
.price-value {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
  }

  :where(a, button, input, select) {
    -webkit-tap-highlight-color: rgba(155, 232, 121, .24);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}