/* Shared component style for every colour set (Update 126). Loaded after app.css, before the colour set and the layout.
   Everything here reads tokens, so each colour set only has to define colours, fonts, corners and shadows. */
body { font-family: var(--font); }
h1, h2, h3, .brand, .stat .num, .hub-tile strong, .next-hero h2, .card-head h2 { font-family: var(--head-font); }
h1, h2, h3 { color: var(--brand-deep); font-weight: 700; }
a { color: var(--brand); } a:hover { color: var(--brand-dark); }

/* Buttons – coloured variants (danger, ok, WhatsApp, Google, ghost) keep their own colours */
.btn { border-radius: var(--btn-radius); font-weight: 600; }
.btn:not(.btn-ghost):not(.btn-danger):not(.btn-ok):not(.btn-wa):not(.btn-google):not(.btn-danger-ghost):not(.is-off) { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn:not(.btn-ghost):not(.btn-danger):not(.btn-ok):not(.btn-wa):not(.btn-google):not(.btn-danger-ghost):not(.is-off):hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
.btn-ghost:not(.btn-danger-ghost) { background: var(--card); color: var(--brand); border: 1.5px solid var(--brand-line); }
.btn-ghost:not(.btn-danger-ghost):hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.btn-google { border-radius: var(--btn-radius); background: #fff; color: var(--ink); border-color: var(--line-strong); }

/* Cards */
.card, .tile, .hub-tile, .stat { background: var(--card); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.tile:hover, .hub-tile:hover { border-color: var(--brand-line); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.hub-tile strong, .card-head h2 { color: var(--brand-deep); }

/* Labels: sentence case with a small dot instead of red capitals */
.eyebrow { text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 600; color: var(--brand-2); width: fit-content; max-width: 100%; }
.eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 7px; vertical-align: 1px; }
.tile .code { color: var(--brand-2); letter-spacing: 0; }
.row-sub, .club-kind, .pw-t, .pp-match, .lg-kicker, .dbx-h, .dbx-k, .dbx-th, .sr-h, .sr-colgrid legend, .sr-table th, .wk-h, .wk-kpi > span:first-child, .acc-group th, .rc-h { text-transform: none !important; letter-spacing: 0 !important; }
.dbx-h, .sr-h, .wk-h, .rc-h { font-size: 1rem; color: var(--ink); }

/* "Your next step" band */
.next-hero { background: var(--hero-bg); border-radius: calc(var(--radius) + 2px); }
.next-hero .eyebrow { color: var(--on-brand-accent); }
.next-hero .eyebrow::before { background: var(--on-brand-accent); }
.next-hero .btn, .next-hero .btn:not(.btn-ghost):not(.btn-danger):not(.btn-ok):not(.btn-wa):not(.btn-google):not(.btn-danger-ghost):not(.is-off) { background: var(--hero-btn); border-color: var(--hero-btn); color: var(--hero-btn-ink); }
.next-hero .btn:hover, .next-hero .btn:not(.btn-ghost):not(.btn-danger):not(.btn-ok):not(.btn-wa):not(.btn-google):not(.btn-danger-ghost):not(.is-off):hover { filter: brightness(1.08); background: var(--hero-btn); color: var(--hero-btn-ink); }

/* Numbers, bars, pills, tabs, ticker, tables */
.stat .num { color: var(--brand); }
.bar > span { background: var(--brand); }
.cp-track i { background: var(--brand); } .cp-track u { background: var(--gold); }
.pill, .chip { border-radius: 999px; }
.badge { background: var(--brand-2); }
.tabs { border-bottom: 0; gap: 6px; }
.tabs a { border: 0; border-radius: 999px; background: var(--tint); color: var(--ink); margin: 0; }
.tabs a.on { background: var(--brand); color: #fff; }
.ticker { border: 0; box-shadow: var(--card-shadow); border-radius: var(--radius); }
.ticker-label { background: var(--brand); } .ticker-track li::before { color: var(--gold); }
table th { background: var(--tint); color: var(--brand-deep); }

/* Footer */
.foot { background: var(--foot-bg); color: var(--foot-ink); border-top: 3px solid var(--gold); }
.foot a { color: var(--foot-link); }
.foot .powered { color: var(--foot-ink); }

/* Login page */
.login-body { background: linear-gradient(160deg, var(--nav-deep) 0%, var(--brand) 60%, var(--brand-2) 150%); }
.lg-kicker { color: var(--on-brand-accent); }
.lg-hindi, .lg-side li { color: rgba(255,255,255,.88); }
.login-card { border-top: 5px solid var(--gold); border-radius: calc(var(--radius) + 6px); }