/*
  Royal Author - Tool Dark Theme
  Applied to all tool pages to match the landing page dark luxury aesthetic.
  Add <link rel="stylesheet" href="/tool-dark.css"> and <script src="/tool-dark.js"> to any tool page.
*/

/* ── Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Base ───────────────────────────────────────────── */
html { background: #000; }
body {
  background: #000 !important;
  color: #f5f5f7 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Minimum font sizes (Apple.com standard) ─────────── */
p, li, td, span, div { font-size: inherit; }
.text-sm  { font-size: 0.9375rem !important; } /* 15px min, was 14px */
.text-xs  { font-size: 0.8125rem !important; } /* 13px min, was 12px */
.text-base { font-size: 1.0625rem !important; } /* 17px */

/* ── Heading typography ─────────────────────────────── */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}

/* ── Nav brand ──────────────────────────────────────── */
nav a[href="/"],
nav a.text-gold[href="/"] {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
}

/* ── All button base ────────────────────────────────── */
button, input[type="submit"], input[type="button"] {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ── Primary / generate buttons ─────────────────────── */
button.bg-navy, button.bg-gold,
button[class*="bg-navy"], button[class*="bg-gold"] {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ── Nav CTA link-buttons ───────────────────────────── */
nav a.rounded-full, nav a.bg-gold, nav a.bg-navy {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Cursor handled by tool-dark.js (canvas-based magical star + gold dust) */

/* ── Page background ────────────────────────────────── */
.bg-cream, .min-h-screen { background: #000 !important; }

/* ── Nav ────────────────────────────────────────────── */
nav.bg-navy, nav.sticky {
  background: rgba(0,0,0,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
nav .text-gold { color: #c9a84c !important; }
nav .text-white\/60, nav a { color: rgba(255,255,255,0.6); }
nav a:hover { color: #c9a84c !important; }
.nav-logo-text { font-family: 'Cormorant Garamond', Georgia, serif !important; }

/* ── Cards / white boxes ────────────────────────────── */
.bg-white {
  background: #0d0d0d !important;
}
.bg-white.border, .bg-white.border-gray-200, .bg-white.rounded-2xl, .bg-white.rounded-xl {
  background: #0d0d0d !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.bg-gray-50, .bg-gray-100 { background: #111 !important; }

/* ── Borders ─────────────────────────────────────────── */
.border-gray-200 { border-color: rgba(255,255,255,0.1) !important; }
.border-gray-100 { border-color: rgba(255,255,255,0.07) !important; }
.border-gray-300 { border-color: rgba(255,255,255,0.14) !important; }

/* Text - minimum contrast for dark backgrounds */
.text-navy { color: #f8f4ed !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: #f0f0f0 !important; }
.text-gray-600 { color: #d1d1d6 !important; }   /* Apple secondary, readable */
.text-gray-500 { color: #c8c8c8 !important; }   /* was 55%, too dark */
.text-gray-400 { color: #b8b8b8 !important; }   /* was 42%, nearly invisible */
.text-gray-300 { color: #a8a8a8 !important; }   /* was 32%, invisible */
.text-white\/80, .text-white\/70 { color: rgba(255,255,255,0.88) !important; }
.text-white\/60, .text-white\/50 { color: rgba(255,255,255,0.75) !important; }
.text-cream { color: #f8f4ed !important; }

/* ── Inputs ─────────────────────────────────────────── */
input, textarea, select {
  background: #111 !important;
  border-color: #2a2a2a !important;
  color: #f5f5f7 !important;
  font-family: 'DM Sans', system-ui, sans-serif;
}
input::placeholder, textarea::placeholder { color: #888 !important; }
input:focus, textarea:focus, select:focus {
  background: #111 !important;
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
  outline: none !important;
}
select option { background: #111; color: #f5f5f7; }

/* ── Mode / pill buttons ─────────────────────────────── */
.mode-btn, .pill, .style-btn, .len-btn, .fmt-btn {
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.75) !important;
}
.mode-btn.active, .pill.active, .len-btn.active {
  background: #c9a84c !important;
  color: #0a0a0a !important;
  border-color: #c9a84c !important;
}
.mode-btn:not(.active):hover, .pill:not(.active):hover, .len-btn:not(.active):hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.style-btn.active, .fmt-btn.active {
  background: #0d0d1e !important;
  border-color: #c9a84c !important;
  color: #fff !important;
}
.style-btn:not(.active):hover, .fmt-btn:not(.active):hover {
  border-color: #c9a84c !important;
  background: rgba(201,168,76,0.06) !important;
}

/* ── Platform tabs ────────────────────────────────────── */
.plat-btn.active {
  background: #0d0d0d !important;
  color: #f5f5f7 !important;
}
.plat-btn:not(.active):hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ── Generate / primary buttons ─────────────────────── */
button.bg-navy, .bg-navy.text-white.rounded-2xl, .bg-navy.text-white.rounded-full {
  background: #c9a84c !important;
  color: #0a0a0a !important;
}
button.bg-navy:hover, .bg-navy.text-white.rounded-2xl:hover {
  background: #d9ba60 !important;
}
button.bg-navy:disabled { background: #333 !important; color: #666 !important; }

/* ── Copy button ─────────────────────────────────────── */
.copy-btn {
  background: transparent !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.7) !important;
}
.copy-btn:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.copy-btn.copied { background: #10b981 !important; color: #fff !important; border-color: #10b981 !important; }

/* ── Vault / gold outline buttons ────────────────────── */
.border-gold { border-color: #c9a84c !important; }
.text-gold { color: #c9a84c !important; }
.border-gold.text-gold:hover { background: #c9a84c !important; color: #0a0a0a !important; }

/* ── Output content areas ────────────────────────────── */
.doc-section { color: rgba(255,255,255,0.8) !important; }
.article-body h2, .article-body h3 { color: #f8f4ed !important; }
.article-body p, .article-body li { color: rgba(255,255,255,0.75) !important; }
.article-body strong { color: #f8f4ed !important; }
.article-body blockquote { color: rgba(255,255,255,0.55) !important; border-color: #c9a84c; }

/* ── Revenue path cards (3-up grid at top of tools) ─── */
.bg-white.border.border-gray-100.rounded-xl {
  background: #0d0d0d !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.w-8.h-0\.5.bg-gold { background: #c9a84c !important; }

/* ── Output header cards (navy bg) ──────────────────── */
.bg-navy.text-white.rounded-2xl {
  background: #0d0d1e !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Step numbers ─────────────────────────────────────── */
.step-num, .phase-num, .q-num {
  background: #c9a84c !important;
  color: #0a0a0a !important;
}
.q-num { background: rgba(255,255,255,0.12) !important; color: #f5f5f7 !important; }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #111; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #c9a84c; border-radius: 3px; }

/* ── Toast ───────────────────────────────────────────── */
#toast > div { background: #0d0d0d !important; border-color: rgba(201,168,76,0.3) !important; }

/* ── Angle badges (podcast) ──────────────────────────── */
.angle-story { background: rgba(254,243,199,0.1) !important; color: #f59e0b !important; }
.angle-insight { background: rgba(219,234,254,0.1) !important; color: #60a5fa !important; }
.angle-debate { background: rgba(252,231,243,0.1) !important; color: #f472b6 !important; }
.angle-profile { background: rgba(209,250,229,0.1) !important; color: #34d399 !important; }
.angle-application { background: rgba(237,233,254,0.1) !important; color: #a78bfa !important; }
.angle-thought-leadership { background: rgba(254,243,199,0.1) !important; color: #f59e0b !important; }
.angle-how-to { background: rgba(219,234,254,0.1) !important; color: #60a5fa !important; }
.angle-narrative { background: rgba(209,250,229,0.1) !important; color: #34d399 !important; }
.angle-case-study { background: rgba(237,233,254,0.1) !important; color: #a78bfa !important; }
.angle-listicle { background: rgba(252,231,243,0.1) !important; color: #f472b6 !important; }

/* ── Consulting tier card ────────────────────────────── */
.tier-card { border-left-color: #c9a84c !important; }

/* ── Italic gold labels ──────────────────────────────── */
.text-gold\/90 { color: rgba(201,168,76,0.9) !important; }
.text-gold\/80 { color: rgba(201,168,76,0.8) !important; }
.bg-gold\/10 { background: rgba(201,168,76,0.08) !important; }
.border-gold\/30 { border-color: rgba(201,168,76,0.3) !important; }