/* ══════════════════════════════════════════
   LIGHT MODE — DEFAULT
   Modern minimal/clean palette with improved contrast
══════════════════════════════════════════ */
:root {
  /* Backgrounds — warmer, lighter */
  --bg-page:          #FAFBFC;
  --bg-nav:           #FFFFFF;
  --bg-card:          #FFFFFF;
  --bg-card-logo:     #F3F4F6;
  --bg-card-body:     #F9FAFB;
  --bg-input:         #FFFFFF;
  --bg-input-alt:     #F3F4F6;
  --bg-chip:          #EEF2FF;
  --bg-hover:         #F3F4F6;
  --bg-active:        #EEF2FF;

  /* Text hierarchy — stronger contrast */
  --text-primary:     #111827;
  --text-secondary:   #374151;
  --text-muted:       #6B7280;
  --text-faint:       #9CA3AF;
  --text-accent:      #0066CC;

  /* Borders — subtle, professional */
  --border:           #E5E7EB;
  --border-hover:     #D1D5DB;
  --border-focus:     #0066CC;

  /* Primary & accent — trust blue + success green */
  --primary:          #0066CC;
  --primary-hover:    #0052A3;
  --accent:           #00A651;
  --accent-hover:     #008A3E;
  --accent-light:     #D1F3D1;

  /* Status colors */
  --verified-bg:      #D1F3D1;
  --verified-border:  #00A651;
  --verified-text:    #00A651;
  --error:            #DC2626;
  --warning:          #F59E0B;

  /* Typography & spacing */
  --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:          11px;
  --text-sm:          13px;
  --text-base:        15px;
  --text-lg:          17px;
  --text-xl:          20px;
  --text-2xl:         24px;
  --text-3xl:         28px;
  --text-4xl:         36px;
  --line-height-tight: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Spacing scale (8px base) */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         12px;
  --space-lg:         16px;
  --space-xl:         24px;
  --space-2xl:        32px;
  --space-3xl:        48px;
  --space-4xl:        64px;

  /* Shadows */
  --shadow-xs:        0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:        0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-card:      var(--shadow-sm);
  --shadow-nav:       none;

  /* Placeholder */
  --placeholder:      #9CA3AF;

  /* Radius scale */
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-pill:      999px;

  /* Elevation (extends xs/sm/md above) */
  --shadow-lg:        0 10px 20px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-pop:       0 16px 32px rgba(0,102,204,0.14);

  /* Distinctive gradients */
  --gradient-hero:    linear-gradient(135deg, #0066CC 0%, #0052A3 55%, #00A651 160%);
  --gradient-accent:  linear-gradient(135deg, #0066CC 0%, #00A651 100%);
}

/* ══════════════════════════════════════════
   DARK MODE — opt-in via body.dark-mode
══════════════════════════════════════════ */
body.dark-mode {
  --bg-page:          #0F1117;
  --bg-nav:           #161B22;
  --bg-card:          #0D1117;
  --bg-card-logo:     #161B22;
  --bg-card-body:     #0D1117;
  --bg-input:         #0D1117;
  --bg-input-alt:     #161B22;
  --bg-chip:          #1C2128;
  --bg-hover:         #161B22;
  --bg-active:        #1C2128;

  --text-primary:     #E6EDF3;
  --text-secondary:   #C9D1D9;
  --text-muted:       #8B949E;
  --text-faint:       #6E7681;
  --text-accent:      #58A6FF;

  --border:           #30363D;
  --border-hover:     #444C56;
  --border-focus:     #58A6FF;

  --primary:          #58A6FF;
  --primary-hover:    #79C0FF;
  --accent:           #3FB950;
  --accent-hover:     #56D364;
  --accent-light:     #238636;

  --verified-bg:      #238636;
  --verified-border:  #3FB950;
  --verified-text:    #3FB950;
  --error:            #F85149;
  --warning:          #D29922;

  --placeholder:      #6E7681;
  --shadow-card:      none;
  --shadow-nav:       none;

  --shadow-lg:        none;
  --shadow-pop:       0 16px 32px rgba(0,0,0,0.5);
  --gradient-hero:    linear-gradient(135deg, #161B22 0%, #0D1117 55%, #0b3d2a 160%);
  --gradient-accent:  linear-gradient(135deg, #1f6feb 0%, #238636 100%);
}

/* ── Specific dark mode component overrides ── */
body.dark-mode .grid-card-logo-wrap  { background: var(--bg-card-logo); }
body.dark-mode .grid-card-body       { background: var(--bg-card-body); }
body.dark-mode .list-card-logo       { background: var(--bg-card-logo); }
body.dark-mode .chip                 { background: var(--bg-chip); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .view-btn             { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .view-btn:hover       { border-color: var(--accent); color: var(--accent); background: var(--bg-active); }
body.dark-mode .filter-bar           { background: var(--bg-nav); border-color: var(--border); }
body.dark-mode .filter-bar-select,
body.dark-mode .filter-group-select,
body.dark-mode .per-page-select      { background-color: var(--bg-input); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .filter-search-wrap input { background: var(--bg-input); border-color: var(--border); }
body.dark-mode .apply-filters-btn   { background: var(--accent); }
body.dark-mode .page-btn.active      { background: var(--accent); border-color: var(--accent); color: #fff; }
body.dark-mode .toast                { background: var(--bg-card); border-color: var(--border); box-shadow: 0 4px 24px rgba(0,0,0,0.6); }
body.dark-mode .grid-card-bookmark  { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .grid-card-bookmark.is-saved { background: var(--bg-active); border-color: var(--accent); color: var(--accent); }
body.dark-mode .list-bookmark-btn.is-saved  { background: var(--bg-active); border-color: var(--accent); color: var(--accent); }
body.dark-mode .card-chip-count      { background: var(--bg-chip); color: var(--text-muted); border-color: var(--border); }