/*
 * styles.css — REJUVCO barrel.
 *
 * Layer order (cascade goes top → bottom):
 *
 *   1. tokens.css          generated; CSS custom properties only
 *   2. base.css            reset, body type, typographic primitives
 *   3. layout.css          page shell, container, grid, footer, topbar
 *   4. primitives.css      btn, input, badge, chip, card, panel, table, toast, drawer
 *   5. patterns.css        hero, stat-grid, metric-row, tile-grid, proof-strip, path-list
 *   6. pages/<name>.css    page-scoped overrides (each scoped under [data-page="<name>"])
 *
 * Rules:
 *   - tokens.css is the only source of colour / spacing / radius / shadow / motion values.
 *   - Every other layer references tokens via var(--…). No raw hex, no raw px outside hairlines.
 *   - Page CSS may only target its own [data-page="…"] scope.
 *   - Re-run `npm run build:tokens` after editing design-tokens.json.
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

@import "./styles/tokens.css";
@import "./styles/base.css";
@import "./styles/layout.css";
@import "./styles/primitives.css";
@import "./styles/patterns.css";
@import "./styles/table-scroll.css";
@import "./styles/celebrate.css";
@import "./styles/responsive.css";

@import "./styles/pages/join.css";
@import "./styles/pages/login.css";
@import "./styles/pages/verify.css";
@import "./styles/pages/portal.css";
@import "./styles/pages/recruiting.css";
@import "./styles/pages/recruits.css";
@import "./styles/pages/copilot.css";
@import "./styles/pages/clients.css";
@import "./styles/pages/events.css";
@import "./styles/pages/onboarding.css";
@import "./styles/pages/leaders.css";
@import "./styles/pages/administration.css";
@import "./styles/pages/data-connectors.css";
@import "./styles/pages/settings.css";
@import "./styles/pages/fast-start-templates.css";
@import "./styles/pages/fast-start-leaderboard.css";

/* --- Body mode hooks (chrome-only) ----------------------------------- */

body[data-mode="public"] .user-chip,
body[data-mode="public"] #settingsButton {
  display: none !important;
}

body[data-mode="login"] .user-chip,
body[data-mode="login"] .login-link {
  display: none !important;
}

body[data-mode="portal"] .login-link {
  display: none !important;
}