/* ═══════════════════════════════════════════════════════════
   SPARROFOX UNIFIED UI — v1.0
   One CSS to rule all apps. Loaded by every Sparrofox service.
   Host: /css/sparrofox-ui.css on dragon-shop (port 3071)
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Palette */
  --sf-cream: #F5F0E8;
  --sf-cream-light: #FAF6F0;
  --sf-parchment: #EDE5D8;
  --sf-sand: #DDD4C4;
  --sf-border: #D6CBBA;
  --sf-border-hover: #C8BBAA;
  --sf-fox: #C86B1F;
  --sf-fox-hover: #B55E1A;
  --sf-fox-light: #D4872E;
  --sf-fox-glow: rgba(200,107,31,0.12);
  --sf-fox-glow-strong: rgba(200,107,31,0.22);
  --sf-brown: #3D2B1F;
  --sf-brown-light: #5A4636;
  --sf-sage: #4D7C4F;
  --sf-sage-light: #6B9E6D;

  /* Semantic */
  --sf-bg: var(--sf-cream);
  --sf-bg-card: #FFFFFF;
  --sf-bg-input: var(--sf-cream-light);
  --sf-text: var(--sf-brown);
  --sf-text-body: #3A3A35;
  --sf-text-muted: #7A7268;
  --sf-text-light: #9C9488;
  --sf-success: var(--sf-sage);
  --sf-warning: var(--sf-fox-light);
  --sf-danger: #B54040;
  --sf-info: var(--sf-sage);

  /* Typography */
  --sf-font-serif: 'DM Serif Display', Georgia, serif;
  --sf-font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --sf-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radii */
  --sf-radius-sm: 6px;
  --sf-radius: 10px;
  --sf-radius-lg: 14px;
  --sf-radius-xl: 20px;
  --sf-radius-full: 9999px;

  /* Shadows */
  --sf-shadow-sm: 0 1px 3px rgba(61,43,31,0.06);
  --sf-shadow: 0 4px 16px rgba(61,43,31,0.08);
  --sf-shadow-lg: 0 12px 40px rgba(61,43,31,0.1);

  /* === Legacy var mapping for existing apps === */
  --primary: var(--sf-fox);
  --primary-dark: var(--sf-fox-hover);
  --primary-light: var(--sf-fox-light);
  --bg: var(--sf-cream);
  --bg-primary: var(--sf-cream);
  --bg-secondary: var(--sf-parchment);
  --bg-card: var(--sf-bg-card);
  --bg-card-hover: var(--sf-cream-light);
  --bg-input: var(--sf-bg-input);
  --text: var(--sf-text);
  --text-primary: var(--sf-text);
  --text-secondary: var(--sf-text-body);
  --text-muted: var(--sf-text-muted);
  --text-dim: var(--sf-text-light);
  --text-light: var(--sf-text-light);
  --border: var(--sf-border);
  --border-hover: var(--sf-border-hover);
  --success: var(--sf-success);
  --warning: var(--sf-warning);
  --danger: var(--sf-danger);
  --accent: var(--sf-fox);
  --accent-hover: var(--sf-fox-light);
  --accent-glow: var(--sf-fox-glow);
  --info: var(--sf-info);
  --nav-bg: rgba(245,240,232,0.92);
  --nav-border: var(--sf-border);
  --section-alt: var(--sf-parchment);
  --footer-bg: var(--sf-parchment);
  --pill-bg: var(--sf-parchment);
  --pill-text: #6B5545;
  --input-bg: var(--sf-bg-input);
  --input-border: var(--sf-border);
  --card-shadow: var(--sf-shadow-sm);

  /* Dragon legacy overrides */
  --dragon-red: var(--sf-fox);
  --dragon-orange: var(--sf-fox-light);
}

