/* CoreStilus Design System — style.css */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --yellow:          #FACC15;
  --primary-color:   #FACC15;
  --primary-hover:   #EAB308;
  --yellow-light:    #FEF08A;
  --yellow-dark:     #B45309;
  --primary-text:    #000000;

  --bg-primary:      #FFFFFF;
  --bg-secondary:    #F8FAFC;
  --bg-card:         #FFFFFF;

  --text-primary:    #000000;
  --text-secondary:  #334155;
  --text-muted:      #64748B;
  --text-dim:        #475569;
  --black-mid:       #1F2937;

  --border-primary:  #F1F5F9;
  --border-strong:   #E2E8F0;

  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md:       0 10px 30px rgba(0, 0, 0, 0.08);
  --primary-glow:    0 8px 30px rgba(250, 204, 21, 0.4);
  --primary-glow-hover: 0 12px 40px rgba(250, 204, 21, 0.5);
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(250, 204, 21, 0.3);
  color: #000000;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */
/* Remap font-serif to Plus Jakarta Sans (display weight) */
.font-serif {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Remap font-mono to JetBrains Mono */
.font-mono,
code, pre {
  font-family: 'JetBrains Mono', monospace;
}

/* Gold gradient text utility */
.gold-gradient-text {
  background: linear-gradient(135deg, #FACC15, #B45309);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Monospace caps label */
.mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
}

/* ── Grid Background ────────────────────────────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(250, 204, 21, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 204, 21, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--yellow);
  color: #000000;
  border: none;
  font-weight: 800;
  box-shadow: var(--primary-glow);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--primary-glow-hover);
  opacity: 0.95;
}

.btn-slate {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.btn-slate:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  border-color: var(--yellow);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── War Room Panel (dashboard mockup) ──────────────────────────────────────── */
.war-room-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* ── Accent Utilities ───────────────────────────────────────────────────────── */
.accent-yellow { color: var(--yellow); }
.accent-gold   { color: var(--yellow-dark); }
.border-yellow { border-color: var(--yellow); }

.accent-red    { color: #EF4444; }
.border-red    { border-color: #EF4444; }

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes flowPulse {
  0%   { stroke-dashoffset: 24; opacity: 0.4; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 0.4; }
}

.animate-flow path {
  stroke-dasharray: 12;
  animation: flowPulse 3s linear infinite;
}

@keyframes moveRight {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(300px); opacity: 0; }
}