/* ===========================================================================
 * agents.headlessdomains.com — palette + chrome
 *
 * Overrides the inherited paper-dispatch tokens with the headlessdomains.com
 * v2.css brand palette (dark + mint phosphor). Loaded *after* each template's
 * inline <style> so the :root tokens win. Templates keep their layouts but
 * pick up the dark coat for free.
 * ===========================================================================*/

:root {
  /* ---- HD v2.css palette (mirrored locally) ---- */
  --hd-bg:        #0a0a0f;
  --hd-bg-2:      #0e0e14;
  --hd-bg-3:      #14141c;
  --hd-line:      #1f1f2a;
  --hd-line-2:    #2a2a38;
  --hd-fg:        #e8e8ee;
  --hd-fg-2:      #a0a0ae;
  --hd-fg-3:      #6b6b7a;
  --hd-accent:    #00ff9d;
  --hd-accent-dim:#00cc7d;
  --hd-accent-glow: rgba(0, 255, 157, 0.15);
  --hd-warn:      #ffb545;
  --hd-danger:    #ff4a5c;

  /* ---- Family A: paper-dispatch (used by index.html) ---- */
  --term:           var(--hd-bg);
  --term-2:         var(--hd-bg-2);
  --dim:            var(--hd-bg-3);
  --rule:           var(--hd-line);
  --dead:           var(--hd-fg-3);
  --readout:        var(--hd-fg);
  --phosphor:       var(--hd-accent);
  --phosphor-soft:  var(--hd-accent-glow);
  --phosphor-dim:   rgba(0, 255, 157, 0.08);
  --warn:           var(--hd-warn);
  --warn-soft:      rgba(255, 181, 69, 0.18);
  --alert:          var(--hd-danger);
  --alert-soft:     rgba(255, 74, 92, 0.16);
  --soft:           rgba(232, 232, 238, 0.6);

  /* ---- Family B: paper-dispatch v2 (used by entry, marketplace, sold,
     docs, docs-architecture, article, sitemap, 404) ---- */
  --bg:             var(--hd-bg);
  --surface:        var(--hd-bg-2);
  --surface-2:      var(--hd-bg-2);
  --surface-3:      var(--hd-bg-3);
  --border:         var(--hd-line);
  --border-2:       var(--hd-line-2);
  --muted:          var(--hd-fg-3);
  --text:           var(--hd-fg);
  --text-dim:       var(--hd-fg-2);
  --mint:           var(--hd-accent);
  --mint-dim:       var(--hd-accent-glow);
  --mint-soft:      rgba(0, 255, 157, 0.08);
  --accent:         var(--hd-accent);
  --amber:          var(--hd-warn);
  --amber-dim:      rgba(255, 181, 69, 0.20);
  --amber-soft:     rgba(255, 181, 69, 0.08);
  --rose:           var(--hd-danger);
  --line:           var(--hd-line);
  --line-2:         var(--hd-line-2);
  --fg:             var(--hd-fg);
  --fg-2:           var(--hd-fg-2);
  --fg-3:           var(--hd-fg-3);
}

/* ---- Fonts: align with HD's Inter Tight / Inter / JetBrains Mono stack ---- */
body, html {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
.mono, code, pre, .statusbar, kbd {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
}
h1, h2, h3, .display, .brand-lockup, .cmdnav a, .menu-toggle, .nav-cta {
  font-family: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---- Replace paper texture with HD's data-grid + scanlines ---- */
body::before {
  background-image:
    linear-gradient(to right, var(--hd-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hd-line) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 20%, black 30%, transparent 80%);
  opacity: 0.35;
}
body::after {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.025) 2px,
      rgba(255, 255, 255, 0.025) 3px
    ) !important;
  mix-blend-mode: overlay;
}

/* ---- Phosphor glow on key accents ---- */
.statusbar .val,
.cmdnav a.active,
.brand-lockup .product {
  text-shadow: 0 0 8px var(--hd-accent-glow);
}

/* ---- Selection in HD mint ---- */
::selection { background: var(--hd-accent); color: var(--hd-bg); }

/* ---- Inputs/textareas inherit the dark surface ---- */
input, textarea, select {
  background: var(--hd-bg-2) !important;
  border-color: var(--hd-line-2) !important;
  color: var(--hd-fg) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--hd-accent) !important;
  box-shadow: 0 0 0 1px var(--hd-accent), 0 0 24px var(--hd-accent-glow) !important;
  outline: none;
}

/* ---- Drop the ASCII corner brackets — the mint underline + border on hover
   is the active card affordance now. ---- */
.card-corner { display: none !important; }

/* ---- Brand mark: double mint squares (lifted from pre-paper redesign) ---- */
.brand { display: inline-flex !important; align-items: center !important; gap: 14px !important; text-decoration: none !important; }
.brand-mark {
  display: inline-block !important;
  width: 30px !important; height: 30px !important;
  position: relative !important; flex-shrink: 0 !important;
  font-size: 0;  /* eat any text content from old templates */
}
.brand-mark::before, .brand-mark::after {
  content: '' !important; position: absolute !important;
  border: 1.5px solid var(--hd-accent) !important;
  width: 22px !important; height: 22px !important;
  background: transparent !important;
  animation: none !important;
}
.brand-mark::before { top: 0 !important; left: 0 !important; }
.brand-mark::after  { bottom: 0 !important; right: 0 !important; }

.brand-lockup {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: var(--hd-fg) !important;
}
.brand-lockup .slash, .brand-lockup .pipe { color: var(--hd-fg-3) !important; font-weight: 400 !important; }
.brand-lockup .product, .brand-lockup .v { color: var(--hd-accent) !important; text-shadow: 0 0 8px var(--hd-accent-glow); }

/* ---- Card hover: mint border slides in from the left (lifted from pre-paper redesign) ---- */
.card-cell { position: relative; overflow: hidden; }
.card-cell::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: var(--hd-accent) !important;
  transform: scaleX(0); transform-origin: left;
  transition: transform 350ms cubic-bezier(.2,.7,.3,1);
  z-index: 5;
  pointer-events: none;
}
.card-cell:hover::before { transform: scaleX(1); }
.card-cell:hover {
  border-color: var(--hd-accent) !important;
  box-shadow: 0 0 0 1px var(--hd-accent-glow), 0 0 32px var(--hd-accent-glow) !important;
}