/* ============================================================
   heyarnoux design system — v1
   GTM x AI consulting. Monospace, sharp edges, dotted lines.
   ------------------------------------------------------------
   - Default theme = heyarnoux coral (matches heyarnoux.com).
   - Per-client themes override the --hd-accent* + tint tokens
     on a wrapper class (e.g. <div class="hd theme-mews">).
   - House rules baked in: sharp edges (radius 0), dotted lines,
     16px min body, 8px spacing grid, 48px+ touch targets,
     animate transform/opacity only.
   - Scope everything under .hd to avoid collisions.
   ============================================================ */

:root{
  /* ink + paper */
  --hd-ink:#0a0a0a;
  --hd-paper:#ffffff;
  --hd-body:#4a423c;
  --hd-muted:#7a6f66;

  /* signature HIGHLIGHT marker — heyarnoux yellow, FIXED across themes.
     highlight key words with this, not with the accent. */
  --hd-mark:#ffe066;
  /* the few semantic accents (charts, status, terminal dots) */
  --hd-green:#197a3d; --hd-green-soft:#7ee787; --hd-blue:#1d4ed8; --hd-amber:#ffbd2e;

  /* accent — THEMEABLE. default = heyarnoux coral */
  --hd-accent:#cc3a14;
  --hd-accent-bright:#ff7a52;
  --hd-tint:#fbf3ef;
  --hd-tint2:#fdeee8;
  --hd-hl:rgba(255,122,82,.30);

  /* lines (dotted/dashed house style) */
  --hd-line:#e7ded7;
  --hd-line2:#efe8e2;

  /* status — semantic, fixed across themes */
  --hd-live:#197a3d;
  --hd-hardening:#b5740a;

  /* type */
  --hd-font:'Consolas','JetBrains Mono','SF Mono',Menlo,monospace;
  --hd-fs-body:16px;

  /* spacing — 8px grid */
  --hd-s1:8px; --hd-s2:16px; --hd-s3:24px; --hd-s4:32px; --hd-s5:48px; --hd-s6:64px;

  /* sharp by house rule */
  --hd-radius:0;
}

/* ---- per-client themes -------------------------------------
   Add one block per client. Keep accent contrast >= 4.5:1 on white. */
.theme-coral{ /* = default heyarnoux, explicit for clarity */
  --hd-accent:#cc3a14; --hd-accent-bright:#ff7a52;
  --hd-tint:#fbf3ef; --hd-tint2:#fdeee8; --hd-hl:rgba(255,122,82,.30);
  --hd-line:#e7ded7; --hd-line2:#efe8e2;
}
.theme-mews{ /* Mews pink */
  --hd-accent:#d6006e; --hd-accent-bright:#ff4da6;
  --hd-tint:#fdeef6; --hd-tint2:#fbdcec; --hd-hl:rgba(214,0,110,.18);
  --hd-line:#ecdfe7; --hd-line2:#f3e8ef;
}

/* ---- base --------------------------------------------------- */
.hd,.hd *{box-sizing:border-box;border-radius:var(--hd-radius);}
.hd{font-family:var(--hd-font);color:var(--hd-ink);background:var(--hd-paper);
  font-size:var(--hd-fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;}
.hd h1,.hd h2,.hd h3{letter-spacing:-.5px;line-height:1.1;}
.hd h1{font-size:clamp(34px,5vw,56px);font-weight:800;}
.hd h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;}
.hd h3{font-size:20px;font-weight:800;}
.hd p{color:var(--hd-body);}
.hd a{color:var(--hd-accent);text-underline-offset:3px;}
.hd-accent{color:var(--hd-accent);}
.hd-hl,.hd-mark{background:var(--hd-mark);padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hd-display{font-weight:800;letter-spacing:-1.5px;line-height:.95;
  font-size:clamp(48px,11vw,128px);}

/* ---- eyebrow ------------------------------------------------ */
.hd-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:3.5px;
  color:var(--hd-accent);font-weight:800;display:inline-flex;align-items:center;gap:12px;}
.hd-eyebrow::before,.hd-eyebrow::after{content:"";width:20px;height:1px;background:var(--hd-accent);display:inline-block;}

/* ---- section header ---------------------------------------- */
.hd-section-head h2{margin:10px 0 12px;}
.hd-section-head p{max-width:64ch;}

