/* ============================================================
   EpochCore Design System — colors_and_type.css
   ------------------------------------------------------------
   EpochCore LLC operates two surfaces that share one substrate:

   • APP face — EpochCore App, internal tools, onboarding flows.
     Dark ink, Swarm Violet accent, IBM Plex family.

   • MARKETING face — EpochPay, product-pack covers, decks.
     Cinema ink, Oscillation Orange accent, Space Grotesk +
     JetBrains Mono. "Specimen sheet" composition.

   Both share: dark substrate, mono for hashes/cryptographic
   data, no emoji, "Designed for X" framing for any metric,
   verifiable receipts and seal stamps as first-class motifs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── APP SURFACE (EpochCore App, onboarding) ───────────── */
  --bg:           #0a0a0f;   /* page background */
  --surface:      #12121a;   /* cards, trust panel, terminal */
  --surface-2:    #181822;   /* secondary surface (button bg) */
  --border:       #1e1e2e;   /* hairlines between rows */
  --border-2:     #2a2a3a;   /* card outlines, input borders */
  --text:         #e0e0e6;   /* primary text */
  --text-2:       #8888a0;   /* secondary text, labels */
  --text-3:       #5a5a72;   /* chrome (slide numbers, footer) */

  /* ── MARKETING SURFACE (EpochPay specimen sheet) ───────── */
  --ink:          #0a0b0e;   /* cinema black */
  --panel:        #15171e;   /* primary panel */
  --panel-deep:   #0f1117;   /* deep panel (terminals, insets) */
  --panel-hi:     #1e2230;   /* raised panel (active states) */
  --hair:         rgba(244,244,240,0.08);
  --hair-bold:    rgba(244,244,240,0.20);
  --paper:        #f4f4f0;   /* paper text on cinema ink */
  --paper-dim:    rgba(244,244,240,0.78);
  --mute:         rgba(244,244,240,0.50);
  --mute-dim:     rgba(244,244,240,0.30);

  /* ── BRAND ACCENTS ─────────────────────────────────────── */
  /* App face primary — Swarm Violet */
  --violet:       #a334f3;
  --violet-soft:  rgba(163,52,243,0.12);
  --violet-glow:  rgba(163,52,243,0.35);

  /* Marketing face primary — Oscillation Orange */
  --orange:       #ff6a1a;
  --orange-soft:  rgba(255,106,26,0.12);
  --orange-line:  rgba(255,106,26,0.35);

  /* Shared semantic */
  --crimson:      #e72020;   /* emphasis, legal text, refused */
  --crimson-soft: rgba(255,86,117,0.10);
  --red:          #ff5675;
  --verify:       #2dd881;   /* verified, settled, ok */
  --verify-soft:  rgba(45,216,129,0.10);
  --green:        #6fff99;   /* terminal "ok" output */
  --cyan:         #23c8e9;   /* code accents, hashes, smart widget */
  --blue:         #3b82f6;   /* data room pack accent */
  --gold:         #f59e0b;   /* warnings, smart widget gradient */
  --amber:        #f5a623;

  /* Quantum Palette pillars — for data-viz and seeded sigils.
     Full 14-color palette lives in ui_kits/_shared/palette-qp.jsx. */
  --qp-crimson:   #e72020;   /* Oscillation Crimson  · Compression */
  --qp-teal:      #42f977;   /* Velocity Teal        · Speed */
  --qp-violet:    #a334f3;   /* Swarm Violet         · Scale */
  --qp-gold:      #a59523;   /* Yield Gold           · Economic */
  --qp-cyan:      #23c8e9;   /* Calibration Cyan     · Qubit Subgraph */
  --qp-magenta:   #c6207a;   /* Session Magenta      · Runtime Sessions */
  --qp-lime:      #42a023;   /* Fidelity Lime        · Error Budget */
  --qp-indigo:    #28239b;   /* Coherence Indigo     · DD */
  --qp-orange:    #b05222;   /* Consensus Orange     · Ensemble */
  --qp-seafoam:   #24956b;   /* Budget Seafoam       · Adaptive Budget */

  /* ── SIGNATURE GRADIENTS ──────────────────────────────── */
  --rail:         linear-gradient(135deg, #28239b, #a334f3, #23c8e9);
  --smart-widget: linear-gradient(135deg, #23c8e9 0%, #f59e0b 100%);
  --runtime-aurora: linear-gradient(135deg, #28239b, #c6207a, #a334f3);
  --protocol-flame: linear-gradient(135deg, #28239b, #b05222, #e72020);

  /* ── SPACING ──────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  72px;
  --space-9:  96px;

  /* ── RADII ────────────────────────────────────────────── */
  /* App face uses soft 8–14px radii. Marketing face is 0 — */
  /* sharp specimen-sheet edges, never rounded. */
  --radius-sm:  6px;
  --radius:     10px;   /* default app radius */
  --radius-lg:  14px;   /* card radius (app) */
  --radius-pill: 999px; /* steppers, tags */

  /* ── SHADOWS / GLOWS ──────────────────────────────────── */
  --shadow-card:    0 12px 32px rgba(163,52,243,0.18);
  --shadow-violet:  0 16px 48px rgba(163,52,243,0.35);
  --shadow-orange:  0 30px 60px -20px rgba(255,106,26,0.35);
  --shadow-widget:  0 8px 32px rgba(35,200,233,0.40);
  --shadow-lift:    0 16px 48px rgba(0,0,0,0.50);

  /* ── TYPE FAMILIES ────────────────────────────────────── */
  --font-sans:     "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif:    "IBM Plex Serif", ui-serif, Georgia, serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-display:  "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono-mk:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ── SEMANTIC TYPE TOKENS (APP face — 1280px reference) ─ */
  --h1-size: 52px;  --h1-weight: 600; --h1-tracking: -0.5px; --h1-line: 1.08;
  --h2-size: 28px;  --h2-weight: 600; --h2-tracking: -0.2px; --h2-line: 1.15;
  --h3-size: 24px;  --h3-weight: 600; --h3-tracking: -0.1px; --h3-line: 1.2;
  --body-size: 15px; --body-line: 1.55;
  --lede-size: 18px; --lede-line: 1.6;
  --small-size: 13px; --small-line: 1.5;
  --label-size: 12px; --label-tracking: 0.6px;  /* uppercase row keys */
  --mono-size: 13px;

  /* ── SEMANTIC TYPE TOKENS (MARKETING face — 1920px ref) ─ */
  --display-hero: clamp(64px, 8vw, 144px);
  --display-h2:   clamp(40px, 5vw, 68px);
  --display-rail: clamp(72px, 9vw, 144px);   /* giant rail label */
  --eyebrow-size: 13px; --eyebrow-tracking: 1.0px;  /* mono · uppercase */
  --frame-label-size: 13px; --frame-label-tracking: 1.0px;
  --paper-lede: 19px;
  --paper-body: 15.5px;
}

/* ============================================================
   SEMANTIC ELEMENTS (APP face defaults)
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-line);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-line);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-line);
  margin: 0;
}
p { margin: 0; }
.lede { font-size: var(--lede-size); line-height: var(--lede-line); color: var(--text-2); }
.small { font-size: var(--small-size); color: var(--text-2); }
.mono  { font-family: var(--font-mono); }
.label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-2);
}

code, pre, .hash {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.3px;
  word-break: break-all;
}

/* ============================================================
   MARKETING face — opt in by wrapping in .specimen
   ============================================================ */
.specimen {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
}
.specimen .h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -3.6px; line-height: 0.92; }
.specimen .h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -2.2px; line-height: 1; }
.specimen .frame-label,
.specimen .eyebrow,
.specimen .mono {
  font-family: var(--font-mono-mk);
  letter-spacing: var(--frame-label-tracking);
  text-transform: uppercase;
}

/* ============================================================
   HEADLIGHT — soft radial-glow brand atmosphere.
   Apply with class="headlight" on a full-bleed wrapper.
   ============================================================ */
.headlight { position: relative; isolation: isolate; }
.headlight::before {
  content: "";
  position: absolute; top: -200px; left: -200px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(163,52,243,0.18) 0, transparent 60%);
  pointer-events: none; z-index: 0;
}
.headlight::after {
  content: "";
  position: absolute; bottom: -300px; right: -200px;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(35,200,233,0.10) 0, transparent 60%);
  pointer-events: none; z-index: 0;
}
.headlight > * { position: relative; z-index: 1; }

/* ============================================================
   MOTION — minimal, deliberate easing.
   ============================================================ */
@keyframes ep-pulse  { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes ep-fade   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ep-spin   { to { transform: rotate(360deg); } }
@keyframes ep-stamp  { 0% { opacity: 0; transform: scale(1.4) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes ep-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }

.pulse-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--verify);
  margin-right: 8px;
  animation: ep-pulse 1.6s infinite;
}