/* Theme tokens for the MailOps marketing pages.
   Extracted from mailops-web-2 src/config.ts (theme, type, grain) — the React
   app injected these at runtime; the server-rendered pages load this file. */
:root {
  --canvas: #f5f0e3;
  --headerBg: #f0eada;
  --ink: #1b1610;
  --muted: #6f6350;
  --accent: #6f9613;
  --accentHover: #87b31a;
  --accentDeep: #3f5d07;
  --accentSoft: #eef8c6;
  --accent-ink: #22300a;
  --accent-on-dark: #d9f45c;
  --overlay: #e8e1cd;
  --cardDark: #1a1509;
  --submit: #22300a;
  --line: rgba(27, 22, 16, .13);
  --line-strong: rgba(27, 22, 16, .30);
  --amTextHi: #f5f0e3;
  --amTextMid: rgba(245, 240, 227, .68);
  --cookieBtn: #f6f2e8;
  --cookieBorder: #cff04a;
  --pastel-sage: #e3ecc6;
  --pastel-sage-deep: #aec46e;
  --pastel-growthGreen: #d8ebc2;
  --pastel-growthGreen-deep: #9fca6e;
  --pastel-horizonBlue: #ddd8e6;
  --pastel-horizonBlue-deep: #b0a6ca;
  --pastel-lilac: #efe2c2;
  --pastel-lilac-deep: #d8bc82;
  --pastel-lightTeal: #e6e2cd;
  --pastel-lightTeal-deep: #f0eada;

  --type-display: clamp(2.5rem, 1.5898rem + 3.8835vw, 6.25rem);
  --type-h2: clamp(2.5rem, 2.1359rem + 1.5534vw, 4rem);
  --type-h3: clamp(2rem, 1.5146rem + 2.0712vw, 4rem);
  --type-eyebrow: clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
  --type-lead: clamp(1rem, 0.8786rem + 0.5178vw, 1.5rem);
  --type-body: 1rem;
  --type-display-lh: 1.4;
  --grain-opacity: 0.18;

  /* accent (#6f9613 = 111,150,19) alpha derivatives */
  --accent-a0: rgba(111, 150, 19, 0);
  --accent-a04: rgba(111, 150, 19, .04);
  --accent-a06: rgba(111, 150, 19, .06);
  --accent-a075: rgba(111, 150, 19, .075);
  --accent-a08: rgba(111, 150, 19, .08);
  --accent-a12: rgba(111, 150, 19, .12);
  --accent-a15: rgba(111, 150, 19, .15);
  --accent-a22: rgba(111, 150, 19, .22);
  --accent-a30: rgba(111, 150, 19, .3);
  --accent-a35: rgba(111, 150, 19, .35);
  --accent-a50: rgba(111, 150, 19, .5);

  /* headerBg (#f0eada) at zero alpha */
  --headerBg-a0: rgba(240, 234, 218, 0);
}

/* config.motion: shimmer off, shader off */
html[data-shimmer="off"] {}

/* hidden attribute must win over display:flex overlays */
[hidden] {
  display: none !important;
}