/* ============================================================
   site-modern.css
   Awareverse — Modern refresh layer
   Loads AFTER site.css — overrides radius, type, cards, buttons
   Nothing structural changes. Safe to remove if needed.
   ============================================================ */

/* ── Tighter radius tokens ─────────────────────────────────── */
:root {
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Refined shadows — less glow, more depth */
    --shadow-soft: 0 2px 8px rgba(0,0,0,.18);
    --shadow-sm:   0 4px 16px rgba(0,0,0,.22);
    --shadow:      0 6px 24px rgba(0,0,0,.28);
    --shadow-lg:   0 12px 40px rgba(0,0,0,.35);
    --shadow-glow: 0 0 20px rgba(165,111,255,.18);

    /* Button sizing */
    --btn-h:  46px;
    --btn-r:  10px;
    --btn-px: 20px;
}

/* ── Typography — more weight contrast ────────────────────── */
h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    line-height: 1.1 !important;
}

h2 {
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
}

h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}

/* Limit gradient text to h1 only — h2/h3 use solid colour */
h2 {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

h3 {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

/* Slightly larger body text, better line height */
body {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

p {
    line-height: 1.75;
    max-width: 68ch;
}

/* ── Cards — sharper, cleaner ──────────────────────────────── */
.card {
    border-radius: var(--radius-lg) !important;
    padding: 1.75rem !important;
    border-width: 1px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow) !important;
    border-color: rgba(165,111,255,.4) !important;
}

body:not(.light-mode) .card {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    backdrop-filter: blur(12px) !important;
}

body:not(.light-mode) .card:hover {
    border-color: rgba(165,111,255,.35) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(165,111,255,.2) !important;
}

/* ── Buttons — less pill, more refined ─────────────────────── */
a.btn, button.btn, .btn,
a.button, .button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    border-radius: var(--btn-r) !important;
    min-height: var(--btn-h) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    padding: 0 var(--btn-px) !important;
}

/* Primary buttons */
.btn-primary,
[data-variant="primary"] {
    border-radius: var(--btn-r) !important;
}

/* Ghost buttons */
.btn-ghost,
.button--outline,
.outline {
    border-radius: var(--btn-r) !important;
}

/* Nav tabs keep their pill shape — they're designed for it */
.nav-tab {
    border-radius: var(--radius-full) !important;
}

/* ── Nav tabs (desktop pill bar) ───────────────────────────── */
.nav-tabs {
    border-radius: 14px !important;
    padding: 6px 10px !important;
}

/* ── Info/highlight boxes ───────────────────────────────────── */
.info-box,
.highlight-box,
.warning-box,
.tip-box,
.strategy-box {
    border-radius: var(--radius-lg) !important;
    border-left-width: 3px !important;
}

body:not(.light-mode) .info-box,
body:not(.light-mode) .highlight-box,
body:not(.light-mode) .warning-box {
    background: rgba(255,255,255,.05) !important;
    border-left-color: rgba(165,111,255,.6) !important;
}

/* ── Steps ─────────────────────────────────────────────────── */
.step {
    border-radius: var(--radius-lg) !important;
    border-width: 1px !important;
}

body:not(.light-mode) .step {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.09) !important;
}

/* ── Download & shop cards ─────────────────────────────────── */
.download-card,
.shop-card {
    border-radius: var(--radius-lg) !important;
    border-width: 1px !important;
}

/* ── Story cards ────────────────────────────────────────────── */
.story-card {
    border-radius: var(--radius-lg) !important;
}

/* ── Section titles — add subtle left accent ───────────────── */
.section-title {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    padding-left: .85rem !important;
    border-left: 3px solid rgba(165,111,255,.7) !important;
    color: var(--text) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    margin-bottom: 1.5rem !important;
}

/* ── Page subtitle — slightly larger, better spacing ──────── */
.page-subtitle {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    opacity: .85 !important;
    margin-bottom: 2.5rem !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
    border-radius: 14px 14px 0 0 !important;
}

/* ── Forms — tighter radius ─────────────────────────────────── */
:where(input[type="text"],
       input[type="email"],
       input[type="tel"],
       input[type="password"],
       input[type="search"],
       input[type="url"],
       input[type="number"],
       textarea,
       select) {
    border-radius: 10px !important;
}

/* ── Disclaimer banner ──────────────────────────────────────── */
.disclaimer-banner {
    border-radius: 0 0 10px 10px !important;
}

/* ── Grid spacing — slightly tighter ───────────────────────── */
.grid {
    gap: 1.5rem !important;
}

/* ── Remove excessive card margin stacking ─────────────────── */
.card {
    margin-bottom: 0 !important;
}

/* ── Light mode card refinement ─────────────────────────────── */
body.light-mode .card {
    background: #fff !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

body.light-mode .card:hover {
    border-color: rgba(165,111,255,.3) !important;
    box-shadow: 0 6px 24px rgba(165,111,255,.12) !important;
}

/* ── Basket FAB — tighter ───────────────────────────────────── */
#basket-fab {
    border-radius: 12px !important;
}

/* ── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .card {
        padding: 1.4rem !important;
    }
    h1 {
        font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    }
}