/* ╔══════════════════════════════════════════════════════════════╗
   ║  sparrofox-brand.css — Single Source of Truth               ║
   ║  Loaded by ALL Sparrofox apps (main site + Docker apps)     ║
   ║  Served from: https://sparrofox.com/css/sparrofox-brand.css ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── 1. Design Tokens ─── */
:root {
  /* Brand Colors */
  --sf-cream: #F5F0E8;
  --sf-parchment: #EDE5D8;
  --sf-fox: #C86B1F;
  --sf-fox-hover: #B35E1A;
  --sf-amber: #D4872E;
  --sf-brown: #3D2B1F;
  --sf-sage: #4D7C4F;
  --sf-border: #E0D8CC;
  --sf-muted: #6B6560;

  /* Semantic Aliases */
  --sf-bg: var(--sf-cream);
  --sf-bg-card: #fff;
  --sf-text: var(--sf-brown);
  --sf-text-muted: var(--sf-muted);
  --sf-accent: var(--sf-fox);
  --sf-link: var(--sf-fox);
  --sf-link-hover: var(--sf-fox-hover);

  /* Typography */
  --sf-font-serif: 'DM Serif Display', serif;
  --sf-font-sans: 'Inter', sans-serif;
  --sf-font-mono: 'JetBrains Mono', monospace;

  /* Legacy var mappings (for older SaaS apps) */
  --bg: var(--sf-cream);
  --bg-primary: var(--sf-cream);
  --bg-card: #fff;
  --bg-card-hover: var(--sf-parchment);
  --text: var(--sf-brown);
  --text-muted: var(--sf-muted);
  --primary: var(--sf-fox);
  --primary-hover: var(--sf-fox-hover);
  --accent: var(--sf-fox);
  --border: var(--sf-border);

  /* EquineVision custom properties */
  --color-bg-dark: #F5F0E8 !important;
  --color-bg-card: #ffffff !important;
  --color-primary: #C86B1F !important;
  --color-primary-light: #D4872E !important;
  --color-accent: #C86B1F !important;
  --color-text: #3D2B1F !important;
  --color-text-muted: #6B6560 !important;
  --color-success: #4D7C4F !important;
  --color-danger: #ef4444 !important;
  --color-white: #3D2B1F !important;
  --color-teal-300: #D4872E !important;
  --color-teal-400: #C86B1F !important;
  --color-teal-500: #C86B1F !important;
  --color-teal-600: #B35E1A !important;
  --color-teal-700: #9C5016 !important;
  --color-teal-900: #6B3610 !important;
  --color-slate-700: #E0D8CC !important;
  --color-slate-800: #EDE5D8 !important;
  --color-slate-900: #F5F0E8 !important;

  /* Security app custom properties */
  --navy-100: #F5F0E8;
  --navy-200: #EDE5D8;
  --navy-300: #E0D8CC;
  --navy-400: #D4C8B8;
  --navy-500: #9C9488;
  --navy-600: #6B6560;
  --navy-700: #3D2B1F;
  --cream: #F5F0E8;
  --orange: #C86B1F;
}

/* ─── 2. Base Reset ─── */
body {
  background: var(--sf-cream) !important;
  color: var(--sf-brown) !important;
  font-family: var(--sf-font-sans);
  line-height: 1.6;
}

h1, h2, h3, h4, h5 {
  font-family: var(--sf-font-serif) !important;
  color: var(--sf-brown) !important;
}

/* ─── 3. Unified Nav Bar ─── */
.sf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 68px;
  border-bottom: 1px solid var(--sf-border);
  background: rgba(245,240,232,0.95);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 9999;
  font-family: var(--sf-font-sans);
}
.sf-nav .sf-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.sf-nav .sf-logo img { height: 32px; }
.sf-nav .sf-logo span {
  font-family: var(--sf-font-serif);
  font-size: 1.15rem;
  color: var(--sf-brown);
}
.sf-nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--sf-muted);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.02em;
}
.sf-nav-links a:hover { color: var(--sf-brown); }
.sf-nav-links a.active { color: var(--sf-fox); font-weight: 600; }
.sf-nav .sf-cta {
  background: var(--sf-fox);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.sf-nav .sf-cta:hover { background: var(--sf-fox-hover); }
.sf-nav .sf-mobile-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--sf-brown);
}
@media (max-width: 768px) {
  .sf-nav { padding: 0 20px; height: 56px; }
  .sf-nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--sf-cream);
    padding: 16px 20px;
    border-bottom: 1px solid var(--sf-border);
    gap: 12px;
    z-index: 9999;
  }
  .sf-nav-links.open { display: flex; }
  .sf-nav .sf-cta { display: none; }
  .sf-nav .sf-mobile-btn { display: block; }
}

