/**
 * SignalPilot Brand Theme
 * Unified design system for signalpilot.io, education.signalpilot.io, and docs.signalpilot.io
 *
 * Usage:
 * 1. Import this CSS file
 * 2. Add signalpilot-theme.js for theme switching
 * 3. Add button with id="themeToggle" for toggle control
 *
 * Version: 1.0.0
 * Updated: 2025-10-28
 */

/* ================================================================
   CSS VARIABLES - DARK MODE (DEFAULT)
   ================================================================ */

:root {
  color-scheme: dark;

  /* Smooth theme transitions */
  transition: background-color 0.3s ease, color 0.3s ease;

  /* ============================================================
     BASE COLORS
     ============================================================ */

  /* Background layers */
  --bg: #05070d;              /* Main background (very dark blue-black) */
  --bg-soft: #0c111c;         /* Slightly elevated surfaces */
  --bg-elev: #101626;         /* Cards, modals, elevated elements */

  /* Text colors */
  --text: #ecf1ff;            /* Primary text (near white with blue tint) */
  --muted: #b7c2d9;           /* Secondary text (muted blue-gray) */
  --muted-2: #8ea0bf;         /* Tertiary text (more muted) */

  /* ============================================================
     BRAND COLORS
     ============================================================ */

  --brand: #5b8aff;           /* Primary brand blue */
  --brand-2: #7b9bff;         /* Secondary brand blue (lighter) */
  --accent: #76ddff;          /* Accent cyan */

  /* ============================================================
     SIGNAL COLORS
     ============================================================ */

  --good: #3ed598;            /* Success/Buy signals (green) */
  --warn: #f9a23c;            /* Warning/Caution (orange) */

  /* ============================================================
     UI SYSTEM
     ============================================================ */

  --radius: 16px;             /* Default border radius */
  --shadow: 0 18px 60px rgba(12, 16, 27, 0.35); /* Card shadow */
  --max: 1160px;              /* Max container width */
  --measure: 68ch;            /* Max text width for readability */

  /* ============================================================
     DECORATIVE
     ============================================================ */

  /* Gradient for headings */
  --grad: linear-gradient(
    90deg,
    #9cc0ff 0%,
    #86a8ff 35%,
    #7ccaff 60%,
    #8ca5ff 85%,
    #b9d4ff 100%
  );

  /* Grid overlay (subtle) */
  --grid-line: rgba(255, 255, 255, 0.08);

  /* Border color */
  --border: rgba(255, 255, 255, 0.12);
}

/* ================================================================
   CSS VARIABLES - LIGHT MODE
   ================================================================ */

html[data-theme="light"] {
  color-scheme: light;

  /* Background layers */
  --bg: #ffffff;              /* Pure white background */
  --bg-soft: #f8fafc;         /* Slightly gray */
  --bg-elev: #f1f5f9;         /* Elevated surfaces */

  /* Text colors */
  --text: #0f172a;            /* Dark slate text */
  --muted: #475569;           /* Muted gray */
  --muted-2: #334155;         /* Darker muted */

  /* Brand colors (adjusted for light mode) */
  --brand: #3b82f6;           /* Slightly darker blue */
  --brand-2: #2563eb;         /* Even darker blue */
  --accent: #0ea5e9;          /* Darker cyan */

  /* Signal colors */
  --good: #10b981;            /* Darker green */
  --warn: #f97316;            /* Darker orange */

  /* UI adjustments */
  --border: rgba(30, 41, 59, 0.2);
  --grid-line: rgba(30, 41, 59, 0.06);
}

/* ================================================================
   LIGHT MODE TEXT FIXES
   ================================================================ */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #0f172a !important;
}

/* Brand in header stays white - header is always dark */
html[data-theme="light"] .sp-header .brand {
  color: #fff !important;
}

/* Badge visibility in light mode */
html[data-theme="light"] .badge {
  color: #0369a1 !important;
  background: rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
}

/* Fix inline white text in light mode */
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: white"],
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #ffffff"] {
  color: #0f172a !important;
}

html[data-theme="light"] strong[style*="color:#fff"],
html[data-theme="light"] strong[style*="color: #fff"] {
  color: #0f172a !important;
}

/* Keep buttons white on colored backgrounds */
html[data-theme="light"] .btn-primary {
  color: #ffffff !important;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */

h1, h2, h3 {
  font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  text-wrap: balance;
  letter-spacing: 0.02em;
}

p, li {
  text-wrap: pretty;
}

/* ================================================================
   BRAND LOGO
   ================================================================ */

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-family: 'Gugi', system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.4rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Brand responsive breakpoints */
@media (max-width: 1600px) {
  .brand {
    font-size: 1.3rem;
  }
}

@media (max-width: 1400px) {
  .brand {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .brand {
    font-size: 1.2rem;
    padding-left: 0.5rem;
  }
}

/* Header stays dark in both modes - keep text/icons white */
.sp-header .brand,
.sp-header .brand span {
  color: #fff !important;
}

#theme-icon {
  color: #fff !important;
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */

.container {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding-left: calc(clamp(14px, 4vw, 22px) + env(safe-area-inset-left));
  padding-right: calc(clamp(14px, 4vw, 22px) + env(safe-area-inset-right));
}

.section {
  padding: clamp(1.6rem, 5.5vw, 3rem) 0;
}

.stack {
  display: grid;
  gap: 1.2rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid.auto-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.measure {
  max-width: var(--measure);
}

/* ================================================================
   BUTTONS
   ================================================================ */

a, button {
  min-height: 44px; /* Accessibility: minimum touch target */
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.12rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.04s ease;

  /* Touch optimization */
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  /* Performance */
  will-change: transform;
  backface-visibility: hidden;
}

.btn:active {
  transform: translateY(1px);
}

/* Button variants */
.btn-primary {
  background: linear-gradient(115deg, var(--brand), var(--brand-2));
  color: #fff;
}

.btn-ghost {
  color: #9fdcff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .btn-ghost {
  color: #0f1524;
  border-color: #d7def0;
  background: #f6f8fc;
}

.btn-crypto {
  background: linear-gradient(120deg, #ffd493, #ffb347);
  color: #231800;
}

.btn-sm {
  padding: 0.5rem 0.8rem;
  font-size: 0.92rem;
  line-height: 1.1;
}

/* ================================================================
   CARDS
   ================================================================ */

.card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  border-radius: 16px;
  padding: 1.05rem;
  box-shadow: var(--shadow);
}

html[data-theme="light"] .card {
  border-color: rgba(10, 20, 40, 0.10);
  background: linear-gradient(
    180deg,
    rgba(10, 20, 40, 0.03),
    rgba(10, 20, 40, 0.01)
  );
}

/* ================================================================
   BADGES & PILLS
   ================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #bfe7ff;
  background: rgba(118, 221, 255, 0.18);
  border: 1px solid rgba(118, 221, 255, 0.28);
  font-family: 'Gugi', system-ui, -apple-system, sans-serif !important;
}

.mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ================================================================
   RESPONSIVE UTILITIES
   ================================================================ */

@media (max-width: 768px) {
  :root {
    --max: calc(100vw - 2rem);
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
  }

  .btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
  }
}

/* ================================================================
   SMOOTH THEME TRANSITIONS
   ================================================================ */

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Screen reader only */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}