/* Shared design tokens for site and admin — McGate Technologies Design System v1.0 */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* Light-mode tokens (defaults) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-card: #f3f4f6;
  --input-bg: #f1f5f9;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --placeholder: #9ca3af;
  --border: #d1d5db;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --success: #16a34a;
  --error: #ef4444;
  --warning: #f59e0b;

  /* Legacy tokens kept for backward compat (mapped to new tokens) */
  --color-bg: var(--bg-primary);
  --color-surface: var(--bg-card);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-border: rgba(0,0,0,0.08);
  --color-primary: var(--accent);
  --color-secondary: var(--accent-hover);
  --color-accent: #ffffff;
}

/* Protocol: Day (Light Mode) alias */
[data-protocol="day"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-card: #f3f4f6;
  --input-bg: #f1f5f9;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --placeholder: #9ca3af;
  --border: #d1d5db;
}

/* Protocol: Midnight */
[data-protocol="midnight"] {
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-card: #0a0a0b;
  --input-bg: #0f1724;
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #4b5563;
  --border: rgba(255,255,255,0.05);
  --color-primary: #7000ff;
  --color-secondary: #00f2ff;
}

/* Legacy dark class compat + McGate dark defaults */
.dark {
  --bg-primary: #0B0F19;
  --bg-secondary: #111827;
  --bg-card: #1F2937;
  --input-bg: #1E293B;
  --text-primary: #F9FAFB;
  --text-secondary: #D1D5DB;
  --text-muted: #9CA3AF;
  --placeholder: #6B7280;
  --border: #374151;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
}

/* ── GLASS PANEL ───────────────────────── */
.glass-panel {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
}
[data-protocol="day"] .glass-panel {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

/* ── SEMANTIC UTILITIES ───────────────── */
.text-foreground { color: var(--text-primary) !important; }
.bg-surface { background: var(--bg-card) !important; }
.border-weak { border-color: var(--border) !important; }
.text-muted { color: var(--color-muted) !important; }
.text-accent { color: var(--color-accent) !important; }

/* ── FORM INPUT DEFAULTS ──────────────── */
input, textarea, select {
  font-family: inherit;
  color: var(--text-primary);
  background: var(--input-bg);
}
input::placeholder, textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

/* ── NEON GLOW UTILITIES ──────────────── */
.neon-text-glow {
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.5), 0 0 40px rgba(0, 242, 255, 0.15);
}

.neon-box-glow {
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.3), 0 0 60px rgba(0, 242, 255, 0.1);
}

/* ── ANIMATED GRADIENT BORDER ─────────── */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-border {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-primary));
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* ── PULSE ANIMATION ──────────────────── */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── GRID ANIMATION ───────────────────── */
@keyframes gridMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

/* ── PULSE SLOW ANIMATION ─────────────── */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.animate-pulse-slow {
  animation: pulse-slow 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── COMPATIBILITY ────────────────────── */
.text-white { color: var(--text-primary) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.bg-brand-black { background: var(--bg-primary) !important; }
.bg-brand-dark { background: var(--bg-card) !important; }

.bg-white\/5 { background-color: rgba(255,255,255,0.05) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,0.10) !important; }
[data-protocol="day"] .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }
[data-protocol="day"] .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; }

.brand-neonBlue { color: var(--accent) !important; }
.bg-brand-neonBlue { background: var(--accent) !important; }

/* Backward-compatible brand utility classes used in components */
.bg-brand-bg { background: var(--bg-primary) !important; }
.bg-brand-surface { background: var(--bg-card) !important; }
.text-brand-text { color: var(--text-primary) !important; }
.text-brand-muted { color: var(--text-muted) !important; }
.border-brand-border { border-color: var(--border) !important; }
.text-brand-neonBlue { color: var(--accent) !important; }
.bg-brand-neonBlue\/30 { background-color: rgba(37,99,235,0.3) !important; }
.bg-brand-neonBlue\/10 { background-color: rgba(37,99,235,0.1) !important; }
.border-brand-neonBlue\/30 { border-color: rgba(37,99,235,0.3) !important; }

/* Ensure older token names map to new variables for broad compatibility */
.brand-accent { color: var(--accent) !important; }
.brand-accent-hover { color: var(--accent-hover) !important; }

/* Ensure button text utilities used across components remain readable in dark mode */
.text-brand-bg { color: var(--color-accent, #ffffff) !important; }
.text-black { color: #000 !important; }
.dark .text-black { color: var(--text-primary) !important; }

/* Helper for subtle translucent surfaces in both modes */
.bg-surface-50 { background-color: rgba(255,255,255,0.03) !important; }
.dark .bg-surface-50 { background-color: rgba(0,0,0,0.04) !important; }

/* ── LOADING SKELETON ─────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-border) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}