/* WindStoke site-wide restyle layer — admin/STYLE-GUIDE.md (2026-09-26).
   Loaded LAST on every page (footer.php / ws_styleNextLinks()), so equal-specificity rules here
   beat theme.css, the header's inline block and a page's own <style> without !important.
   Gated by includes/style-next.php until WS_STYLE_NEXT_LIVE flips.

   What lives here: the tokens (the old accents re-pointed into the palette so existing rules land
   in it), the page and card definition in both themes, the header and nav chrome. What does NOT:
   a page's own classes — those go in assets/css/next/<page>.css under body[data-page="…"]. */

/* ── Tokens (§2). Colour means: blue = tappable; green = meets your floor; yellow = maybe or
   stale; red = we were wrong. Nothing else gets a hue. ── */
:root {
    --dn-accent: #1683C4; --dn-accent-hover: #1374AE;
    --ws-primary: #1683C4; --ws-primary-light: #3B9AD6; --ws-teal: #1683C4;
    --primary: #1683C4; --primary-light: #3B9AD6; --primary-dark: #1374AE; --teal: #1683C4;
    --ws-coral: #1683C4;                 /* orange is retired: whatever it painted is tappable now */
    --wsv-go-text: #34C98B; --wsv-go-bg: rgba(52, 201, 139, .18); --wsv-go-edge: rgba(52, 201, 139, .55);
    --wsv-epic: #1E9E6A; --wsv-epic-ink: #FFFFFF;
    --wsv-maybe: #E3B341;
    --wsv-wrong: #EF4444;
    --ws-success: #34C98B; --success: #34C98B;
    --ws-warning: #E3B341; --warning: #E3B341;
    --ws-error: #EF4444;
    --ws-poor: #64748B;
    --dn-card-edge: var(--ws-border-default);
    --dn-card-lift: none;
    --dn-inset: var(--ws-overlay-light);
    --dn-inset-edge: transparent;
    --dn-radius-card: 20px; --dn-radius-inner: 12px; --dn-section-gap: 26px;
}
[data-theme="light"] {
    --wsv-go-text: #159C63; --wsv-go-bg: rgba(21, 156, 99, .13); --wsv-go-edge: rgba(21, 156, 99, .5);
    --wsv-epic: #127A4E; --wsv-epic-ink: #FFFFFF;
    --wsv-maybe: #B7860B;
    --ws-success: #159C63; --success: #159C63;
    --ws-warning: #B7860B; --warning: #B7860B;
    /* §1.7: labels dark enough to read. Measured off Jeff's phone 09-26: the old muted was 2.6:1. */
    --ws-text-secondary: #475569;
    --ws-text-muted: #64748B;
    --ws-bg-page: #EDF1F5;
    --ws-bg-page-secondary: #EDF1F5;
    --dn-card-edge: #D5DCE4;
    --dn-card-lift: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 10px rgba(15, 23, 42, .04);
    --dn-inset: #F1F5F9;
    --dn-inset-edge: #E2E8F0;
    /* header.php's --ws-gray-* scale is a fixed slate ramp with DARK-theme meaning (200 = bright
       text … 600 = dim text; 90% of its 300 uses are `color:`). It was never redefined for light,
       so pages that read it drew #94A3B8 text on white. Mirror the ramp here; the few border and
       background uses get a darker line, which the render pass checks. */
    --ws-gray-200: #1E293B; --ws-gray-300: #334155; --ws-gray-400: #475569;
    --ws-gray-500: #64748B; --ws-gray-600: #64748B;
}

/* ── Token defaults for pages that load this layer WITHOUT theme.css (login, register, the
   password pages, share/spot, share/conditions). Seen 09-26: `body { background: var(--ws-bg-page) }`
   resolved to nothing there and the page went white with unreadable headings. These are
   theme.css's dark values; scoped away from light so theme.css's light block still wins. ── */
