/* Method Media House tokens (docs/DESIGN.md §2). The only stylesheet of ours with hex values. */
:root {
  /* One hue: #020617 mixed with white */
  --mmh-ink:    #020617;
  --mmh-ink-90: #1b1f2e;
  --mmh-ink-75: #414451;
  --mmh-ink-60: #676a74;
  --mmh-ink-50: #80828b;
  --mmh-ink-25: #c0c1c5;
  --mmh-ink-10: #e6e6e8;
  --mmh-ink-05: #f2f3f3;
  --mmh-ink-03: #f7f8f8;
  --mmh-paper:  #ffffff;
  --mmh-on-dark:       var(--mmh-paper);
  --mmh-on-dark-muted: rgba(255, 255, 255, .6);
  --mmh-on-dark-line:  rgba(255, 255, 255, .16);

  /* Type: Surgena for headings and display titles (self-hosted), Capitana for body copy
     (Adobe Fonts web project vti6eax, family name "capitana"). Surgena is the fallback. */
  --mmh-font-display: "Surgena", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mmh-font-body: "capitana", "Surgena", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mmh-font: var(--mmh-font-body);

  /* Motion (GSAP mirrors these in app.js) */
  --mmh-ease: cubic-bezier(.215, .61, .355, 1); /* power3.out */
  --mmh-dur: .8s;

  /* Layout */
  --mmh-gutter: 24px;
  --mmh-section: clamp(80px, 10vw, 160px);

  /* Adina variables (its :root block was removed from main.css), remapped to MMH tokens */
  --td-ff-surgena:  var(--mmh-font-display);
  --td-ff-capitana: var(--mmh-font-body);
  --td-ff-poppins:  var(--mmh-font);
  --td-ff-inter:    var(--mmh-font);
  --td-ff-roboto:   var(--mmh-font);
  --td-ff-p:        var(--mmh-font);
  --td-ff-fontawesome: "Font Awesome 7 Pro";
  --td-theme-primary: var(--mmh-ink);
  --td-theme-1:       var(--mmh-ink);
  --td-common-white:  var(--mmh-paper);
  --td-common-black:  var(--mmh-ink);
  --td-common-bg:     var(--mmh-ink-90);
  --td-common-line:   var(--mmh-ink-10);
  --td-grey-1:        var(--mmh-ink-05);
  --td-grey-2:        var(--mmh-ink-75);
  --td-grey-3:        var(--mmh-ink-60);
  --td-grey-4:        var(--mmh-ink-50);
  --td-green-2:       var(--mmh-ink);  /* template accent, not on-brand: one hue only */

  /* Bootstrap 5 variables remapped to MMH tokens */
  --bs-body-font-family: var(--mmh-font);
  --bs-body-font-size: 18px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--mmh-ink);
  --bs-body-bg: var(--mmh-paper);
  --bs-emphasis-color: var(--mmh-ink);
  --bs-secondary-color: var(--mmh-ink-75);
  --bs-border-color: var(--mmh-ink-10);
  --bs-link-color: var(--mmh-ink);
  --bs-link-color-rgb: 2, 6, 23;
  --bs-link-hover-color: var(--mmh-ink-75);
  --bs-link-hover-color-rgb: 65, 68, 81;
  --bs-heading-color: var(--mmh-ink);
  --bs-focus-ring-color: rgba(2, 6, 23, .25);
}