/* ============================================================
   A.M. OVERTONE — shared design tokens
   "Transmissions from the Multiverse"
   Dark base that bursts into neon. Sci-fi / retro-analog.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Grotesk:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- core space palette ---- */
  --void:        #06060d;   /* deepest background */
  --space:       #0a0a14;   /* base surface */
  --space-2:     #11111f;   /* elevated panel */
  --space-3:     #181828;   /* hover / card */
  --hairline:    rgba(180, 200, 255, 0.10);
  --hairline-2:  rgba(180, 200, 255, 0.18);

  /* ---- neon signal colors ---- */
  --teal:    #19e3c2;
  --teal-hi: #54ffe4;
  --coral:   #ff5d7a;
  --coral-hi:#ff84a0;
  --magenta: #b14cff;
  --violet:  #7a5cff;
  --yellow:  #ffd23f;
  --blue:    #3aa0ff;

  /* ---- ink ---- */
  --ink:        #f4f1ea;   /* near-white warm */
  --ink-soft:   #b9bdcc;   /* secondary text */
  --ink-faint:  #6c7186;   /* tertiary / meta */

  /* ---- gradients ---- */
  --grad-signal: linear-gradient(110deg, var(--teal), var(--blue) 40%, var(--magenta) 75%, var(--coral));
  --grad-burst:  radial-gradient(120% 120% at 50% 50%, var(--magenta), var(--coral) 35%, var(--yellow) 70%);
  --glow-teal:   0 0 0 1px rgba(25,227,194,.35), 0 0 24px rgba(25,227,194,.35);
  --glow-coral:  0 0 0 1px rgba(255,93,122,.35), 0 0 24px rgba(255,93,122,.35);

  /* ---- type ---- */
  --font-display: 'Syne', sans-serif;
  --font-ui:      'Space Grotesk', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ---- spacing rhythm ---- */
  --gutter: clamp(20px, 5vw, 64px);
  --r-card: 16px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- reusable type classes ---- */
.t-mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: var(--grad-signal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- monogram helper: recolor the white SVG via mask ---- */
.am-monogram {
  display: inline-block;
  background-color: var(--ink);
  -webkit-mask: var(--am-mask) center / contain no-repeat;
  mask: var(--am-mask) center / contain no-repeat;
}

/* ---- buttons ---- */
.btn {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--ink);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .25s var(--ease-spring), background .2s, border-color .2s, box-shadow .25s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--glow-teal); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--solid { background: var(--ink); color: var(--void); border-color: var(--ink); }
.btn--solid:hover { background: var(--teal); border-color: var(--teal); color: var(--void); }

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--space-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

::selection { background: var(--teal); color: var(--void); }