/* ==============================================
   SHARED — OrbitAxiom Design Tokens + Base Styles
   ============================================== */

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

:root {
  /* ── Core palette ── */
  --bg-body:       #0B1220;
  --bg-primary:    #0B1220;
  --bg-secondary:  #0F1729;
  --bg-card:       rgba(17, 27, 46, 0.85);
  --bg-card-hover: rgba(22, 35, 56, 0.85);
  --bg-input:      #0B1220;

  /* Glass */
  --glass-border:  rgba(31, 43, 66, 0.8);
  --glass-blur:    20px;

  /* ── Text ── */
  --text-primary:    #E8ECF1;
  --text-secondary:  #8A94A6;
  --text-muted:      #5A6478;
  --text-on-accent:  #ffffff;

  /* ── Accents — OrbitAxiom Blue ── */
  --accent-primary:   #3B82F6;
  --accent-secondary: #2563EB;
  --accent-cyan:      #06b6d4;
  --accent-emerald:   #10b981;
  --accent-amber:     #f59e0b;
  --accent-rose:      #E5484D;

  /* Accent with alpha */
  --accent-primary-20: rgba(59, 130, 246, 0.20);
  --accent-primary-40: rgba(59, 130, 246, 0.40);
  --accent-cyan-20:    rgba(6, 182, 212, 0.20);
  --accent-emerald-20: rgba(16, 185, 129, 0.20);
  --accent-amber-20:   rgba(245, 158, 11, 0.20);
  --accent-rose-20:    rgba(229, 72, 77, 0.20);

  /* ── Gradient shortcuts ── */
  --gradient-aurora: linear-gradient(135deg, #3B82F6, #2563EB, #1D4ED8);
  --gradient-border: linear-gradient(135deg, rgba(59,130,246,0.6), rgba(37,99,235,0.3), rgba(29,78,216,0.6));
  --gradient-glow:   radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);

  /* ── SWOT colors ── */
  --swot-strength:    #10b981;
  --swot-weakness:    #E5484D;
  --swot-opportunity: #06b6d4;
  --swot-threat:      #F59E0B;

  /* ── Status colors ── */
  --status-waiting:  #5A6478;
  --status-running:  #3B82F6;
  --status-done:     #10b981;
  --status-error:    #E5484D;

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ── Typography ── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;

  --leading-tight:  1.25;
  --leading-normal: 1.6;

  /* ── Borders ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.15);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ── Layout ── */
  --max-width:  1200px;
  --header-h:   64px;
}

/* ── Base ── */
body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
header {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  color: #E8ECF1;
  text-decoration: none;
  letter-spacing: -0.5px;
}

.logo span {
  color: #3B82F6;
}

nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
  margin-left: 24px;
}

nav a:hover {
  color: var(--text-primary);
}

/* ── Main ── */
main {
  flex: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--glass-border);
  padding: 48px 20px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-quote {
  font-style: italic;
  color: var(--accent-cyan);
  font-size: 15px;
  line-height: 1.6;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.footer-info p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-info strong {
  color: var(--text-secondary);
}

.footer-info a {
  color: var(--accent-primary);
  text-decoration: none;
}

.footer-info a:hover {
  text-decoration: underline;
}

.footer-copy {
  font-size: 12px;
  color: var(--text-muted);
}

.footer-copy a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-copy a:hover {
  color: var(--text-secondary);
}

/* ── Keyframes ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  main {
    padding: 24px 16px 60px;
  }
}