/* ── Base Reset ── */
body {
  background: var(--sf-bg) !important;
  color: var(--sf-text) !important;
  font-family: var(--sf-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Override dark backgrounds ── */
.animated-gradient {
  background: var(--sf-cream) !important;
  animation: none !important;
}
.glass, .glass-dark {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: var(--sf-border) !important;
}

/* ── Typography overrides ── */
.gradient-text, .fire-text, .fox-text, .heading-gradient {
  background: linear-gradient(135deg, var(--sf-fox) 0%, var(--sf-fox-light) 50%, var(--sf-fox) 100%) !important;
  background-size: 200% auto;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: none !important;
}

/* White text → dark text (for dark-themed apps going light) */
.text-white { color: var(--sf-text) !important; }
.text-white\/80 { color: var(--sf-text-body) !important; }
.text-white\/60 { color: var(--sf-text-muted) !important; }
.text-white\/40, .text-white\/30 { color: var(--sf-text-light) !important; }

/* ── Gradient overrides ── */
.fire-gradient, .fox-gradient {
  background: linear-gradient(135deg, var(--sf-fox) 0%, var(--sf-fox-light) 100%) !important;
}

/* Semi-transparent overlays */
.bg-white\/10, .bg-white\/20 { background: var(--sf-fox-glow) !important; }
.bg-black\/20 { background: rgba(61,43,31,0.06) !important; }

/* ── Card System ── */
.sf-card, .dc-card, .t-card {
  background: var(--sf-bg-card) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-sm);
  transition: all 0.25s ease;
}
.sf-card:hover, .dc-card:hover, .t-card:hover,
.card-hover:hover {
  box-shadow: var(--sf-shadow) !important;
  transform: translateY(-2px) !important;
}

/* ── Buttons ── */
.btn-primary, .sf-btn-primary {
  background: var(--sf-fox) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--sf-radius-sm);
  font-weight: 600;
  transition: all 0.25s;
}
.btn-primary:hover, .sf-btn-primary:hover {
  background: var(--sf-fox-hover) !important;
  box-shadow: 0 4px 16px var(--sf-fox-glow-strong);
  transform: translateY(-1px);
}
.btn-secondary, .sf-btn-secondary {
  background: var(--sf-bg-card) !important;
  color: var(--sf-text) !important;
  border: 1.5px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-sm);
}
.btn-secondary:hover, .sf-btn-secondary:hover {
  border-color: var(--sf-fox) !important;
  color: var(--sf-fox) !important;
}

/* ── Inputs ── */
input, textarea, select {
  background: var(--sf-bg-input) !important;
  border: 2px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-sm) !important;
  color: var(--sf-text) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--sf-fox) !important;
  box-shadow: 0 0 0 3px var(--sf-fox-glow) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--sf-text-light) !important;
}

/* ── Pills / Tags ── */
.sf-pill, .dc-pill, .t-pill, .token-badge {
  background: var(--sf-parchment) !important;
  color: #6B5545 !important;
  border-radius: var(--sf-radius-full);
  border: 1px solid var(--sf-border);
  font-size: 0.8rem;
  font-weight: 500;
}

/* ── Nav / Header ── */
nav, .header, .sf-nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--sf-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.logo {
  color: var(--sf-fox) !important;
  font-weight: 700;
}

/* ── Footer ── */
footer, .footer {
  background: var(--sf-parchment) !important;
  border-top: 1px solid var(--sf-border) !important;
  color: var(--sf-text-muted) !important;
}

/* ── Sections ── */
.dc-section-alt, .t-section-alt {
  background: var(--sf-parchment) !important;
  border-color: var(--sf-border) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(61,43,31,0.04); }
::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sf-border-hover); }

/* ── Glow / Shadow overrides ── */
.fire-glow {
  box-shadow: 0 0 20px var(--sf-fox-glow), 0 0 40px rgba(200,107,31,0.06) !important;
}

/* ── Color utility overrides ── */
.text-orange-400, .text-orange-500, .text-orange-600,
.text-red-500, .text-red-600, .text-amber-400 { color: var(--sf-fox) !important; }
.bg-orange-500, .bg-red-500 { background: var(--sf-fox) !important; }
.border-orange-500, .border-red-500 { border-color: var(--sf-fox) !important; }
.text-emerald-400, .text-emerald-500, .text-green-500 { color: var(--sf-sage) !important; }
.bg-emerald-500, .bg-green-400 { background: var(--sf-sage) !important; }
.bg-red-400 { background: var(--sf-danger) !important; }
.bg-yellow-400 { background: var(--sf-warning) !important; }

