/* ════════════════════════════════════════════════════════════
   SIQA Public Pages — editorial overrides
   Loaded ONLY for unauthenticated visitors on public marketing
   pages (about, blog, visibility, terms, privacy), AFTER
   design-system.css and blog.css. Pins the token system to the
   editorial indigo-paper identity used by the landing and auth
   pages, regardless of the data-theme attribute.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Token pinning ─────────────────────── */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg-base:    #f5f5fa;
  --bg-surface: #fdfdff;
  --bg-raised:  #eaeaf4;
  --bg-overlay: #fdfdff;

  --border-faint:   rgba(20,20,43,0.07);
  --border-default: rgba(20,20,43,0.14);
  --border-strong:  rgba(20,20,43,0.26);

  --text-1: #14142b;
  --text-2: #45456b;
  --text-3: #6a6a8e;
  --text-4: #8a8aa8;

  --accent:       #4f46e5;
  --accent-hover: #4338ca;
  --accent-muted: rgba(79,70,229,0.08);

  --green:        #15803d;
  --green-muted:  rgba(34,197,94,0.10);
  --yellow:       #b45309;
  --yellow-muted: rgba(217,119,6,0.10);
  --red:          #dc2626;
  --red-muted:    rgba(220,38,38,0.08);
  --blue:         #4f46e5;
  --blue-muted:   rgba(79,70,229,0.08);

  --glass-bg:        rgba(20,20,43,0.03);
  --glass-bg-md:     rgba(20,20,43,0.05);
  --glass-border:    rgba(20,20,43,0.08);
  --glass-border-md: rgba(20,20,43,0.14);

  --blog-accent:       #4f46e5;
  --blog-accent-hover: #4338ca;
  --blog-accent-muted: rgba(79,70,229,0.08);

  --font:      'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;
  --serif:     'Fraunces', Georgia, serif;

  /* editorial corners: near-square */
  --r1: 2px;
  --r2: 2px;
  --r3: 3px;
  --r4: 3px;

  --shadow-sm: 0 1px 2px rgba(20,20,43,0.06);
  --shadow-md: 4px 4px 0 rgba(20,20,43,0.08);
  --shadow-lg: 6px 6px 0 rgba(20,20,43,0.10);
}

body { background: var(--bg-base); color: var(--text-1); }
::selection { background: var(--accent); color: #f5f5fa; }

/* ── 2. Retire dark-theme atmosphere ──────── */
.bg-orbs, .grain { display: none !important; }

/* editorial paper grain instead */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* light is the only theme here — remove the toggle */
.pub-nav-theme-btn { display: none !important; }

/* ── 3. Editorial typography ──────────────── */
.public-main h1, .public-main h2, .public-main h3,
.blog-header-title, .blog-featured-title, .article-hero-title,
.blog-card-body h3, .author-hero-name, .post-body h2, .post-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.015em;
}
.public-main h1 em, .public-main h2 em,
.blog-header-title em, .article-hero-title em {
  font-style: italic; color: var(--accent);
}
.blog-header-eyebrow, .blog-card-meta, .blog-featured-meta,
.article-hero-meta, .blog-breadcrumb {
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── 4. Public nav — paper + hairline ─────── */
.pub-nav {
  background: rgba(245,245,250,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-faint);
  box-shadow: none;
}
.pub-nav.scrolled {
  background: rgba(245,245,250,.95);
  border-bottom-color: var(--border-default);
  box-shadow: 0 1px 0 rgba(20,20,43,.04);
}
.pub-nav::after { display: none; }
.pub-nav-logo { color: var(--text-1); }
.pub-nav-logo-text { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
.pub-nav-logo-mark {
  background: var(--text-1);
  color: var(--bg-base);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--serif);
}
.pub-nav-logo:hover .pub-nav-logo-mark { box-shadow: none; background: var(--accent); }
.pub-nav-link {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-2);
  border-radius: 2px;
}
.pub-nav-link:hover { color: var(--text-1); background: var(--bg-raised); }
.pub-nav-link.active { color: var(--text-1); background: var(--bg-raised); }
.pub-nav-badge { background: var(--accent); color: #f5f5fa; border-radius: 2px; }
.pub-nav-btn-ghost {
  font-family: var(--font-mono); font-size: 13px;
  background: transparent; color: var(--text-1);
  border: 1px solid var(--border-default); border-radius: 2px;
}
.pub-nav-btn-ghost:hover { background: var(--bg-surface); border-color: var(--text-1); color: var(--text-1); }
.pub-nav-btn-primary {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--text-1); color: var(--bg-base);
  border: 1px solid var(--text-1); border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(20,20,43,.18);
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s, box-shadow .18s;
}
.pub-nav-btn-primary::before { display: none; }
.pub-nav-btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 rgba(20,20,43,.22);
}
.pub-nav-hamburger { border: 1px solid var(--border-default); border-radius: 2px; }
.pub-nav-hamburger span { background: var(--text-1); }

