/* ===================================================================
   Lensari Extension Pages: Design System Override
   Technical, precise, digital. Like a well-documented API.
   Loaded AFTER style.css to override the editorial palette.

   Canonical tokens from design-system.md:
     --ls-base, --ls-surface, --ls-text, --ls-label,
     --ls-accent, --ls-brand, --ls-divider
   Website additions (not in design-system.md):
     --ls-bg-card, --ls-surface-raised, --ls-brand-hover,
     --ls-accent-dim, --ls-mono, --ls-sev-*
   =================================================================== */

/* --- Light mode (default) --- */
:root {
  --ls-base:           #F0F4F3;
  --ls-bg-card:        #ffffff;
  --ls-surface:        #CDD6D2;
  --ls-surface-raised: #E3E8E5;
  --ls-text:           #1A2228;
  --ls-label:          #2A363C;
  --ls-brand:          #1D6B5C;
  --ls-brand-hover:    #165A4C;
  --ls-accent:         #1A7A6A;
  --ls-accent-dim:     rgba(26, 122, 106, 0.12);
  --ls-divider:        #E0E6E3;
  --ls-mono:           "Consolas", "SF Mono", "Cascadia Code", "Liberation Mono", Menlo, monospace;

  /* severity (light) */
  --ls-sev-high-bg:    #fce4ec;
  --ls-sev-high-text:  #b71c1c;
  --ls-sev-med-bg:     #fff3e0;
  --ls-sev-med-text:   #e65100;
  --ls-sev-low-bg:     #e8f5e9;
  --ls-sev-low-text:   #2e7d32;
}

/* --- Dark mode (system preference) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ls-base:           #0A0E12;
    --ls-bg-card:        #111820;
    --ls-surface:        #1A2530;
    --ls-surface-raised: #1F2A35;
    --ls-text:           #EDF2F7;
    --ls-label:          #8FA3B0;
    --ls-brand:          #3DAA8C;
    --ls-brand-hover:    #4DBFA0;
    --ls-accent:         #0CF0DD;
    --ls-accent-dim:     rgba(12, 240, 221, 0.12);
    --ls-divider:        #1A2530;

    --ls-sev-high-bg:    #3d1520;
    --ls-sev-high-text:  #ef9a9a;
    --ls-sev-med-bg:     #3d2a10;
    --ls-sev-med-text:   #ffcc80;
    --ls-sev-low-bg:     #1a3020;
    --ls-sev-low-text:   #a5d6a7;
  }
}

/* --- Dark mode (manual toggle) --- */
[data-theme="dark"] {
  --ls-base:           #0A0E12;
  --ls-bg-card:        #111820;
  --ls-surface:        #1A2530;
  --ls-surface-raised: #1F2A35;
  --ls-text:           #EDF2F7;
  --ls-label:          #8FA3B0;
  --ls-brand:          #3DAA8C;
  --ls-brand-hover:    #4DBFA0;
  --ls-accent:         #0CF0DD;
  --ls-accent-dim:     rgba(12, 240, 221, 0.12);
  --ls-divider:        #1A2530;

  --ls-sev-high-bg:    #3d1520;
  --ls-sev-high-text:  #ef9a9a;
  --ls-sev-med-bg:     #3d2a10;
  --ls-sev-med-text:   #ffcc80;
  --ls-sev-low-bg:     #1a3020;
  --ls-sev-low-text:   #a5d6a7;
}

/* === Override base style.css variables === */
body {
  background: var(--ls-base);
  color: var(--ls-text);
}

a { color: var(--ls-brand); }
a:hover { color: var(--ls-brand-hover); }

/* === Brand mark === */
.site-nav .logo {
  font-family: var(--ls-mono);
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ls-brand);
}
.site-nav .logo:hover { color: var(--ls-brand-hover); }

