/* light theme: page layer for socials */
@media (prefers-color-scheme: light) {
/* --- hand fixes for socials --- */
/* socials: hand fixes (plain rules; the generator wraps them in the light media query) */

/* Platform cards: white cards (the white-to-grey gradient read as a grey slab) */
html .social-card { background: #ffffff !important; border-color: var(--line) !important; box-shadow: 0 8px 24px rgba(16,24,40,0.05); }
html .social-card:hover { border-color: var(--card-color, var(--accent-ink)) !important; box-shadow: 0 14px 34px rgba(16,24,40,0.09); }
html .social-card .card-mascot { filter: drop-shadow(0 12px 20px rgba(16,24,40,0.16)) !important; }

/* Brand icon tiles keep white glyphs (the generic white-text remap turned them dark); TikTok keeps its black tile */
html .social-icon { color: #ffffff !important; }
html .social-icon svg { fill: currentColor; }
html .social-card.tt .social-icon { background: #010101 !important; color: #ffffff !important; }

/* Brand CTA pills: Telegram's light-blue fill takes the dark ink (like the cyan buttons);
   Discord and TikTok keep their white labels, TikTok's pink deepened a touch so white reads (4.7:1) */
html .social-card.tg .cta { color: #04121a !important; }
html .social-card.dc .cta { color: #ffffff !important; }
html .social-card.tt .cta { color: #ffffff !important; background: #e6004a !important; }

/* "Need to reach us directly?" email link: inline cyan text -> accent ink */
html .socials-cta a[style*="--accent"] { color: var(--accent-ink) !important; }

}