/* ============================================
   LIGHT THEME OVERRIDES — Loaded LAST
   ============================================ */

/* ═══ LIGHT THEME OVERRIDES ═══
   Overrides for hardcoded colors that don't pick up CSS variables automatically.
   Grouped by: backgrounds, borders/shadows, component-specific. */
body[data-theme="light"]{
  color-scheme: light;
}

/* Fix hardcoded dark backgrounds */
body[data-theme="light"] .announce{color:#0b0b0a}
body[data-theme="light"] .search kbd,
body[data-theme="light"] .cmdk-footer kbd,
body[data-theme="light"] .cmdk-close-kbd,
body[data-theme="light"] kbd{
  background:var(--bg-2);border-color:var(--line);color:var(--ink-soft);
}
body[data-theme="light"] .sticky-toolbar{
  background:rgba(250,250,247,.8);
}
body[data-theme="light"] .sticky-toolbar.is-stuck{
  background:rgba(250,250,247,.92);
}
body[data-theme="light"] .header{
  background:rgba(250,250,247,.85);
  border-bottom-color:var(--line);
}

/* Cards — white surface with subtle border */
body[data-theme="light"] .card{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
body[data-theme="light"] .card:hover{
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong);
}

/* Card gradient overlays (for read-on-image text) — keep these dark in both themes */
body[data-theme="light"] .bento-item::after,
body[data-theme="light"] .hero-slide::after,
body[data-theme="light"] .trending-hero::after{
  /* These overlays sit over images and need to stay dark for legibility */
}

/* Card action buttons (fav + quick peek) — invert */
body[data-theme="light"] .card .card-action-btn,
body[data-theme="light"] .card .fav-toggle{
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.08);
  color:var(--ink-soft);
}
body[data-theme="light"] .card .card-action-btn:hover,
body[data-theme="light"] .card .fav-toggle:hover{
  background:#ffffff;border-color:rgba(0,0,0,.15);color:var(--ink);
}

/* Sidebar */
body[data-theme="light"] .side,
body[data-theme="light"] .sidebar,
body[data-theme="light"] .cats-panel,
body[data-theme="light"] .widget-card{
  background:var(--surface);
  border-color:var(--line);
}

/* Feed tabs */
body[data-theme="light"] .feed-tab{color:var(--ink-soft)}
body[data-theme="light"] .feed-tab:hover{color:var(--ink)}
body[data-theme="light"] .feed-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
body[data-theme="light"] .sticky-toolbar.is-stuck .feed-tab.active{
  background:rgba(139,170,30,.1);
}

/* Tags, chips, buttons */
body[data-theme="light"] .tag,
body[data-theme="light"] .chip,
body[data-theme="light"] .btn:not(.primary):not(.danger),
body[data-theme="light"] .qp-tag,
body[data-theme="light"] .pill{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink-soft);
}
body[data-theme="light"] .tag:hover,
body[data-theme="light"] .chip:hover,
body[data-theme="light"] .btn:not(.primary):not(.danger):hover,
body[data-theme="light"] .qp-tag:hover{
  background:var(--bg-2);
  border-color:var(--line-strong);
  color:var(--ink);
}

/* Primary button stays lime — but text dark for contrast */
body[data-theme="light"] .btn.primary{
  background:var(--accent);color:#0b0b0a;border-color:var(--accent);
}

/* Drawer, modals */
body[data-theme="light"] .qp-drawer,
body[data-theme="light"] .cmdk-modal,
body[data-theme="light"] .modal,
body[data-theme="light"] .dropdown-panel{
  background:var(--bg);
  border-color:var(--line);
  box-shadow:var(--shadow-lg);
}
body[data-theme="light"] .qp-header,
body[data-theme="light"] .cmdk-input-wrap,
body[data-theme="light"] .cmdk-footer{
  background:var(--surface);border-color:var(--line);
}
body[data-theme="light"] .qp-backdrop,
body[data-theme="light"] .cmdk-backdrop,
body[data-theme="light"] .modal-backdrop{
  background:rgba(26,26,24,.4);
}

/* Inputs */
body[data-theme="light"] input,
body[data-theme="light"] textarea,
body[data-theme="light"] select,
body[data-theme="light"] .inp{
  background:var(--surface);border-color:var(--line);color:var(--ink);
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder,
body[data-theme="light"] .cmdk-input::placeholder{color:var(--ink-dim)}

/* Header search pill */
body[data-theme="light"] .search{
  background:var(--surface);border-color:var(--line);
}

/* Skeleton shimmer — swap to darker shimmer on light bg */
body[data-theme="light"] .skel{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0.03) 0%,
    rgba(0,0,0,0.06) 40%,
    rgba(139,170,30,0.08) 50%,
    rgba(0,0,0,0.06) 60%,
    rgba(0,0,0,0.03) 100%
  );
  background-size:200% 100%;
}
body[data-theme="light"] .skel-card{background:var(--surface);border-color:var(--line)}
body[data-theme="light"] .skel-card .skel-thumb{background:var(--bg-2)}