/* === Theme toggle === */
.theme-toggle {
  background: none;
  border: 1px solid var(--ls-divider);
  border-radius: 6px;
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.75rem;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.theme-toggle:hover { border-color: var(--ls-brand); }
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--ls-label);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle:hover svg { stroke: var(--ls-brand); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* === Nav / header === */
.site-nav {
  background: var(--ls-base);
  border-bottom: 1px solid var(--ls-divider);
}
.site-nav nav a { color: var(--ls-label); }
.site-nav nav a:hover { color: var(--ls-text); }
.nav-toggle svg { stroke: var(--ls-text); }
.nav-dropdown-menu-inner {
  background: var(--ls-bg-card);
  border-color: var(--ls-divider);
}
.nav-dropdown-menu-inner a { color: var(--ls-label); }
.nav-dropdown-menu-inner a:hover {
  background: var(--ls-surface);
  color: var(--ls-text);
}

/* === Hero === */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ls-base);
}

/* Circuit trace overlay */
.circuit-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.circuit-trace path {
  fill: none;
  stroke: var(--ls-accent);
  stroke-width: 1.5;
  opacity: 0.18;
}
.circuit-trace circle {
  fill: var(--ls-accent);
  opacity: 0.25;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}

/* === Typography === */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* === Sections === */
.section + .section {
  border-top-color: var(--ls-divider);
}

/* === Cards === */
.product-card {
  background: var(--ls-bg-card);
  border-color: var(--ls-divider);
}
.product-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-color: var(--ls-accent);
}
[data-theme="dark"] .product-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }
}
.product-card h3 { color: var(--ls-text); }
.product-card p { color: var(--ls-label); }
.card-link { color: var(--ls-brand); }
.card-link:hover { color: var(--ls-brand-hover); }

/* === Badges === */
.badge {
  font-family: var(--ls-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.badge-free {
  background: var(--ls-sev-low-bg);
  color: var(--ls-sev-low-text);
}
.badge-pro {
  background: var(--ls-sev-high-bg);
  color: var(--ls-sev-high-text);
}

/* Severity badges */
.badge-severity {
  display: inline-block;
  font-family: var(--ls-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 4px;
  margin-right: 0.35em;
  white-space: nowrap;
}
.badge-high {
  background: var(--ls-sev-high-bg);
  color: var(--ls-sev-high-text);
}
.badge-medium {
  background: var(--ls-sev-med-bg);
  color: var(--ls-sev-med-text);
}
.badge-low {
  background: var(--ls-sev-low-bg);
  color: var(--ls-sev-low-text);
}

/* === Feature icons === */
.feature-icon {
  background: var(--ls-accent-dim);
}
.feature-icon svg { stroke: var(--ls-accent); }

/* === Callout === */
.callout {
  background: var(--ls-bg-card);
  border-left-color: var(--ls-accent);
  color: var(--ls-text);
}

/* === CTA box === */
.cta-box {
  background: var(--ls-bg-card);
  border-color: var(--ls-divider);
}
.btn {
  background: var(--ls-brand);
  transition: background 0.15s;
}
.btn:hover {
  background: var(--ls-brand-hover);
}
.btn-outline {
  background: transparent;
  color: var(--ls-brand);
  border-color: var(--ls-brand);
}
.btn-outline:hover {
  background: var(--ls-brand);
}

/* === Footer === */
.site-footer {
  border-top-color: var(--ls-divider);
  color: var(--ls-label);
  background: var(--ls-base);
}
.site-footer a { color: var(--ls-label); }
.site-footer a:hover { color: var(--ls-text); }

/* === Audit detail page specifics === */
.audit-date {
  font-size: 0.85rem;
  color: var(--ls-label);
  margin-bottom: 0.5rem;
}
.audit-summary { margin-bottom: 0.5rem; }
.severity-row { margin-bottom: 0.75rem; }
.finding-card { margin-bottom: 1.5rem; }
.finding-card h3 { margin-bottom: 0.25rem; }
.finding-source {
  color: var(--ls-label);
  margin-top: 0.5rem;
  font-family: var(--ls-mono);
  font-size: 0.8rem;
}
.back-link {
  display: inline-block;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* === Responsive === */
@media (max-width: 700px) {
  .site-nav nav.open {
    background: var(--ls-base);
    border-bottom-color: var(--ls-divider);
  }
  .circuit-trace { opacity: 0.6; }
}