@import "/assets/tokens.css";

/* GHEM System — small custom layer on top of Tailwind.
   Visual direction: Palette v3 A·Fresh light (REQ-037; see docs/DESIGN_PALETTE.md).
   No runtime build step; only the few rules not convenient as Tailwind utilities. */

html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; }

.ghem-primary,
#ghem-req-form button[type="submit"],
#ghem-docs-unlock {
  color: #fff;
  background: var(--f-cta-grad);
  box-shadow:
    0 14px 30px rgb(var(--c-accent-rgb) / .22),
    inset 0 0 0 1px rgb(var(--f-brand-green-rgb) / .14);
  transition: filter .12s, box-shadow .12s, transform .12s;
}
.ghem-primary:hover,
#ghem-req-form button[type="submit"]:hover,
#ghem-docs-unlock:hover {
  filter: brightness(1.05);
  box-shadow:
    0 16px 34px rgb(var(--c-accent-rgb) / .27),
    inset 0 0 0 1px rgb(var(--f-brand-green-rgb) / .20);
}
.ghem-primary:focus-visible,
#ghem-req-form button[type="submit"]:focus-visible,
#ghem-docs-unlock:focus-visible {
  outline: 3px solid rgb(var(--f-lime-rgb) / .72);
  outline-offset: 2px;
}
.ghem-primary:active,
#ghem-req-form button[type="submit"]:active,
#ghem-docs-unlock:active { transform: translateY(1px); }

.ghem-eyebrow { color: var(--f-brand-green-text); }
.ghem-hero-glow {
  background-image: var(--f-hero-glow);
}
.ghem-hero-glow .ghem-eyebrow {
  color: var(--f-brand-green);
}
.ghem-section-glow {
  background-image: var(--f-hero-glow);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ghem-highlight {
  color: #fff;
  background:
    linear-gradient(transparent 58%, rgb(var(--f-lime-rgb) / .36) 58% 88%, transparent 88%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ghem-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: .75rem;
  border: 1px solid rgb(var(--f-lime-rgb) / .55);
  border-radius: 999px;
  padding: .22rem .55rem;
  color: var(--c-text-primary);
  background: rgb(var(--f-lime-rgb) / .28);
  font: 600 11px/1.1 "Inter", system-ui, sans-serif;
  letter-spacing: .04em;
}
.ghem-seal { filter: var(--f-seal-glow); }
#ghem-docs-gate > p:first-child { color: var(--f-brand-green-text); }

/* Fields A: crisp border on white, teal focus ring, mono for code-shaped inputs. */
.ghem-input {
  width: 100%;
  border: 1px solid var(--c-border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--c-text-primary);
  background: var(--c-bg-surface);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.ghem-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgb(var(--c-accent-rgb) / .18);
}
.ghem-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Signal grid backdrop used behind the hero artifact. */
.ghem-grid {
  background-image:
    linear-gradient(rgb(var(--f-brand-green-rgb) / .10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--f-brand-green-rgb) / .10) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── REQ-039 Masküi docs chrome ─────────────────────────────────────────────
   Light-only (GAP-021 — the site has no dark theme). Semantic --c-*/--f-* tokens
   resolve to the A·Fresh light palette; the mascot poses come from the docs-gate.js
   sprite (#mk-happy/#mk-point/#mk-alert/#mk-think). All user-visible label/body TEXT
   lives in data-i18n payload keys — never in CSS `content:` (see the plan §1 rule). */

/* Product masthead: official horizontal logo + a "Guide" breadcrumb. */
.mk-masthead {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border-subtle);
}
.mk-masthead-logo { height: 34px; width: auto; display: block; }
.mk-masthead-crumb {
  font: 600 11px/1.1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-left: .75rem;
  border-left: 1px solid var(--c-border-subtle);
}

/* Mascot callouts: an inline aside with a pose icon, a label, and a first-person body. */
.mk-callout {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin: 1.5rem 0;
  padding: .95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--c-border-subtle);
  background: var(--c-bg-surface);
}
.mk-callout-icon { width: 2.4rem; height: 2.4rem; flex: none; margin-top: .1rem; }
.mk-callout-text { min-width: 0; }
.mk-callout-label {
  display: block;
  font: 700 11px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.mk-callout-body { color: var(--c-text-secondary); line-height: 1.6; font-size: .95rem; }
/* tip — brand green/lime; warn — amber (a semantic signal, not the page accent);
   note — neutral slate. */
.mk-callout.tip  { border-color: rgb(var(--f-brand-green-rgb) / .40); background: rgb(var(--f-brand-green-rgb) / .06); }
.mk-callout.tip  .mk-callout-label { color: var(--f-brand-green-text); }
.mk-callout.warn { border-color: #f0c98a; background: #fdf6ec; }
.mk-callout.warn .mk-callout-label { color: #92400e; }
.mk-callout.note { border-color: var(--c-border-strong); background: rgb(var(--c-text-muted-rgb) / .05); }
.mk-callout.note .mk-callout-label { color: var(--c-text-muted); }

/* Companion: a margin-rail card — the mascot introducing / orienting the reader.
   Floats beside the prose on wide screens, stacks on narrow. */
.mk-companion {
  border: 1px solid rgb(var(--f-brand-green-rgb) / .35);
  background: rgb(var(--f-brand-green-rgb) / .05);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  margin: 1.5rem 0;
}
@media (min-width: 1024px) {
  .mk-companion { float: right; width: 15rem; margin: .25rem 0 1rem 1.5rem; }
}
.mk-companion-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.mk-companion-icon { width: 2.2rem; height: 2.2rem; flex: none; }
.mk-companion-title {
  font: 700 12px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--f-brand-green-text);
}
.mk-companion-body { color: var(--c-text-secondary); line-height: 1.6; font-size: .9rem; }

/* Schematics (PR-3/PR-4): inline SVG diagrams; labels are data-i18n <text> nodes. */
.mk-schematic { margin: 1.5rem 0; max-width: 100%; overflow-x: auto; }
.mk-schematic svg { max-width: 100%; height: auto; display: block; }
.mk-schematic text { font-family: "Inter", system-ui, sans-serif; fill: var(--c-text-secondary); }