/* ============================================================
   ToolStackAI multi-tenant LIGHT theme
   - Per-site brand colors flow in via CSS variables (set by shared.js)
   - Overrides legacy dark Tailwind classes to render in light mode
   ============================================================ */

:root {
  --brand-primary:   #6366f1;
  --brand-secondary: #8b5cf6;
  --brand-accent:    #f59e0b;

  --bg-page:    #fafafa;
  --bg-surface: #ffffff;
  --bg-soft:    #f5f5f7;
  --bg-muted:   #eef0f4;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --border-soft:   #ececf0;
  --border-strong: #d4d4d8;
}

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
html, body { background: var(--bg-page); color: var(--text-primary); margin: 0; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Per-site gradient (used in headlines / logos) */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 50%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero "glow" - subtle radial wash of the brand primary */
.hero-glow {
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--brand-primary) 18%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-page) 100%);
}

/* Cards / surfaces */
.card-bg     { background: var(--bg-surface); border: 1px solid var(--border-soft); }
.tool-card   { background: var(--bg-surface); border: 1px solid var(--border-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tool-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand-primary) 35%, transparent); box-shadow: 0 12px 32px color-mix(in oklab, var(--brand-primary) 12%, transparent); }
.cat-tile    { background: var(--bg-surface); border: 1px solid var(--border-soft); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cat-tile:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--brand-primary) 40%, transparent); box-shadow: 0 8px 24px color-mix(in oklab, var(--brand-primary) 10%, transparent); }
.post-card   { background: var(--bg-surface); border: 1px solid var(--border-soft); transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15, 23, 42, .08); }

/* Tool logo bubble */
.tool-logo { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: white; flex-shrink: 0; }
.tool-logo.big { width: 80px; height: 80px; font-size: 32px; border-radius: 16px; }

/* Article body */
.prose { color: var(--text-primary); max-width: 720px; margin: 0 auto; line-height: 1.75; font-size: 18px; }
.prose h1, .prose h2, .prose h3 { color: var(--text-primary); font-weight: 800; margin: 2em 0 0.8em; line-height: 1.2; }
.prose h1 { font-size: 2.5rem; }
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.25rem; }
.prose p { margin: 1em 0; color: #1f2937; }
.prose a { color: var(--brand-primary); text-decoration: underline; }
.prose img { max-width: 100%; border-radius: 12px; margin: 1.5em 0; }
.prose blockquote { border-left: 4px solid var(--brand-primary); padding-left: 1rem; margin: 1.5em 0; color: #475569; font-style: italic; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.5em; }
.prose li { margin: 0.4em 0; color: #1f2937; }
.prose code { background: var(--bg-muted); padding: 0.1em 0.4em; border-radius: 4px; font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.9em; }
.prose pre { background: #0f172a; color: #e5e7eb; padding: 1em; border-radius: 8px; overflow-x: auto; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   Light-mode overrides for the dark-mode Tailwind utilities
   the existing HTML files use. This lets us flip the whole site
   to light without rewriting every HTML class.
   ============================================================ */

/* Backgrounds */
.bg-black\/40   { background-color: var(--bg-surface) !important; }
.bg-black\/60   { background-color: var(--bg-surface) !important; }
.bg-white\/5    { background-color: var(--bg-soft) !important; }
.bg-white\/10   { background-color: var(--bg-muted) !important; }

/* Borders (the dark theme uses translucent white borders) */
.border-white\/5  { border-color: var(--border-soft) !important; }
.border-white\/10 { border-color: var(--border-soft) !important; }
.border-white\/20 { border-color: var(--border-strong) !important; }

/* Text */
.text-white        { color: var(--text-primary)   !important; }
.text-gray-300     { color: var(--text-secondary) !important; }
.text-gray-400     { color: var(--text-secondary) !important; }
.text-gray-500     { color: var(--text-muted)     !important; }
.text-gray-600     { color: var(--text-muted)     !important; }
.placeholder-gray-400::placeholder { color: var(--text-muted) !important; }
.placeholder-gray-500::placeholder { color: var(--text-muted) !important; }

/* Inputs */
input, textarea, select {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-primary) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* Brand-color accent text — site-specific */
.text-purple-400, .text-purple-300, .text-purple-500 { color: var(--brand-primary) !important; }
.bg-purple-500\/10 { background-color: color-mix(in oklab, var(--brand-primary) 10%, var(--bg-surface)) !important; color: var(--brand-primary) !important; }
.text-blue-400 { color: var(--brand-secondary) !important; }
.text-yellow-400 { color: var(--brand-accent) !important; }

/* Gradient buttons — re-skin to use site colors */
.bg-gradient-to-r.from-purple-500.to-blue-500,
.bg-gradient-to-r.from-purple-500.to-blue-600 {
  background-image: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
  color: #ffffff !important;
}
.bg-gradient-to-br.from-purple-500.to-blue-500 {
  background-image: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
}

/* Header navbar */
nav.sticky { background-color: rgba(255,255,255, 0.85) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-soft); }
nav.sticky.border-b.border-white\/5 { border-bottom-color: var(--border-soft) !important; }

/* Footer */
footer { background-color: var(--bg-surface) !important; border-top: 1px solid var(--border-soft) !important; color: var(--text-secondary); }
footer .border-t.border-white\/5 { border-color: var(--border-soft) !important; }

/* Cookie banner — make it light too */
#cookie-banner { background: var(--bg-surface) !important; border: 1px solid var(--border-soft) !important; box-shadow: 0 16px 40px rgba(15, 23, 42, .12) !important; }
#cookie-banner p { color: var(--text-primary) !important; }

/* Hero stat pill */
.hero-glow .inline-flex.bg-white\/5 {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Tags / chips */
.bg-purple-500\/10 { background-color: color-mix(in oklab, var(--brand-primary) 10%, var(--bg-surface)) !important; }

/* "Every great website" polish — subtle section dividers + smooth focus rings */
section + section { border-color: var(--border-soft) !important; }
*:focus-visible { outline: 2px solid color-mix(in oklab, var(--brand-primary) 60%, transparent); outline-offset: 2px; }

/* Nice card image treatment for tools/posts */
.tool-cover, .post-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

/* Hero CTA hover */
.bg-gradient-to-r.from-purple-500.to-blue-500:hover { filter: brightness(1.05); }