.pub-mobile-menu {
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}
.pub-mobile-menu a {
  font-family: var(--font-mono);
  color: var(--text-1);
  border-bottom: 1px solid var(--border-faint);
  border-radius: 0;
}
.pub-mobile-menu a:hover { background: var(--bg-raised); color: var(--text-1); }
.pub-mobile-menu-divider { background: var(--border-default); }

.skip-link { background: var(--text-1); color: var(--bg-base); font-family: var(--font-mono); }

/* ── 5. Cards & components on paper ───────── */
.blog-card, .blog-card-compact, .blog-author-card, .author-hero-card,
.blog-newsletter, .blog-feedback {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  box-shadow: none;
}
.blog-card:hover, .blog-card-compact:hover {
  border-color: var(--text-1);
  box-shadow: 4px 4px 0 rgba(20,20,43,.10);
  transform: translateY(-2px);
}

/* featured card: ink panel (echoes landing CTA) */
.blog-featured,
[data-theme="light"] .blog-featured,
[data-theme="dark"] .blog-featured {
  background: var(--text-1);
  border: 1px solid var(--text-1);
  border-radius: 3px;
  box-shadow: 6px 6px 0 rgba(20,20,43,.12);
}
.blog-featured-title, .blog-featured-title a { color: #f5f5fa; }
.blog-featured-excerpt { color: rgba(245,245,250,.7); }
.blog-featured-meta, .blog-featured-label { color: rgba(245,245,250,.55); }
.blog-featured-label { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.blog-featured-cta {
  background: var(--bg-base); color: var(--text-1);
  border-radius: 2px; font-family: var(--font-mono);
  box-shadow: 3px 3px 0 rgba(20,20,43,.35);
}
.blog-featured-cta:hover { background: var(--accent-hover); color: var(--bg-base); }

/* cover placeholders: ink with paper mark */
.blog-cover-placeholder, .blog-cover-placeholder-hero {
  background: var(--text-1);
}
.blog-cover-placeholder-mark {
  background: #f5f5fa; color: #14142b;
  font-family: var(--serif); border-radius: 2px; box-shadow: none;
}

/* hero overlays on article images: ink scrim */
.article-hero-overlay {
  background: linear-gradient(0deg, rgba(20,20,43,0.92) 0%, rgba(20,20,43,0.55) 55%, rgba(20,20,43,0.2) 100%);
}

/* avatars */
.avatar-placeholder-sm, .byline-avatar-placeholder,
.blog-card-footer .avatar-placeholder,
.blog-author-card .author-avatar-placeholder {
  background: var(--text-1); color: var(--bg-base);
  font-family: var(--font-mono); border-radius: 50%;
  box-shadow: none;
}

/* buttons inside content (newsletter, search, pagination) */
.blog-newsletter-form button, .blog-search-form button {
  background: var(--text-1); color: var(--bg-base);
  border-radius: 2px; font-family: var(--font-mono);
  border: 1px solid var(--text-1);
  box-shadow: 3px 3px 0 rgba(20,20,43,.15);
}
.blog-newsletter-form button:hover, .blog-search-form button:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.blog-newsletter-form input, .blog-search-form input {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 2px;
  color: var(--text-1);
  font-family: var(--font-mono);
}
.blog-pagination a, .blog-pagination span.current {
  border-radius: 2px; font-family: var(--font-mono);
}
.blog-pagination span.current { background: var(--text-1); color: var(--bg-base); }

/* post body: editorial reading */
.post-body { font-size: 16px; line-height: 1.75; }
.post-body code {
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  color: var(--accent-hover);
  border-radius: 2px;
  font-family: var(--font-mono);
}
.post-body pre { background: var(--text-1); border-radius: 3px; }
.post-body pre code { background: none; border: none; color: rgba(245,245,250,0.90); }
.post-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-surface);
  font-family: var(--serif); font-style: italic;
}
.post-body a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.post-body tr:hover td { background: var(--bg-raised); }

/* tags / chips */
.post-tag, .blog-tag {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-2); border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card:hover, .blog-card-compact:hover { transform: none; }
}