@font-face{font-family:Rockwell;src:url("../brand/rockwell.c971e6b14d3b.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* AMMO marketing tokens — extracted from approved mockups.
   ammo-host-landing.html, ammo-tools-landing.html
   Scoped under .mk wrapper. */

.mk {
  /* --- light: shared warm base --- */
  --mk-bg: #f4f2ee;
  --mk-bg2: #ece9e3;
  --mk-card: #fbfaf7;
  --mk-ink: #141312;
  --mk-ink2: #4a4741;
  --mk-ink3: #86827a;
  --mk-line: #e2ded6;

  /* --- brand colours (shared) --- */
  --mk-blue: #2f6bff;
  --mk-purple: #7a3ff2;
  --mk-red: #ef4a4a;
  --mk-green: #18a058;
  --mk-amber: #e8a33d;

  /* --- gradients --- */
  --mk-grad: linear-gradient(90deg, #2f6bff 0%, #7a3ff2 50%, #ef4a4a 100%);
  --mk-tgrad: linear-gradient(90deg, #0b8a7a, #2f6bff);

  /* --- host accent (default) ---
     Note: host mockup uses --blue directly; no separate hover/soft defined.
     Using blue values where accent is needed. */
  --mk-acc: #2f6bff;
  --mk-acc-grad: var(--mk-grad);

  /* --- typography stacks (from :root in mockups) --- */
  --mk-slab: Rockwell, "Roboto Slab", "Zilla Slab", Georgia, serif;
  --mk-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-mono: "JetBrains Mono", "DM Mono", ui-monospace, Menlo, monospace;

  /* --- type scale (from mockup CSS) --- */
  --mk-h1: 500 clamp(44px, 5.6vw, 68px)/1.03 var(--mk-slab);
  --mk-h2: 500 clamp(36px, 4.4vw, 54px)/1.06 var(--mk-slab);
  --mk-h3: 500 25px/1.2 var(--mk-slab);
  --mk-subline: 400 21px/1.45 var(--mk-sans);
  --mk-body: 400 16px/1.55 var(--mk-sans);
  --mk-small: 400 14px/1.55 var(--mk-sans);
  --mk-code: 500 14.5px/1.6 var(--mk-mono);
  --mk-eyebrow: 500 13.5px/1 var(--mk-sans);
  --mk-btn: 600 15px/1 var(--mk-sans);

  /* --- spacing scale (from mockup .sec, .hero, .feat, etc.) --- */
  --mk-sp-section: 110px;
  --mk-sp-hero-top: 56px;
  --mk-sp-hero-gap: 44px;
  --mk-sp-feat-grid: 52px;
  --mk-sp-card-gap: 20px;
  --mk-sp-card-pad: 14px 14px 30px;
  --mk-sp-wrap: 32px;
  --mk-sp-eyebrow: 26px;
  --mk-sp-subline: 22px;
  --mk-sp-prompt: 32px;

  /* --- radii (from mockup styles) --- */
  --mk-r-pill: 999px;
  --mk-r-band: 32px;
  --mk-r-card: 22px;
  --mk-r-prompt: 18px;
  --mk-r-btn: 12px;
  --mk-r-ctrl: 8px;

  /* --- shadows (from mockup box-shadow declarations) --- */
  --mk-shadow-card: 0 20px 40px -24px rgba(20, 19, 18, 0.25), 0 2px 6px -2px rgba(20, 19, 18, 0.06);
  --mk-shadow-btn-blue: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 18px -6px rgba(47, 107, 255, 0.6);
  --mk-shadow-btn-blue-hover: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 10px 24px -8px rgba(47, 107, 255, 0.7);
  --mk-shadow-chip: 0 12px 30px -12px rgba(20, 19, 18, 0.45), 0 0 0 1px rgba(20, 19, 18, 0.06);
  --mk-shadow-hot-host: 0 40px 70px -35px rgba(122, 63, 242, 0.55);
  --mk-shadow-hot-tools: 0 40px 70px -35px rgba(11, 138, 122, 0.6);

  /* --- motion (easings from mockup transitions/animations) --- */
  --mk-ease-bounce: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --mk-ease-phone: cubic-bezier(0.2, 0.9, 0.25, 1.1);
  --mk-ease-chip: cubic-bezier(0.2, 0.9, 0.3, 1.3);
  --mk-ease-pointer: cubic-bezier(0.5, 0, 0.2, 1);
  --mk-ease-fly: cubic-bezier(0.55, 0, 0.25, 1);
  --mk-dur-fast: 0.15s;
  --mk-dur-med: 0.25s;
  --mk-dur-slow: 0.45s;

  /* --- dark surfaces (host: #121214, tools: #101413) --- */
  --mk-dark-bg: #121214;
  --mk-dark-card: rgba(255, 255, 255, 0.04);
  --mk-dark-line: rgba(255, 255, 255, 0.09);
  --mk-dark-line-subtle: rgba(255, 255, 255, 0.06);
  --mk-dark-line-border: rgba(255, 255, 255, 0.08);
  --mk-dark-ink: #f4f2ee;
  --mk-dark-ink2: #cfcbc3;
  --mk-dark-lede: #b9b5ad;
  --mk-dark-ink3: #9b9891;
  --mk-dark-muted: #5e5b55;
  --mk-dark-tick-bg: #2a2a2e;

  /* --- AMMO company band (from .ammo: #151413) --- */
  --mk-ammo-bg: #151413;
  --mk-ammo-ink: #d9d5cc;
  --mk-ammo-ink2: #a19d94;
  --mk-ammo-ink3: #7d7970;
  --mk-ammo-link: #cfcbc2;
  --mk-ammo-bot: #827e75;
  --mk-ammo-sep: #55524c;
}

/* --- tools accent override --- */
.mk[data-product="tools"] {
  --mk-bg: #f3f1ec;
  --mk-bg2: #e9e6df;
  --mk-ink: #131514;
  --mk-ink2: #464a47;
  --mk-ink3: #838680;
  --mk-line: #e0ddd5;
  --mk-acc: #0b8a7a;
  --mk-acc2: #0f6e63;
  --mk-acc-soft: #dff2ee;
  --mk-acc-grad: var(--mk-tgrad);
  --mk-shadow-btn-acc: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px -6px rgba(11, 138, 122, 0.6);
  --mk-dark-bg: #101413;
  --mk-dark-ink: #f3f1ec;
  --mk-dark-lede: #b5bab4;
  --mk-dark-tick-bg: #26302d;
  --mk-dark-tick-check: #6fd3c3;
}

/* --- guide shell dark: specimens keep their light marketing style --- */
[data-theme="dark"] .mk {
  /* specimens stay light-first; no override needed */
}