/* ═══════════════════════════════════════════════════════════════════════════
   LUMEN PRO — Base + Component styles
   Drops into any page that imports tokens.css.
   Naming follows the existing themes/ convention so the markup in
   public_html/* keeps working unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font-family: inherit; }

/* ─── Typography ──────────────────────────────────────────────────────── */
.t-display     { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.04em; }
.t-h1          { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-4xl); line-height: 1.04; letter-spacing: -0.03em; }
.t-h2          { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.025em; }
.t-h3          { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.02em; }
.t-h4          { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.015em; }
.t-eyebrow     { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.t-lead        { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.55; }
.t-num         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.t-grad {
    background: var(--gradient-main);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 22px; border-radius: var(--radius);
    font-weight: 700; font-size: var(--fs-base); letter-spacing: -0.01em;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
    background: var(--gradient-cta); color: #fff;
    box-shadow: var(--shadow-cta);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,58,237,0.4), 0 16px 48px rgba(236,72,153,0.22); }
.btn--secondary {
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn--secondary:hover { background: var(--bg-card-hover); }
.btn--ghost { background: transparent; color: var(--text-primary); }
.btn--ghost:hover { background: var(--bg-card-hover); }
.btn--success { background: var(--gradient-success); color: #fff; box-shadow: var(--shadow-success); }
.btn--lg  { padding: 18px 28px; font-size: var(--fs-md); border-radius: var(--radius-lg); }
.btn--sm  { padding: 9px 14px; font-size: var(--fs-sm); border-radius: var(--radius-sm); gap: 6px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ─── Cards ───────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card); border-radius: var(--radius-lg);
    padding: var(--sp-6); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card--flat { box-shadow: none; }
.card--elevated { box-shadow: var(--shadow-lg); }
.card--gradient {
    background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in oklch, var(--bg-card) 85%, var(--accent) 15%) 220%);
    border: 1px solid var(--accent-glow);
}

/* ─── Pills / chips ───────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--radius-full);
    font-size: var(--fs-xs); font-weight: 700;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary);
}
.pill--success { background: var(--success-bg); color: var(--success); border-color: var(--success-glow); }
.pill--accent  { background: var(--accent-glow); color: var(--accent); border-color: transparent; }
.pill--warm    { background: var(--amber-glow); color: var(--amber); border-color: transparent; }
.pill--live    { background: var(--success-bg); color: var(--success); }
.pill--live::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--success); animation: pulse-dot 2.2s infinite; }
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
    70%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

/* ─── Inputs ──────────────────────────────────────────────────────────── */
.input {
    width: 100%; padding: 14px 16px; border-radius: var(--radius);
    background: var(--bg-input); border: 1.5px solid var(--border);
    font-size: var(--fs-md); color: var(--text-primary);
    outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.input::placeholder { color: var(--text-muted); }
.input-row { display: flex; gap: 10px; }

/* ─── Section heading ─────────────────────────────────────────────────── */
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-10); }
.section-head .t-eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.section-head .t-h2 { margin: 0 0 var(--sp-3); }
.section-head .t-lead { margin: 0; }

/* ─── Aurora / mesh background ────────────────────────────────────────── */
.aurora {
    position: absolute; inset: 0; pointer-events: none;
    background: var(--gradient-mesh);
    z-index: 0;
}
.aurora::after {
    content:''; position:absolute; inset:0;
    background-image:
        radial-gradient(1px 1px at 25% 35%, rgba(124,58,237,0.10), transparent 4px),
        radial-gradient(1px 1px at 75% 75%, rgba(236,72,153,0.08), transparent 4px);
    background-size: 6px 6px;
    opacity: 0.4;
}

/* ─── Bottom nav (mobile) ─────────────────────────────────────────────── */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-around;
    z-index: 50;
}
html[data-theme="dark"] .bottom-nav { background: rgba(20,19,46,0.86); }
.bottom-nav-item {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color: var(--text-muted); font-size: 10px; font-weight: 600;
    padding: 8px 12px; flex: 1; max-width: 80px;
    transition: color var(--dur) var(--ease);
}
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item svg { width: 22px; height: 22px; }

/* ─── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(251,250,253,0.82);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--border);
    height: var(--topbar-h); display: flex; align-items: center;
    padding: 0 var(--sp-4);
}
html[data-theme="dark"] .topbar { background: rgba(10,9,24,0.82); }

/* ─── Logo ────────────────────────────────────────────────────────────── */
.logo {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 800;
    font-size: 18px; letter-spacing: -0.02em;
    color: var(--text-primary);
}
.logo-mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--gradient-cta);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: 13px;
    box-shadow: var(--shadow-cta);
}

/* ─── Star rating ─────────────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 1px; color: var(--amber); }

/* ─── Skeleton / shimmer ──────────────────────────────────────────────── */
.shimmer {
    position: relative; overflow: hidden;
    background: var(--bg-input);
}
.shimmer::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* ─── Divider ─────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--divider); margin: var(--sp-6) 0; }

/* ─── Container ───────────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
@media (max-width: 720px) { .container { padding: 0 var(--sp-4); } }

/* ─── Floating notification card (mock IG ticker etc.) ────────────────── */
.float-note {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: 10px;
}

/* ─── Bento grid helper ───────────────────────────────────────────────── */
.bento { display: grid; gap: var(--sp-4); }
.bento-2 { grid-template-columns: 1fr 1fr; }
.bento-3 { grid-template-columns: repeat(3, 1fr); }
.bento-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .bento-3, .bento-4 { grid-template-columns: 1fr 1fr; }
}