/* ============================================================
   Quinable help center — shared theme tokens.
   Loaded on all help.quinable.com pages. Defines the light
   palette on :root and dark-theme overrides on [data-theme="dark"].
   Also defines the theme toggle button style so every page gets
   a consistent 🌙/☀️ button for free.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-primary:      #FFFFFF;
  --bg-elevated:     #F9FAFB;
  --bg-subtle:       #F3F4F6;
  --bg-accent-soft:  rgba(16,185,129,0.10);

  /* Borders */
  --border-subtle:   #E5E7EB;
  --border-strong:   #D1D5DB;

  /* Text */
  --text-primary:    #111827;
  --text-body:       #374151;
  --text-secondary:  #4B5563;
  --text-muted:      #6B7280;
  --text-on-accent:  #111827;

  /* Accent — Quinable brand green */
  --accent:          #10B981;
  --accent-hover:    #059669;

  /* States */
  --error:           #EF4444;
  --error-bg:        rgba(239,68,68,0.08);
  --error-border:    rgba(239,68,68,0.25);
  --success:         #10B981;
  --success-bg:      rgba(16,185,129,0.08);
  --success-border:  rgba(16,185,129,0.25);

  /* Effects */
  --shadow-card:     0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
  --shadow-modal:    0 20px 60px rgba(17,24,39,0.15);
  --skeleton-bg:     #E5E7EB;
}

/* Dark-theme override. Applied when html[data-theme="dark"] is set
   via the toggle button (persisted in localStorage). Light is the
   default so this only takes effect on opt-in. */
[data-theme="dark"] {
  --bg-primary:      #09090B;
  --bg-elevated:     #18181B;
  --bg-subtle:       #18181B;
  --bg-accent-soft:  rgba(16,185,129,0.10);

  --border-subtle:   #27272A;
  --border-strong:   #3F3F46;

  --text-primary:    #FAFAFA;
  --text-body:       #E4E4E7;
  --text-secondary:  #A1A1AA;
  --text-muted:      #71717A;
  --text-on-accent:  #09090B;

  --accent:          #10B981;
  --accent-hover:    #34D399;

  --error:           #EF4444;
  --error-bg:        rgba(239,68,68,0.08);
  --error-border:    rgba(239,68,68,0.25);
  --success:         #10B981;
  --success-bg:      rgba(16,185,129,0.08);
  --success-border:  rgba(16,185,129,0.25);

  --shadow-card:     0 1px 3px rgba(0,0,0,0.20);
  --shadow-modal:    0 20px 60px rgba(0,0,0,0.50);
  --skeleton-bg:     #27272A;
}

/* Theme toggle button — same style on every page */
.nav-theme-btn {
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 6px 10px; font-size: 15px; line-height: 1;
  cursor: pointer; color: var(--text-primary); font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.nav-theme-btn:hover { background: var(--bg-elevated); border-color: var(--border-strong); }