/* =========================================================
   SaasBuddy — Obsidian Premium Theme (v4.0)
   High-contrast, premium editorial palette.
   Deep ink text on warm ivory, bold sapphire accents, gold highlight.
   Type: Space Grotesk (display) + Inter (body)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — deep sapphire (WCAG AAA on ivory) */
  --brand:    #1d4ed8;
  --brand-2:  #1e3a8a;
  --brand-3:  #0b1f4d;
  --accent:   #d4a24c;
  --accent-2: #f2c977;
  --cream:    #fbf7ec;
  --cream-2:  #f2ead1;

  /* Surfaces */
  --bg-1: #f7f4ea;   /* ivory */
  --bg-2: #ece5d0;   /* toned ivory */
  --bg-3: #ddd3b5;
  --text: #0a0f24;   /* near-black ink — strong contrast */
  --text-2:#1b2340;
  --muted:#4a5170;
  --card: #ffffff;
  --ink:  #05070f;   /* pure ink for headings */

  --border:       rgba(10,15,36,0.14);
  --border-hover: rgba(29,78,216,0.55);

  --radius: 18px;
  --shadow:      0 10px 30px -14px rgba(10,15,36,0.28);
  --shadow-lg:   0 26px 60px -22px rgba(10,15,36,0.45);
  --shadow-gold: 0 14px 36px -14px rgba(212,162,76,0.55);

  --grad-brand:  linear-gradient(135deg,#1d4ed8 0%, #1e3a8a 100%);
  --grad-accent: linear-gradient(135deg,#d4a24c 0%, #f2c977 100%);
  --grad-hero:   linear-gradient(135deg,#05070f 0%, #0b1f4d 45%, #1d4ed8 100%);
}

/* Body — warm ivory with a whisper of blue/gold light */
html, body {
  background:
    radial-gradient(1100px 550px at 0% -10%, rgba(29,78,216,0.10), transparent 70%),
    radial-gradient(900px 500px at 110% 30%, rgba(212,162,76,0.15), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
  color: var(--text) !important;
}

body, input, button, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  color: var(--text);
}

p, li, td, span, label { color: var(--text-2) !important; }
small, .muted, .subtitle { color: var(--muted) !important; }

h1, h2, h3, h4, .logo, .hero-title, .section-title, .page-title, .brand, .navbar .logo {
  font-family: 'Space Grotesk','Inter', sans-serif !important;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--ink) !important;
}

/* Nav — ivory glass with a hairline gold underline */
.navbar {
  background: rgba(251,247,236,0.88) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(212,162,76,0.20);
}
.logo, .navbar .logo { color: var(--brand-3) !important; }
.navbar a { color: var(--text) !important; font-weight: 500; }
.navbar a:hover { color: var(--brand) !important; }

/* Buttons */
.btn-primary, .cta-primary, button.primary, .primary-btn {
  background: var(--grad-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.btn-primary:hover, .cta-primary:hover, button.primary:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn-secondary, .cta-secondary {
  background: #fff !important;
  color: var(--brand-3) !important;
  border: 1.5px solid var(--brand-3) !important;
  font-weight: 600 !important;
}
.btn-secondary:hover, .cta-secondary:hover {
  background: var(--brand-3) !important;
  color: #fff !important;
}
.btn-gold, .badge-gold, .cta-gold, .btn-accent {
  background: var(--grad-accent) !important;
  color: #3a2600 !important;
  box-shadow: var(--shadow-gold) !important;
  border:none !important;
  font-weight: 700 !important;
}

/* Hero — deep ink with gold glow, cream text */
.hero, .hero-section, .page-hero {
  background: var(--grad-hero) !important;
  color: var(--cream) !important;
  border-radius: 28px !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212,162,76,0.25);
}
.hero::before, .hero-section::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(212,162,76,0.28), transparent 60%),
    radial-gradient(500px 260px at 90% 80%, rgba(29,78,216,0.45), transparent 60%);
  pointer-events:none;
}
.hero *, .hero-section * { position: relative; }
.hero h1, .hero-title, .hero h2 { color:#ffffff !important; }
.hero p { color: rgba(251,247,236,0.92) !important; }
.hero .accent, .hero-title .accent, .gradient-text, .hero h1 span {
  background: var(--grad-accent) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.badge-premium {
  background: rgba(212,162,76,0.18) !important;
  border: 1px solid rgba(212,162,76,0.55) !important;
  color: var(--accent-2) !important;
  font-weight: 600 !important;
}

/* Cards */
.card, .tool-card, .feature-card, .pricing-card, .stat-card, .modal-content, .panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: var(--text) !important;
}
.card h3, .tool-card h3, .feature-card h3,
.card h4, .tool-card h4, .feature-card h4 { color: var(--ink) !important; }
.card p, .tool-card p, .feature-card p { color: var(--muted) !important; }

.card:hover, .tool-card:hover, .feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-lg) !important;
}

.tool-card { position: relative; overflow: hidden; }
.tool-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-accent);
  opacity:.95;
}

/* Badges */
.badge, .pill, .tag, .status-badge {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.badge-success, .status-active { background: rgba(29,78,216,0.14) !important; color: var(--brand-3) !important; }
.badge-warning, .status-warning { background: rgba(212,162,76,0.24) !important; color:#6a4300 !important; }
.badge-danger, .status-expired  { background: rgba(190,18,60,0.14)  !important; color:#7a0f2c !important; }

/* Forms */
input, textarea, select {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder { color: #8a90a8 !important; }
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(29,78,216,0.18) !important;
}

/* Links */
a { color: var(--brand-2); font-weight: 500; }
a:hover { color: var(--brand); }

/* Section headers */
.section-header h2, .section-title { color: var(--ink) !important; }
.section-header p { color: var(--muted) !important; }

/* Admin sidebar — deep ink navy with gold accents */
.sidebar, .side-nav, .admin-sidebar {
  background: linear-gradient(180deg,#05070f,#0b1f4d) !important;
  color: var(--cream) !important;
  border-right: 1px solid rgba(212,162,76,0.22) !important;
}
.sidebar a, .side-nav a, .admin-sidebar a { color: rgba(251,247,236,0.85) !important; }
.sidebar a.active, .sidebar a:hover { color: var(--accent-2) !important; }

/* Tables */
table { border-collapse: separate; border-spacing: 0; }
th {
  background: var(--brand-3) !important;
  color: var(--cream) !important;
  font-family:'Space Grotesk',sans-serif !important;
  letter-spacing: 0.02em;
}
td { color: var(--text) !important; }
tr:hover td { background: rgba(29,78,216,0.05) !important; }

/* Extension banner */
.extension-banner, .install-banner {
  background: var(--grad-hero) !important;
  color: var(--cream) !important;
  border: 1px solid rgba(212,162,76,0.35) !important;
  border-radius: 18px !important;
}
.extension-banner *, .install-banner * { color: var(--cream) !important; }

/* Kill legacy inline colors */
[style*="#790003"], [style*="#660002"], [style*="#550001"],
[style*="#0d7a5f"], [style*="#064e3b"], [style*="#052e26"],
[style*="#2f6feb"] { color: var(--brand-3) !important; }
[style*="background:#790003"], [style*="background:#0d7a5f"], [style*="background:#064e3b"] {
  background: var(--grad-brand) !important; color:#fff !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }

/* Text selection */
::selection { background: var(--accent); color: var(--ink); }

/* Subtle animation */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero .badge, .hero-badge, .badge-premium { animation: floaty 4s ease-in-out infinite; }