/* Section trending auras — lighter in light mode */
body[data-theme="light"] .trend-sec.trend-fonts::before{
  background:
    radial-gradient(ellipse 900px 500px at 15% 10%, rgba(139,170,30,.08) 0%, transparent 55%),
    radial-gradient(ellipse 600px 400px at 90% 90%, rgba(139,170,30,.05) 0%, transparent 60%);
}
body[data-theme="light"] .trend-sec.trend-mockups::before{
  background:
    radial-gradient(ellipse 800px 500px at 85% 30%, rgba(232,78,28,.07) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 10% 80%, rgba(232,78,28,.04) 0%, transparent 65%);
  background-color:rgba(0,0,0,.01);
}
body[data-theme="light"] .trend-sec.trend-mac::before{
  background:
    radial-gradient(ellipse 1000px 500px at 50% 40%, rgba(40,140,220,.07) 0%, transparent 55%),
    radial-gradient(ellipse 400px 300px at 20% 90%, rgba(40,140,220,.04) 0%, transparent 60%);
}
body[data-theme="light"] .trend-sec.trend-windows::before,
body[data-theme="light"] .trend-sec:not(.trend-fonts):not(.trend-mockups):not(.trend-mac)::before{
  background:
    radial-gradient(ellipse 900px 500px at 30% 80%, rgba(130,80,200,.07) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 85% 20%, rgba(130,80,200,.04) 0%, transparent 65%);
  background-color:rgba(0,0,0,.01);
}

/* Hero bento items — light-themed overlay + dark text for readability on light pages */
body[data-theme="light"] .bento-item{
  background:#e8e7e0;border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
body[data-theme="light"] .bento-item:hover{
  box-shadow:var(--shadow-md);border-color:var(--line-strong);
}
/* White gradient overlay instead of black — blends with light page */
body[data-theme="light"] .bento-item::after{
  background:linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.15) 65%, transparent 80%);
}
/* Dark text on light overlay */
body[data-theme="light"] .bento-content{color:var(--ink)}
body[data-theme="light"] .bento-title{color:var(--ink)}
body[data-theme="light"] .bento-short{color:var(--ink-soft)}
body[data-theme="light"] .bento-cat{color:var(--accent)}
/* Format badge adapts too */
body[data-theme="light"] .bento-fmt{
  background:rgba(255,255,255,.85);color:var(--ink);border:1px solid var(--line);
  backdrop-filter:blur(8px);
}

/* Hairline divider (section separator) */
body[data-theme="light"] .trend-sec::after{
  background:linear-gradient(to right,
    transparent 0%,
    var(--line) 15%,
    var(--line-strong) 50%,
    var(--line) 85%,
    transparent 100%
  );
}

/* Scroll bars (webkit) */
body[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--line-strong)}
body[data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg)}

/* Avatar gradients keep their colors in both themes (author roles) */
/* Toast notifications — invert surface */
body[data-theme="light"] .toast{
  background:var(--surface);border-color:var(--line);color:var(--ink);
  box-shadow:var(--shadow-md);
}

/* Command palette highlight */
body[data-theme="light"] .cmdk-item:hover{background:var(--bg-2)}
body[data-theme="light"] .cmdk-item.cmdk-active{
  background:rgba(139,170,30,.1);border-left-color:var(--accent);
}
body[data-theme="light"] .cmdk-item-icon{background:var(--bg-2);border-color:var(--line)}
body[data-theme="light"] .cmdk-item.cmdk-active .cmdk-item-icon{
  background:rgba(139,170,30,.12);border-color:var(--accent);color:var(--accent);
}

/* Theme transition — smooth fade when toggling */
html{transition:background-color .25s}
body, .card, .side, .sidebar, .header, .sticky-toolbar, .qp-drawer, .cmdk-modal,
.feed-tab, .btn, .tag, .chip, .pill{
  transition: background-color .25s, color .25s, border-color .25s;
}

/* Theme toggle — sun/moon swap based on current theme */
.theme-toggle .theme-icon-sun{display:none}
.theme-toggle .theme-icon-moon{display:inline-block}
body[data-theme="light"] .theme-toggle .theme-icon-sun{display:inline-block}
body[data-theme="light"] .theme-toggle .theme-icon-moon{display:none}
.theme-toggle{position:relative}
.theme-toggle:hover svg{color:var(--accent)}