:root:not([data-theme="light"]) {
    --ws-bg-page: #0F172A; --ws-bg-page-secondary: #1E293B;
    --ws-bg-card: rgba(255, 255, 255, .05); --ws-bg-card-alt: rgba(255, 255, 255, .03);
    --ws-bg-card-solid: #1E293B; --ws-bg-card-hover: rgba(255, 255, 255, .08); --ws-bg-input: rgba(255, 255, 255, .05);
    --ws-text-primary: #E2E8F0; --ws-text-secondary: #94A3B8; --ws-text-muted: #64748B;
    --ws-text-heading: #F1F5F9; --ws-text-bright: #FFFFFF;
    --ws-border-subtle: rgba(255, 255, 255, .06); --ws-border-default: rgba(255, 255, 255, .1); --ws-border-strong: rgba(255, 255, 255, .15);
    --ws-overlay-light: rgba(255, 255, 255, .03); --ws-overlay-medium: rgba(255, 255, 255, .05); --ws-overlay-strong: rgba(255, 255, 255, .08);
    --ws-modal-bg: #1E293B; --ws-nav-bg: rgba(15, 23, 42, .98); --ws-header-bg: rgba(15, 23, 42, .95);
    --ws-gray-200: #E2E8F0; --ws-gray-300: #CBD5E1; --ws-gray-400: #94A3B8; --ws-gray-500: #64748B; --ws-gray-600: #475569; --ws-gray-700: #334155;
}

/* `--ws-text` was never defined anywhere, yet includes/station-snapshot.php and others read it
   with a white fallback — white text on a white card in light (09-26 phone look). Define it. */
:root { --ws-text: #F1F5F9; }
[data-theme="light"] { --ws-text: #0F172A; }

/* ── Page: flat, no gradient, no ambient glow (§1.4, §1.7) ── */
body, [data-theme="light"] body { background: var(--ws-bg-page); }
body::before, [data-theme="light"] body::before { background: none; }
body::after, [data-theme="light"] body::after { background: var(--ws-bg-page); }

/* ── One typeface (§1.1): controls inherit it; nothing is monospace. ── */
button, input, select, textarea { font-family: inherit; }
.ws-mono, .ws-stoke-btn .session-count, code, kbd, pre, .mono, .num, .tabular {
    font-family: inherit; font-variant-numeric: tabular-nums;
}

/* ── Header and nav chrome (§1.8) ── */
.ws-logo-text .stoke, .ws-gradient-text {
    background: none; -webkit-text-fill-color: currentColor; color: var(--dn-accent);
}
.ws-tier-pill { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ws-tier-pill.premium { background: var(--dn-accent); box-shadow: none; }
.ws-top-nav-item::after { background: var(--dn-accent); }
.ws-nav-item { letter-spacing: 0; }
.ws-nav-item::before { background: var(--dn-accent); }
.ws-nav-item.active svg { filter: none; }
.ws-nav-item:hover svg { transform: none; }
.ws-stoke-btn .badge-icon { display: none; }
[data-theme="light"] .ws-bottom-nav { background: rgba(255, 255, 255, .96); border-top-color: var(--dn-card-edge); }
[data-theme="light"] .ws-header { border-bottom-color: var(--dn-card-edge); }

/* ── Shared bits theme.css still paints with gradients or glows ── */
[data-theme="light"] .data-table th { background: var(--dn-inset); }
[data-theme="light"] .ws-toast { box-shadow: var(--dn-card-lift); }
.skeleton-line, [data-theme="light"] .skeleton-line { background: var(--dn-inset); }

/* ── Ask Jetty sheet + nav tab (footer.php) speak the palette: the tab is a control, so it is
   blue, not go-green (green means "meets your floor"). ── */
.ws-nav-ask { color: var(--dn-accent); }
.ws-nav-ask .ws-nav-ask-pill { background: rgba(22, 131, 196, .14); border-color: rgba(22, 131, 196, .45); }
.ws-nav-ask.active .ws-nav-ask-pill { background: var(--dn-accent); color: #FFFFFF; }
.ws-nav-ask.active span { color: var(--dn-accent); }

/* The level strip's icon is header.php's $badgeIcon, an emoji; the level name carries it (§1.5). */
.level-strip .level-icon { display: none; }