/* ============================================================
   combo.codes — Base layer
   Element defaults + the brand ECHO utilities.
   Tokens come from colors/typography/spacing — keep this thin.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings & anything "brand" use Share Tech Mono */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

code, kbd, samp, pre { font-family: var(--font-mono); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---- Eyebrow / mono label ---------------------------------------- */
.cc-eyebrow {
  font-family: var(--font-brand);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

/* ============================================================
   THE ECHO — flat duplicate shifted right-down. Never blurred.
   Use .cc-echo for headings on dark (purple echo under white).
   Use .cc-echo--lime to flip the echo to acid lime.
   ============================================================ */
.cc-echo {
  text-shadow: var(--echo-offset) var(--echo-offset) 0 var(--echo-color);
}
.cc-echo--lime { text-shadow: var(--echo-offset) var(--echo-offset) 0 var(--acid-lime); }
.cc-echo--cyan { text-shadow: var(--echo-offset) var(--echo-offset) 0 var(--neon-cyan); }
.cc-echo--magenta { text-shadow: var(--echo-offset) var(--echo-offset) 0 var(--hot-magenta); }

/* Prompt / console flourish for footers & captions: > text_ */
.cc-prompt::before { content: "> "; color: var(--pulse-purple); }
.cc-caret { color: var(--acid-lime); }

/* ============================================================
   THE HIGHLIGHT CHIP — a glyph-level lime marker for ONE key word.
   Flat fill, dark text, tight radius. Never blurred, never glowing,
   never echoed. Discipline: at most one per viewport — scarcity is
   what makes it read as signal.
   ============================================================ */
.cc-mark {
  background: var(--acid-lime);
  color: var(--void);
  padding: 0 0.16em;
  border-radius: 2px;
  text-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cc-mark--purple  { background: var(--pulse-purple); color: var(--ink); }
.cc-mark--cyan    { background: var(--neon-cyan);    color: var(--void); }
.cc-mark--magenta { background: var(--hot-magenta);  color: var(--ink); }

/* ---- Dot-grid texture (hero / section backdrops, very faint) ----- */
.cc-dotgrid {
  background-image: radial-gradient(rgba(242, 241, 247, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- "Powered on" glow pulse (logo / brand marks only) ----------- */
@media (prefers-reduced-motion: no-preference) {
  .cc-glow-pulse { animation: cc-glow-pulse 2.6s var(--ease-in-out) infinite; }
}
@keyframes cc-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(200, 255, 46, 0.55)); }
  50%      { filter: drop-shadow(0 0 9px rgba(200, 255, 46, 0.75)); }
}

/* ---- Blueprint rule for diagrams / workflow containers ----------- */
.cc-blueprint { border: var(--border-blueprint); border-radius: var(--radius-md); }

@media (prefers-reduced-motion: no-preference) {
  .cc-caret { animation: cc-blink 1s steps(1) infinite; }
}
@keyframes cc-blink { 50% { opacity: 0; } }