/* ═══════════════════════════════════════════════════════
   DrawTheDay theme — "midnight felt" — applied SITE-WIDE.
   Loaded LAST so its :root re-maps the palette tokens that
   style.css + launch.css already consume (var(--bg/--accent/
   --text/--card-bg/...)). This file is the live source of truth
   for the palette. Gold is reserved for "the draw" (CTAs, marks).
   ═══════════════════════════════════════════════════════ */
:root {
    --bg:          #0E1112;                       /* ink — page */
    --bg2:         #0F2C22;                       /* felt-900 */
    --accent:      #D9B44A;                       /* gold — links, focus, selected, marks */
    --accent-glow: rgba(217,180,74,0.30);
    --text:        #F5EFDD;                        /* cream */
    --text-muted:  #9BA8A0;
    --card-bg:     #0F2C22;
    --card-border: rgba(217,180,74,0.15);

    --amber:  #D9B44A;                             /* gold — the press / primary CTAs */
    --night:  #0E1112;                             /* ink — text on gold/cream */
    --jungle: #3E8A67;                             /* felt-300 — kickers, verified, current */

    /* named "midnight felt" tokens — usable site-wide (spec §02) */
    --ink:         #0E1112;
    --felt-900:    #0F2C22;
    --felt:        #1E5E45;
    --felt-300:    #3E8A67;
    --gold:        #D9B44A;
    --gold-bright: #F0CC6B;
    --cream:       #F5EFDD;
    --paper:       #FBF7EC;
    --clay:        #C4564A;
}

/* Deep night background everywhere; retire the aurora skyline backdrop. */
body { background: var(--bg); font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
.city-bg { display: none; }

/* Typography — Newsreader display for headings, Schibsted for body (above). */
.section-title, .cat-group-title, .card-title, .deck-title, .faq-item summary,
.footer-cities-title, .city-h1, .quick-list > summary {
    font-family: 'Newsreader', Georgia, serif; font-weight: 600; letter-spacing: 0;
}

/* Contrast fixes: the new accents are LIGHT, so "on-accent" text must be dark. */
.cat-chip.active   { color: var(--night); font-weight: 700; }
.consent-accept    { color: var(--night); }
.skip-link         { color: var(--night); }

/* Topbar brand → the DrawTheDay card glyph (a tilted, gold-edged felt card)
   + Newsreader wordmark. The old glossy orb is retired. */
.brand-ball {
    background: #0F2C22;
    border: 1.5px solid var(--gold, #D9B44A);
    border-radius: 5px;
    transform: rotate(8deg);
    box-shadow: 0 2px 10px -2px rgba(217,180,74,.5), inset 0 0 0 1px rgba(217,180,74,.15);
    color: transparent;
    position: relative;
}
/* the little "sun rising over the felt" mark inside the card glyph */
.brand-ball::after {
    content: ""; position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
    width: 12px; height: 6px; border-radius: 12px 12px 0 0;
    border: 1.5px solid var(--gold-bright, #F0CC6B); border-bottom: none;
}
.brand-name { font-family: 'Newsreader', Georgia, serif; font-weight: 600; }

/* the italic-gold "the" inside the Draw·the·Day wordmark (topbar + deck) */
.wm-the { font-style: italic; color: var(--gold); font-weight: 500; font-size: .72em; letter-spacing: 0; vertical-align: 0.06em; }

/* City-page activity cards: neutral cost badge + felt pro-tip on the new palette. */
.cost-badge { color: var(--text); border-color: var(--card-border); }
.card-tip   { background: rgba(30,94,69,0.12); }

/* City-page "Browse all" toggle (previously unstyled). */
.browse-toggle-wrap { display: flex; justify-content: center; margin: 0.2rem 0 1.6rem; }
.browse-toggle {
    cursor: pointer; font: inherit; font-weight: 600; font-size: 0.95rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--text); background: var(--card-bg);
    border: 1px solid var(--card-border); border-radius: 999px; padding: 0.7rem 1.4rem;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.browse-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.browse-toggle .bt-caret { transition: transform 0.2s; }
.browse-toggle.open .bt-caret { transform: rotate(180deg); }

/* City-page intro line under the deck (SEO + context). */
.deck-intro {
    max-width: var(--col-text); margin: 0.7rem auto 0; text-align: center;
    color: var(--text-muted); font-size: 0.98rem; line-height: 1.6;
}

/* ── 404 ── */
.notfound { text-align: center; }
.nf-orb {
    width: 110px; height: 110px; margin: 0 auto 1.6rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F0CC6B, #0F2C22 72%);
    box-shadow: 0 0 0 1px rgba(217,180,74,.4), 0 0 50px rgba(217,180,74,.35);
}
.nf-title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; color: var(--text); text-shadow: none; }
.nf-cta {
    display: inline-flex; align-items: center; gap: 0.4rem; width: auto;
    font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1rem;
    color: var(--night); background: var(--amber); border: none; border-radius: 13px;
    padding: 0.9rem 1.5rem; text-decoration: none;
    box-shadow: 0 12px 30px -10px rgba(217,180,74,.6); transition: filter 0.15s, transform 0.12s;
}
.nf-cta:hover { filter: brightness(1.05); }
.nf-cta:active { transform: scale(.985); }