/* Tailwind dark color classes → warm equivalents */
.from-amber-500 { --tw-gradient-from: var(--sf-fox) !important; }
.from-orange-500 { --tw-gradient-from: var(--sf-fox) !important; }
.from-red-500, .from-rose-500 { --tw-gradient-from: var(--sf-danger) !important; }
.from-emerald-500, .from-green-500 { --tw-gradient-from: var(--sf-sage) !important; }
.from-blue-500, .from-indigo-500, .from-cyan-500 { --tw-gradient-from: #5B7A94 !important; }
.from-violet-500 { --tw-gradient-from: #7B6B8D !important; }

/* ══════════════════════════════════════════════════════════
   CUSTOM SVG ICON SYSTEM
   Usage: <span class="sf-icon sf-icon-award"></span>
   Sizes: sf-icon-sm (24px), sf-icon (32px), sf-icon-lg (48px), sf-icon-xl (64px)
   ══════════════════════════════════════════════════════════ */

.sf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sf-icon-sm { width: 24px; height: 24px; }
.sf-icon-lg { width: 48px; height: 48px; }
.sf-icon-xl { width: 64px; height: 64px; }

/* Icon containers with backgrounds */
.sf-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sf-radius);
  padding: 10px;
}
.sf-icon-box.fox { background: var(--sf-fox); }
.sf-icon-box.sage { background: var(--sf-sage); }
.sf-icon-box.parchment { background: var(--sf-parchment); border: 1px solid var(--sf-border); }

/* All icons as Gemini-generated custom assets — hosted from /assets/icons/ */

.sf-icon-award { background-image: url("/assets/icons/award.png"); }
.sf-icon-contract { background-image: url("/assets/icons/contract.png"); }
.sf-icon-classifier { background-image: url("/assets/icons/classifier.png"); }
.sf-icon-review { background-image: url("/assets/icons/review.png"); }
.sf-icon-jobdesc { background-image: url("/assets/icons/jobdesc.png"); }
.sf-icon-proposal { background-image: url("/assets/icons/proposal.png"); }
.sf-icon-reports { background-image: url("/assets/icons/reports.png"); }
.sf-icon-assistant { background-image: url("/assets/icons/assistant.png"); }
.sf-icon-docforge { background-image: url("/assets/icons/docforge.png"); }
.sf-icon-vision { background-image: url("/assets/icons/vision.png"); }
.sf-icon-bolt { background-image: url("/assets/icons/bolt.png"); }
.sf-icon-cog { background-image: url("/assets/icons/cog.png"); }
.sf-icon-shield { background-image: url("/assets/icons/shield.png"); }
.sf-icon-chat { background-image: url("/assets/icons/chat.png"); }
.sf-icon-mail { background-image: url("/assets/icons/mail.png"); }
.sf-icon-calc { background-image: url("/assets/icons/calc.png"); }
.sf-icon-fox { background-image: url("/assets/icons/fox.png"); }
.sf-icon-check { background-image: url("/assets/icons/check.png"); }
.sf-icon-x { background-image: url("/assets/icons/cross.png"); }
.sf-icon-arrow { background-image: url("/assets/icons/arrow-right.png"); }
.sf-icon-star { background-image: url("/assets/icons/star.png"); }

/* White icon variants (for use on fox/sage backgrounds) */
.sf-icon-box.fox .sf-icon,
.sf-icon-box.sage .sf-icon,
.sf-icon.white {
  filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════
   STATUS / FEEDBACK STYLING
   ══════════════════════════════════════════════════════════ */
.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--sf-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}
.sf-badge.fox { background: var(--sf-fox-glow); color: var(--sf-fox); border: 1px solid rgba(200,107,31,0.2); }
.sf-badge.sage { background: rgba(77,124,79,0.12); color: var(--sf-sage); border: 1px solid rgba(77,124,79,0.2); }
.sf-badge.danger { background: rgba(181,64,64,0.12); color: var(--sf-danger); border: 1px solid rgba(181,64,64,0.2); }

/* ══════════════════════════════════════════════════════════
   ANIMATION
   ══════════════════════════════════════════════════════════ */
.sf-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sf-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   STAT CARDS (blog pages)
   ══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--sf-bg-card) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-lg);
  color: var(--sf-text) !important;
}
.stat-number {
  color: var(--sf-fox) !important;
  -webkit-text-fill-color: var(--sf-fox) !important;
  background: none !important;
}