/* ==========================================================================
   MessageHQ design tokens
   Ported verbatim from the MessageHQ Design System (Master Manual v2.3).
   Five locked colors, two modes, one typeface (Lato), 8px spacing grid,
   4-6px radius family, quiet motion. See css/style.css for components.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&display=swap");

:root{
  /* ---- Base palette (never introduce a hue outside these five) ---- */
  --mhq-ink:#29284A;
  --mhq-bone:#E9E7E3;
  --mhq-gold:#DBC895;
  --mhq-green:#AFF240;
  --mhq-blood:#9E140C;

  --mhq-ink-12:rgb(41 40 74 / 12%);
  --mhq-ink-24:rgb(41 40 74 / 24%);
  --mhq-ink-64:rgb(41 40 74 / 64%);
  --mhq-bone-12:rgb(233 231 227 / 12%);
  --mhq-bone-24:rgb(233 231 227 / 24%);
  --mhq-bone-72:rgb(233 231 227 / 72%);
  --mhq-gold-32:rgb(219 200 149 / 32%);
  --mhq-gold-56:rgb(219 200 149 / 56%);

  /* ---- Semantic aliases: Mode B (dark) is the system default ---- */
  --surface-ground:var(--mhq-ink);
  --surface-inverse:var(--mhq-bone);
  --text-heading:var(--mhq-bone);
  --text-body:var(--mhq-bone);
  --text-muted:var(--mhq-bone-72);
  --text-on-accent:var(--mhq-ink);
  --accent-fill:var(--mhq-green);
  --trim:var(--mhq-gold);
  --hairline:var(--mhq-gold-56);
  --rule:var(--mhq-bone-24);
  --alert:var(--mhq-green);
  --link:var(--mhq-bone);
  --link-hover:var(--mhq-green);
  --focus-ring:var(--mhq-green);

  --btn-primary-bg:var(--mhq-green);
  --btn-primary-fg:var(--mhq-ink);
  --btn-primary-bg-hover:var(--mhq-bone);
  --btn-primary-fg-hover:var(--mhq-ink);
  --btn-secondary-fg:var(--mhq-bone);

  /* ---- Type ---- */
  --font-sans:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:900;

  --fs-h1:64px;--fs-h1-min:52px;
  --fs-h2:44px;--fs-h2-min:36px;
  --fs-h3:32px;--fs-h3-min:28px;
  --fs-body-lg:20px;--fs-body:18px;
  --fs-subtext:16px;--fs-subtext-sm:15px;--fs-eyebrow:13px;

  --lh-heading:1.1;--lh-body:1.55;--lh-body-loose:1.65;
  --ls-heading:-0.5px;--ls-heading-tight:-1px;--ls-body:0;--ls-eyebrow:0.14em;

  /* ---- Spacing: 8px grid ---- */
  --space-xs:8px;--space-s:16px;--space-m:24px;--space-l:48px;--space-xl:80px;
  --space-12:12px;--space-14:14px;--space-32:32px;--space-64:64px;--space-96:96px;

  --section-pad-desktop:96px;--section-pad-tablet:64px;--section-pad-mobile:40px;
  --section-pad:var(--section-pad-desktop);

  --container-max:1200px;--container-narrow:760px;--gutter:24px;
  --bp-tablet:768px;--bp-mobile:480px;

  /* ---- Shape ---- */
  --radius-field:4px;--radius-button:5px;--radius-card:6px;--radius-pill:999px;
  --border-field:1px solid #CCCCCC;
  --shadow-card:0 1px 2px rgb(41 40 74 / 6%);
  --shadow-raised:0 2px 8px rgb(41 40 74 / 10%);

  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:320ms;
  --transition-interactive:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard);
}
@media (max-width:640px){
  :root{
    --fs-h1:40px;--fs-h2:31px;--fs-h3:24px;
    --fs-body-lg:17px;--fs-body:16px;--fs-subtext:15px;
  }
}
@media (max-width:768px){:root{--section-pad:var(--section-pad-tablet)}}
@media (max-width:480px){:root{--section-pad:var(--section-pad-mobile);--gutter:20px}}

/* ---- Mode B — dark, default. Home + primary pages. ---- */
.mhq-mode-b{
  --surface-ground:var(--mhq-ink);
  --text-heading:var(--mhq-bone);--text-body:var(--mhq-bone);--text-muted:var(--mhq-bone-72);
  --text-on-accent:var(--mhq-ink);--accent-fill:var(--mhq-green);
  --hairline:var(--mhq-gold-56);--rule:var(--mhq-bone-24);--alert:var(--mhq-green);
  --link:var(--mhq-bone);--link-hover:var(--mhq-green);--focus-ring:var(--mhq-green);
  --btn-primary-bg:var(--mhq-green);--btn-primary-fg:var(--mhq-ink);
  --btn-primary-bg-hover:var(--mhq-bone);--btn-primary-fg-hover:var(--mhq-ink);
  --btn-secondary-fg:var(--mhq-bone);
  background:var(--surface-ground);color:var(--text-body);
}
/* ---- Mode A — light, long-form. Articles, Origin Story, Contact. ---- */
.mhq-mode-a{
  --surface-ground:var(--mhq-bone);
  --text-heading:var(--mhq-ink);--text-body:var(--mhq-ink);--text-muted:var(--mhq-ink-64);
  --text-on-accent:var(--mhq-bone);--accent-fill:var(--mhq-blood);
  --hairline:var(--mhq-gold);--rule:var(--mhq-ink-12);--alert:var(--mhq-blood);
  --link:var(--mhq-blood);--link-hover:var(--mhq-ink);--focus-ring:var(--mhq-blood);
  --btn-primary-bg:var(--mhq-blood);--btn-primary-fg:var(--mhq-bone);
  --btn-primary-bg-hover:var(--mhq-ink);--btn-primary-fg-hover:var(--mhq-bone);
  --btn-secondary-fg:var(--mhq-ink);
  background:var(--surface-ground);color:var(--text-body);
}

/* ---- Base resets (Manual §11.2: full width, no sidebar) ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);letter-spacing:var(--ls-body);background:var(--surface-ground);color:var(--text-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:var(--ls-heading);text-wrap:balance;font-family:var(--font-sans)}
h1{font-weight:var(--fw-bold);font-size:var(--fs-h1);line-height:var(--lh-heading)}
h2{font-weight:var(--fw-bold);font-size:var(--fs-h2);line-height:var(--lh-heading)}
h3{font-weight:var(--fw-semibold);font-size:var(--fs-h3);line-height:var(--lh-heading)}
p{margin:0}
a{color:var(--link);text-decoration:none;transition:var(--transition-interactive)}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
ul,ol{margin:0;padding-left:1.15em}
img,svg{max-width:100%}
::selection{background:var(--mhq-green);color:var(--mhq-ink)}