/* ---- card (dashed, sharp) ---------------------------------- */
.hd-card{border:1px dashed var(--hd-line);background:var(--hd-paper);padding:var(--hd-s3);}
.hd-card--solid{border:1.5px solid var(--hd-ink);}
.hd-card--invert{background:var(--hd-ink);color:#fff;border:1.5px solid var(--hd-ink);}
.hd-card h3{margin-bottom:var(--hd-s1);}
.hd-card p{font-size:14px;line-height:1.55;}
.hd-card--invert p{color:rgba(255,255,255,.9);}
.hd-card__num{font-size:32px;font-weight:800;color:var(--hd-accent);letter-spacing:-1px;line-height:1;margin-bottom:14px;}

/* ---- tags + status ----------------------------------------- */
.hd-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;padding:3px 9px;white-space:nowrap;}
.hd-tag--ink{background:var(--hd-ink);color:#fff;}
.hd-tag--accent{background:var(--hd-accent);color:#fff;}
.hd-tag--outline{border:1px solid var(--hd-ink);color:var(--hd-ink);}
.hd-tag--accent-outline{border:1px solid var(--hd-accent);color:var(--hd-accent);}
.hd-tag--muted{border:1px dashed var(--hd-line);color:var(--hd-muted);}
/* lifecycle status (use with .hd-tag) */
.hd-tag--live{background:var(--hd-live);color:#fff;}
.hd-tag--hardening{background:var(--hd-hardening);color:#fff;}
.hd-tag--cpilot{background:var(--hd-accent);color:#fff;}
.hd-tag--pilot{border:1px solid var(--hd-ink);color:var(--hd-ink);}
.hd-tag--backlog{border:1px dashed var(--hd-line);color:var(--hd-muted);}

/* ---- buttons (>=48px touch target) ------------------------- */
.hd-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 26px;
  font-family:inherit;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  text-decoration:none;border:1.5px solid var(--hd-ink);background:var(--hd-ink);color:#fff;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.hd-btn:hover{background:var(--hd-accent);border-color:var(--hd-accent);color:#fff;}
.hd-btn--alt{background:var(--hd-paper);color:var(--hd-ink);}
.hd-btn--alt:hover{background:var(--hd-accent);color:#fff;}

/* ---- quote + callout --------------------------------------- */
.hd-quote{border-left:2px solid var(--hd-accent);padding-left:16px;font-weight:700;}
.hd-quote cite{display:block;margin-top:8px;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--hd-muted);font-style:normal;font-weight:700;}
.hd-callout{border-left:3px solid var(--hd-accent);background:var(--hd-tint);padding:14px 18px;font-size:14px;line-height:1.6;}
.hd-callout strong{color:var(--hd-ink);}

/* ---- table ------------------------------------------------- */
.hd-table{width:100%;border-collapse:collapse;}
.hd-table th{background:var(--hd-ink);color:#fff;text-align:left;font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;font-weight:800;padding:10px 12px;white-space:nowrap;}
.hd-table td{padding:11px 12px;border-bottom:1px dashed var(--hd-line);vertical-align:middle;font-size:14px;}
.hd-table tr:last-child td{border-bottom:none;}

/* ---- misc -------------------------------------------------- */
.hd-rule{border:none;border-top:1px dashed var(--hd-line);margin:var(--hd-s3) 0;}
.hd-tint{background:var(--hd-tint);}

/* ---- motion library ----------------------------------------
   HOUSE RULE: little animations are SUBTLE. transform + opacity
   only (never width/height), ease-in-out, slow (1.8-3.2s),
   infinite, small amplitude. The set, lifted from the site:
   float (hover), breathe (scale), badge-float (rotated badge),
   pulse-ring (live ping), embed-pulse (emphasis), arch-flow
   (flow nudge), march (dashed-line travel, SVG). */
@keyframes hd-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes hd-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
@keyframes hd-badge-float{0%,100%{transform:rotate(-7deg) translateY(0);}50%{transform:rotate(-5deg) translateY(-3px);}}
@keyframes hd-pulse-ring{0%{transform:scale(.85);opacity:1;}100%{transform:scale(2.2);opacity:0;}}
@keyframes hd-embed-pulse{0%,100%{transform:scale(1.18) translateY(0);}50%{transform:scale(1.22) translateY(-1px);}}
@keyframes hd-arch-flow{0%,100%{opacity:.55;transform:translateX(0);}50%{opacity:1;transform:translateX(8px);}}
@keyframes hd-march{to{stroke-dashoffset:-22;}}
.hd-anim-float{animation:hd-float 5s ease-in-out infinite;}
.hd-anim-breathe{transform-box:fill-box;transform-origin:center;animation:hd-breathe 3s ease-in-out infinite;}
.hd-anim-embed{animation:hd-embed-pulse 2.6s ease-in-out infinite;}
.hd-anim-arch{display:inline-block;animation:hd-arch-flow 2.6s ease-in-out infinite;}
.hd-dashed-anim{stroke-dasharray:5 6;animation:hd-march 1s linear infinite;}
/* live "ping" — sharp square dot + expanding ring: <span class="hd-ping"><i></i></span> */
.hd-ping{position:relative;display:inline-block;width:10px;height:10px;}
.hd-ping i{position:absolute;inset:0;background:var(--hd-accent);}
.hd-ping::before{content:"";position:absolute;inset:0;background:var(--hd-accent);animation:hd-pulse-ring 1.8s ease-out infinite;}
/* floating yellow badge (rotated): <span class="hd-badge">…</span> */
.hd-badge{display:inline-block;background:var(--hd-mark);color:var(--hd-ink);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;animation:hd-badge-float 3.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .hd-anim-float,.hd-anim-breathe,.hd-anim-embed,.hd-anim-arch,.hd-dashed-anim,.hd-badge{animation:none!important;}
  .hd-ping::before{animation:none!important;display:none;}
}