/* public-light.css — light theme for the SUPPORT PUBLIC pages (landing, KB,
   auth). The sp- component styles in support.css are written against the
   --sp-* token set, which defaults to the dark #0e1219 app canvas for the
   logged-in portal. base.html sets <html data-theme="light"> for public
   pages; this sheet redefines the SAME tokens to the ngris.com light values
   (frontend home.css: white bg, #030305 text, brand #2567ff), so every sp-
   component follows without duplicating rules. Loaded ONLY by base.html —
   the portal (app-base.html) never sees it. */

:root[data-theme="light"] {
  --sp-bg: #ffffff;
  --sp-bg-elevated: #f8fafc;
  --sp-bg-card: #ffffff;
  --sp-bg-hover: #f1f5f9;
  --sp-bg-input: #f8fafc;
  --sp-border: rgba(0, 0, 0, 0.08);
  --sp-border-hover: rgba(0, 0, 0, 0.15);
  --sp-text: #030305;
  --sp-text-secondary: #475569;
  --sp-text-muted: #94a3b8;
  --sp-accent: #2567ff;
  --sp-accent-dim: rgba(37, 103, 255, 0.08);
  --sp-accent-hover: #1d4ed8;
  --sp-link: #1d4ed8;          /* accessible brand text on white */
  --sp-cyan: #2567ff;          /* neon accents re-read as brand on white */
  --sp-purple: #1d4ed8;
  --sp-amber: #b45309;
  --sp-emerald: #047857;
  --sp-red: #be123c;
  --sp-code-bg: #f1f5f9;
  --sp-glow: 0 12px 30px rgba(0, 0, 0, 0.09);
  --sp-glow-brand: 0 0 40px rgba(37, 103, 255, 0.12);
  --sp-glass: rgba(255, 255, 255, 0.72);   /* matches home.css site-header */
  --sp-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  --sp-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Cards sit on white — separate by border + shadow, not glass tint. */
:root[data-theme="light"] .sp-card,
:root[data-theme="light"] .kb-topic-card,
:root[data-theme="light"] .kb-card,
:root[data-theme="light"] .sp-cat-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow-sm);
}

/* Category-card icon tiles: fixed padded square with the glyph centered,
   not the bare inline glyph (the dark theme's tinted icon would float
   uncushioned on a solid tile background). Scoped to .sp-cat-icon — the
   plain .sp-icon-* classes (FAQ section headings) keep support.css's
   brand-colored glyph, no background, like ngris.com. */
:root[data-theme="light"] .sp-cat-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 22px;
  margin: 0 auto 14px;
}
:root[data-theme="light"] .sp-cat-icon.sp-icon-cyan   { color: #ffffff; background: #2567ff; }
:root[data-theme="light"] .sp-cat-icon.sp-icon-purple { color: #ffffff; background: #1d4ed8; }
:root[data-theme="light"] .sp-cat-icon.sp-icon-amber  { color: #ffffff; background: #b45309; }
:root[data-theme="light"] .sp-cat-icon.sp-icon-accent { color: #ffffff; background: #5b86ff; }

/* Header wordmark suffix + breadcrumb inherit tokens; keep them readable. */
:root[data-theme="light"] .sp-logo-suffix { color: var(--sp-text-muted); }