/* ─── 4. Tailwind Dark Utility Overrides ─── */
/* Backgrounds */
.bg-gray-900, .bg-gray-950, .bg-slate-900, .bg-slate-950,
.bg-neutral-900, .bg-zinc-900 {
  background: var(--sf-cream) !important;
}
.bg-gray-800, .bg-slate-800, .bg-neutral-800, .bg-zinc-800 {
  background: var(--sf-parchment) !important;
}
.bg-gray-800\/50, .bg-slate-800\/50,
.bg-gray-900\/80, .bg-gray-900\/50 {
  background: rgba(237,229,216,0.6) !important;
}
.bg-white\/\[0\.03\], .bg-white\/5, .bg-white\/10 {
  background: rgba(255,255,255,0.5) !important;
}
.bg-purple-900\/20, .bg-purple-600\/10, .bg-purple-500\/10 {
  background: rgba(200,107,31,0.08) !important;
}
.bg-green-900\/20, .bg-emerald-900\/20 {
  background: rgba(77,124,79,0.08) !important;
}
.from-gray-900, .from-slate-900 { --tw-gradient-from: #F5F0E8 !important; }
.to-gray-900, .to-gray-950, .to-slate-900 { --tw-gradient-to: #EDE5D8 !important; }
.via-gray-900 { --tw-gradient-via: #F5F0E8 !important; }

/* Text */
.text-white { color: var(--sf-brown) !important; }
.text-white\/80, .text-white\/70, .text-white\/60, .text-white\/90 { color: var(--sf-muted) !important; }
.text-gray-100, .text-gray-200, .text-slate-100, .text-slate-200 { color: var(--sf-brown) !important; }
.text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400 { color: var(--sf-muted) !important; }
.text-gray-500, .text-slate-500 { color: #9C9488 !important; }
.text-purple-400, .text-purple-300, .text-purple-500 { color: var(--sf-fox) !important; }
.text-green-400, .text-green-300, .text-emerald-400 { color: var(--sf-sage) !important; }

/* Borders */
.border-gray-700, .border-gray-800, .border-slate-700, .border-slate-800 {
  border-color: var(--sf-border) !important;
}
.border-white\/10, .border-white\/5, .border-white\/20, .border-white\/\[0\.06\] {
  border-color: var(--sf-border) !important;
}
.border-purple-500\/30, .hover\:border-purple-500\/30:hover, .hover\:border-purple-500\/40:hover {
  border-color: rgba(200,107,31,0.3) !important;
}

/* Custom app classes */
.dc-card { background: #fff !important; border-color: var(--sf-border) !important; }
.dc-border { border-color: var(--sf-border) !important; }
.bg-navy, [class*="bg-navy"] { background: var(--sf-cream) !important; }

/* Buttons — accent colors */
.bg-purple-600, .bg-purple-500 { background: var(--sf-fox) !important; color: #fff !important; }
.hover\:bg-purple-700:hover, .hover\:bg-purple-500:hover { background: var(--sf-fox-hover) !important; }
.bg-gradient-to-r.from-purple-600 { background: var(--sf-fox) !important; }

/* Ring/shadow */
.ring-purple-500\/20 { --tw-ring-color: rgba(200,107,31,0.2) !important; }
.shadow-purple-500\/10, .shadow-purple-500\/20 { --tw-shadow-color: rgba(200,107,31,0.1) !important; }

/* ─── 5. Compiled App Overrides (Vite/React/Tailwind JIT) ─── */
/* These catch arbitrary Tailwind classes like bg-[#hex] */
[style*="background:#0f172a"], [style*="background: #0f172a"],
[style*="background:#0a0e1a"], [style*="background: #0a0e1a"],
[style*="background:#111827"], [style*="background: #111827"],
[style*="background:#0a1628"], [style*="background: #0a1628"],
[style*="background:#0f1729"], [style*="background: #0f1729"] {
  background: var(--sf-cream) !important;
}
[style*="color:#f1f5f9"], [style*="color: #f1f5f9"] {
  color: var(--sf-brown) !important;
}

/* Min-h-screen root containers */
.min-h-screen {
  background: var(--sf-cream) !important;
}
.min-h-screen.bg-\[var\(--color-bg-dark\)\] {
  background: var(--sf-cream) !important;
}

/* ─── 6. Teal → Fox Orange (EquineVision) ─── */
.text-teal-300, .text-teal-400, .text-teal-500 { color: var(--sf-fox) !important; }
.bg-teal-500, .bg-teal-600 { background: var(--sf-fox) !important; }
.bg-teal-600\/10, .bg-teal-600\/20, .bg-teal-600\/30,
.bg-teal-500\/20, .bg-teal-900\/20, .bg-teal-900\/30 {
  background: rgba(200,107,31,0.1) !important;
}
.border-teal-400, .border-teal-500, .border-teal-600, .border-teal-700 {
  border-color: var(--sf-fox) !important;
}
.border-teal-500\/5, .border-teal-500\/10, .border-teal-500\/30,
.border-teal-600\/30, .border-teal-600\/50, .border-teal-700\/50 {
  border-color: rgba(200,107,31,0.2) !important;
}

/* ─── 7. Scrollbar ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sf-parchment); }
::-webkit-scrollbar-thumb { background: #D4C8B8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #B8ACA0; }

/* ─── 8. Utility Classes ─── */
.sf-card {
  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s;
}
.sf-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61,43,31,0.06);
}
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}
.sf-btn-fox { background: var(--sf-fox); color: #fff !important; }
.sf-btn-fox:hover { background: var(--sf-fox-hover); }
.sf-btn-outline {
  background: transparent;
  border: 1px solid var(--sf-border);
  color: var(--sf-brown);
}
.sf-btn-outline:hover { border-color: var(--sf-fox); color: var(--sf-fox); }