/* styles/tokens.css */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --cobalt:        #0047ab;
  --cobalt-light:  #4169e1;
  --cobalt-deep:   #002d6e;
  --cobalt-faint:  rgba(65,105,225,0.08);

  --cyan-neon:     #00d4ff;
  --cyan-faint:    rgba(0,212,255,0.10);

  --crimson:       #dc143c;
  --crimson-faint: rgba(220,20,60,0.08);
  --crimson-glow:  rgba(220,20,60,0.25);

  --bg-base:       #040812;
  --bg-surface:    #070f1f;
  --bg-card:       rgba(7,15,31,0.85);

  --text-primary:   #e8edf8;
  --text-secondary: #8fa0c0;
  --text-muted:     #4a5880;

  --border-subtle: rgba(65,105,225,0.18);
  --border-active: rgba(65,105,225,0.45);
  --border-glow:   rgba(0,212,255,0.4);

  --font-display:  'Orbitron',       monospace;
  --font-body:     'Rajdhani',       sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  --glow-cobalt:  0 0 28px rgba(65,105,225,0.35), 0 0 56px rgba(65,105,225,0.12);
  --glow-cyan:    0 0 20px rgba(0,212,255,0.4),   0 0 48px rgba(0,212,255,0.12);
  --glow-crimson: 0 0 20px var(--crimson-glow),   0 0 48px rgba(220,20,60,0.08);
  --card-shadow:  0 4px 24px rgba(0,0,0,0.45), 0 1px 0 var(--border-subtle);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,  rgba(0,71,171,0.20)  0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(0,71,171,0.13)  0%, transparent 60%),
    radial-gradient(ellipse 35% 35% at 80% 15%,  rgba(220,20,60,0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.mms-app { position: relative; z-index: 1; min-height: 100vh; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spin { animation: spin 0.8s linear infinite; }

/* ── Icon sizes ─────────────────────────────────────────────── */
.icon-svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 15px; height: 15px; }
.icon-lg  { width: 28px; height: 28px; }

/* ── Shared brand text ──────────────────────────────────────── */
.brand-mms {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.brand-accounts {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-neon);
}

/* ── Responsive shared ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  }