/* ============================================================================
   Lifehaki Design System — global theme override (cool-light)
   Loaded LAST, site-wide. style.css :root already remaps the legacy tokens to
   the real cool palette, so most of the site re-skins automatically. This file
   fixes the bits the dark theme HARD-CODED (white text, translucent-white
   borders, black shadows, dark nav) and layers in the editorial type system
   (Fraunces display, Barlow eyebrows, Urbanist body, DM Mono meta).
   ========================================================================== */

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body {
    background: var(--bg-app);
    color: var(--text-body);
    font-family: var(--font-body);
}
::selection { background: var(--accent); color: var(--accent-on); }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-300); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Display type was tuned for Bebas (uppercase, tight). Fraunces is a serif. */
.display {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-optical-sizing: auto;
}

/* ── Nav (was dark translucent #0d0d0d) ───────────────────────────────────── */
.nav {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav-link { color: var(--text-muted); }
.nav-link:hover { color: var(--text-strong); }
.nav-link::after { background: var(--accent); }
.logo { color: var(--text-strong); }

/* Search lives in the light header: the form is just a flex wrapper — the input
   and submit button carry their own pill styling, so the form must stay frameless
   (a background/border here leaves an odd square frame around the rounded pill). */
.search { background: transparent; border: 0; padding: 0; }
.search input {
    background: var(--paper-0);
    border: 1px solid var(--line);
    color: var(--text-body);
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus { border-color: var(--accent); }
.search-go {
    background: var(--paper-0);
    border: 1px solid var(--line);
    color: var(--text-muted);
}
.search-go:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { font-family: var(--font-body); font-weight: var(--fw-bold, 700); }
.btn-primary {
    background: var(--accent); color: var(--accent-on);
    box-shadow: 0 6px 18px -8px rgba(202, 33, 40, 0.45);
}
.btn-primary:hover { background: var(--accent-hover); filter: none; }
.btn-ghost {
    background: var(--paper-0);
    border: 1.5px solid var(--line-strong);
    color: var(--text-strong);
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-400); }
.btn-yellow, .btn-gold { background: var(--highlight); color: var(--highlight-on); }

/* ── Pills / chips (used translucent-white in dark) ───────────────────────── */
.pill-neutral {
    color: var(--text-muted);
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.pill-yellow {
    color: var(--gold-700);
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
}
.pill-red {
    color: var(--accent);
    background: var(--accent-tint);
    border: 1px solid var(--red-200);
}

/* ── Section headers — editorial (Barlow eyebrow + Fraunces title) ─────────── */
.section-title { font-family: var(--font-display); letter-spacing: -0.015em; color: var(--text-strong); }
.section-sub { color: var(--text-muted); }

/* ── Footer (was on dark) ─────────────────────────────────────────────────── */
.footer { background: var(--paper-0); border-top: 1px solid var(--line); color: var(--text-muted); }
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--accent); }
.footer-tag { color: var(--text-faint); }

/* ── Generic surfaces that hard-coded dark shadows ───────────────────────── */
/* Soften any leftover heavy black glow on cards to the slate cast. Targeted
   page rules are refined per-page; this is a safety net for common wrappers. */
.card, .panel, .box { background: var(--paper-0); border-color: var(--line); }

/* ── Detail (title) hero — was a dark cinematic scrim for white text.
   Flip the scrim to LIGHT so the backdrop image fades into the page and the
   ink title/meta read correctly. ─────────────────────────────────────────── */
.detail-hero-bg::after {
    background:
        linear-gradient(90deg, var(--bg-app) 0%, rgba(245,245,249,0.86) 46%, rgba(245,245,249,0.42) 100%),
        linear-gradient(180deg, rgba(245,245,249,0.5) 0%, transparent 28%, transparent 55%, var(--bg-app) 100%);
}
.detail-hero-grid {
    background-image:
        linear-gradient(rgba(21,23,40,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,23,40,0.03) 1px, transparent 1px);
}
.dh-title { text-shadow: none; color: var(--text-strong); }
.dh-jp { color: var(--text-muted); }
.dh-crumb .sep { color: var(--ink-400); }

/* ── Art-backdrop heroes (rankings home + detail) stay dark cinematic — force
   light text, since the global ink remap would paint the title dark-on-dark. ── */
.rk-home-headline, .rk-hero-title { color: #fff; }
.rk-home-sub, .rk-hero-desc { color: rgba(255,255,255,0.74); }
.rk-home-cta > a:not(.btn-primary):not(.btn-yellow) { color: rgba(255,255,255,0.92); }