/*
 * House Rules design system.
 * ---------------------------------------------------------------------------
 * The brand this app shares with playbyhouserules.com. Values are ported
 * verbatim from ~/houserules/frontend/src/styles/theme.css.ts, which is the
 * source of truth — if a colour disagrees, that file wins. Do not re-pick them
 * here; the hand-drawn character of the design lives in a handful of repeated
 * tricks (asymmetric radii, hard offset shadows, one ink outline colour) and
 * those only stay coherent if there is exactly one place to tune each.
 *
 * WHY THIS FILE EXISTS AT ALL
 *
 * This app had no application stylesheet — the only .css in the repo is
 * vendored Quill, and ~4,000 lines of CSS live inside 89 inline <style> blocks
 * across the views. It did, however, already have a token layer: 115 of 134
 * templates use var(--bg) / var(--accent) / var(--text) and friends, fed from
 * the tenants table by src/Views/partials/theme.php.
 *
 * So this file does two things. First it defines the House Rules scale as
 * --hr-* custom properties. Then it BRIDGES: it repoints the variable names the
 * app already uses at those values. That one indirection re-skins every
 * token-using template at once, without touching them.
 *
 * LOAD ORDER IS LOAD-BEARING
 *
 * Link this BEFORE partials/theme.php runs. theme.php emits a :root block from
 * tenant DB values, and it must be able to override these defaults — that is
 * how the white-label machinery keeps working. Anything that must beat tenant
 * data belongs in a page stylesheet, not here.
 *
 * CACHE: /assets/ is served with `expires 30d` (deploy/hrtrivia.conf) and this
 * app has no build step or hashed filenames, so this file MUST be linked
 * through hr_asset() in src/helpers.php, which appends ?v=<filemtime>. Link it
 * bare and a change is invisible to returning browsers for a month.
 */

/* --------------------------------------------------------------- typefaces */
/*
 * Self-hosted rather than pulled from Google, so this app serves the exact same
 * files as the main site and one fewer third party can change how the brand
 * looks. Copied from ~/houserules/public/assets (the @fontsource build output).
 * CSP already allows this: font-src 'self'.
 *
 * Boogaloo ships ONE weight. Never set font-weight:700 on it — the browser
 * synthesises a bold and smears the outline sideways instead of loading a
 * bolder cut, because there is no bolder cut to load.
 */
@font-face {
  font-family: 'Boogaloo';
  src: url('/assets/fonts/boogaloo-400.woff2') format('woff2'),
       url('/assets/fonts/boogaloo-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gaegu';
  src: url('/assets/fonts/gaegu-400.woff2') format('woff2'),
       url('/assets/fonts/gaegu-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gaegu';
  src: url('/assets/fonts/gaegu-700.woff2') format('woff2'),
       url('/assets/fonts/gaegu-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- the palette */

:root {
  --hr-cream: #f6ecd9;        /* page ground */
  --hr-card: #f9f4e6;         /* cards, inputs, mascot "paper" */
  --hr-hatch: #efe3c8;        /* the darker band / second surface */
  --hr-ink: #33241a;          /* every outline and all body text */
  --hr-tomato: #d94f2b;
  --hr-teal: #33776b;
  --hr-gold: #e3a234;
  --hr-gold-shadow: #b57a1e;

  /*
   * Two accessibility-driven additions to the export's palette, both carried
   * over from the main site. A display colour and a text colour have different
   * jobs: gold on cream is ~1.8:1 and fails outright, so gold TYPE uses
   * --hr-gold-text (~3.4:1, passes for large text) while the fill stays bright.
   * Teal is ~4.2:1 — fine for display type, marginal for inline body links.
   */
  --hr-gold-text: #b57a1e;
  --hr-teal-link: #2a6157;
  --hr-on-dark: #f6ecd9;

  /*
   * DERIVED, not from the main site: a second dark surface level. The brochure
   * site never needed one because it has no dark screens. Ink lightened ~7% so
   * a raised card reads as raised without introducing a new hue.
   */
  --hr-ink-raised: #45362c;
  --hr-ink-border: #5a4632;

  /*
   * DERIVED: correct/wrong indicators on the dark venue theme. Teal and tomato
   * at their brand values sit at ~2.5:1 on ink — not good enough for something
   * a player reads at a glance to learn whether they got it right. These are
   * the same two hues lifted until they carry on ink.
   */
  --hr-teal-bright: #5fb89f;
  --hr-tomato-bright: #f2795a;

  --hr-font-display: 'Boogaloo', cursive;
  --hr-font-hand: 'Gaegu', 'Comic Sans MS', cursive;
  --hr-font-ui: 'DM Sans', system-ui, -apple-system, sans-serif;
  --hr-font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  /* Signage: functional game-screen text read at distance (question, answers,
     leaderboard). A condensed display face, not the decorative brand face. */
  --hr-font-signage: 'Bebas Neue', var(--hr-font-ui);

  --hr-border-hair: 2px;      /* inputs, chips, small pills */
  --hr-border-thick: 3px;     /* cards, buttons, frames */

  /*
   * A hairline. The brochure site has no need for one — it draws a few big
   * cards in full-strength ink and stops. An admin table with 40 rows separated
   * by full ink is a grid of black bars, so rules between rows get ink at low
   * strength instead. Still the brand colour, just not shouting.
   */
  --hr-rule: color-mix(in srgb, var(--hr-ink) 16%, transparent);
  --hr-rule-strong: color-mix(in srgb, var(--hr-ink) 30%, transparent);

  /* Offsets only, no colour — callers compose: var(--hr-shadow-hard) var(--hr-ink) */
  --hr-shadow-hard: 5px 5px 0;
  --hr-shadow-hard-lg: 6px 6px 0;
  --hr-shadow-lift: 0 4px 0;

  /* Asymmetric radii, stored as complete four-value shorthands. */
  --hr-radius-a: 22px 18px 24px 20px;
  --hr-radius-b: 18px 24px 20px 22px;
  --hr-radius-c: 24px 20px 22px 18px;
  --hr-radius-field: 12px 14px 12px 16px;
  --hr-radius-pill: 999px;
}

/* ------------------------------------------------------------- the bridge */
/*
 * The app's existing variable names, repointed at the scale above. This is the
 * whole trick: every template already written against --bg / --accent / --text
 * changes here and nowhere else.
 *
 * Kept in its own block, and deliberately NOT merged into the :root above, so
 * it stays obvious which names are ours and which are inherited from the fork.
 */
:root {
  --bg: var(--hr-cream);
  --surface: var(--hr-card);
  --surface2: var(--hr-hatch);
  --surface3: var(--hr-hatch);
  --surface-text: var(--hr-ink);
  --card-bg: var(--hr-card);
  --card-border: var(--hr-ink);

  --text: var(--hr-ink);
  /*
   * Real values rather than ink at an alpha, because several call sites
   * composite muted text over a card rather than the page, and an alpha would
   * shift colour between the two.
   */
  --muted: #6b5645;
  --muted2: #8a7461;

  /*
   * A hairline, NOT full ink — and this is the single most load-bearing choice
   * in the bridge.
   *
   * The brochure site draws a handful of big cards in full-strength ink at 2-3px
   * and stops. This app uses --border for hundreds of ONE-pixel rules: table
   * row separators, section dividers, input outlines, and the 1px grid gaps that
   * several layouts draw by giving a gap'd grid a --border background. Mapping
   * it to solid ink turned every one of those into a hard black line, and turned
   * the homepage stats grid into a solid black slab.
   *
   * So --border is the hairline, and anything that genuinely wants the full ink
   * outline asks for var(--hr-ink) explicitly — the admin panels and stat cards,
   * and the auth card, all do.
   */
  --border: var(--hr-rule-strong);
  --border2: var(--hr-rule);

  --accent: var(--hr-gold);
  --accent2: var(--hr-tomato);

  /*
   * The accent, as TEXT.
   *
   * A display colour and a text colour have different jobs. Gold #e3a234 on
   * cream is about 1.8:1 — a hard failure — and the views used color:var(--accent)
   * in 45 places for eyebrows, labels and figures. Mixing the accent toward ink
   * keeps it recognisably the accent, tracks a tenant who changes it, and lands
   * near 4:1: comfortably past the 3:1 bar for large text and close to the 4.5:1
   * for body. The fill stays the bright accent; only type uses this.
   *
   * The venue theme redefines it to the accent itself — gold on ink is already
   * about 7:1 and darkening it there would only make it harder to read.
   */
  --hr-accent-text: color-mix(in srgb, var(--accent) 60%, var(--hr-ink));

  /*
   * Podium medals. These are the one set of colours that genuinely ARE those
   * colours rather than a brand role, so they resist tokenising — but literal
   * #ffd700 / #c0c0c0 / #cd7f32 were chosen against a near-black page. On cream
   * gold is about 1.5:1 and silver about 1.9:1, i.e. barely there, which is how
   * the 2nd and 3rd place columns on /teams ended up all but invisible.
   *
   * These are the same three metals darkened until they carry on cream. The
   * venue theme puts the bright originals back, because on ink they were right
   * all along.
   */
  --hr-medal-gold: #b57a1e;
  --hr-medal-silver: #6f6a5d;
  --hr-medal-bronze: #a05a22;

  /*
   * Semantic status colours. green/red are correct/wrong across the game
   * screens, so they map to the two brand hues that read as go and stop —
   * teal and tomato — rather than to anything new.
   */
  --green: var(--hr-teal);
  --red: var(--hr-tomato);
  --blue: var(--hr-teal-link);
  /*
   * --purple has no brand equivalent, and mapping it to tomato like --red made
   * the two indistinguishable — which matters, because the question bank uses
   * them for "hard" and "impossible" side by side, and the media tags for image
   * and video. Ink is the honest fourth step: it is already in the palette, it
   * reads as the most severe of the four, and nothing else uses it as a tag.
   */
  --purple: var(--hr-ink);

  --btn-bg: var(--hr-gold);
  --btn-text: var(--hr-ink);
  --btn-hover: var(--hr-gold-shadow);
  --btn-hover-text: var(--hr-ink);

  --font-heading: var(--hr-font-display);
  --font-body: var(--hr-font-ui);
  --font-signage: var(--hr-font-signage);
  /* Referenced by the game-breakdown modal and never defined anywhere — a
     pre-existing gap, not one this restyle introduced. */
  --font-mono: var(--hr-font-mono);

  --radius: var(--hr-radius-a);
}

/* -------------------------------------------------------- the venue theme */
/*
 * For screens that live in the room: the projector and the host console.
 *
 * A brochure site is read on a phone in daylight; a projector throws its
 * picture at a wall in a dim bar, where a cream ground is a large bright
 * rectangle that washes out and lights up the room. This keeps the brand and
 * inverts the ground — no new hues, just ink where cream was.
 *
 * Set data-hr-theme="venue" on <html> or <body>.
 *
 * The selector is qualified with a tag on purpose. partials/theme.php emits a
 * plain `:root` block from tenant data AFTER this file loads, and `:root` and
 * `[data-hr-theme="venue"]` have identical specificity (0,1,0) — so on the
 * <html> element the later one would win and tenant colours would quietly
 * override the venue theme on exactly the two screens that need it most.
 * `html[data-hr-theme="venue"]` is 0,1,1 and wins regardless of order. The
 * body variant is here so a view can scope the theme to part of a page.
 */
html[data-hr-theme="venue"],
body[data-hr-theme="venue"] {
  --bg: var(--hr-ink);
  --surface: var(--hr-ink-raised);
  --surface2: var(--hr-teal);
  --surface3: var(--hr-ink-raised);
  --surface-text: var(--hr-on-dark);
  --card-bg: var(--hr-ink-raised);
  --card-border: var(--hr-ink-border);

  --text: var(--hr-on-dark);
  --muted: #bdae99;
  --muted2: #9c8a73;

  --border: var(--hr-ink-border);
  --border2: var(--hr-ink-border);

  /* Ink on ink is invisible — rules here are cream held right back. */
  --hr-rule: color-mix(in srgb, var(--hr-on-dark) 16%, transparent);
  --hr-rule-strong: color-mix(in srgb, var(--hr-on-dark) 30%, transparent);

  --accent: var(--hr-gold);
  --accent2: var(--hr-tomato-bright);

  /* Gold on ink is already ~7:1; darkening it here would hurt, not help. */
  --hr-accent-text: var(--hr-gold);

  /* The bright metals, which is what they were drawn for. */
  --hr-medal-gold: #ffd700;
  --hr-medal-silver: #c0c0c0;
  --hr-medal-bronze: #cd7f32;

  --green: var(--hr-teal-bright);
  --red: var(--hr-tomato-bright);
  --blue: #7fb3d5;
  /* Cream on ink is the counterpart of ink on cream — see the note above. */
  --purple: var(--hr-on-dark);

  --btn-bg: var(--hr-gold);
  --btn-text: var(--hr-ink);
  --btn-hover: var(--hr-gold-shadow);
  --btn-hover-text: var(--hr-ink);
}

/* -------------------------------------------------------- the admin theme */
/*
 * The admin console works the venue theme's ground with two differences: the
 * second surface cannot be teal (it is table headers and filter bars here, not
 * a stage prop), and headings drop the display face for the UI face — a
 * console is read all day, and Boogaloo at 13px in a data table is charm in
 * the wrong place.
 *
 * Same tag-qualified selector trick as the venue theme above: theme.php's
 * trailing plain `:root` must not beat this block. --accent/--accent2 are
 * deliberately absent so tenant accents still apply in admin.
 */
html[data-hr-theme="admin"],
body[data-hr-theme="admin"] {
  /* The console's component CSS names --hr-card/--hr-hatch directly (inputs,
     table headers, filter bars); restating them here darkens all of those
     without touching the rules. Scoped, so the cream pages keep the originals. */
  --hr-card: var(--hr-ink-raised);
  --hr-hatch: color-mix(in srgb, var(--hr-on-dark) 8%, var(--hr-ink));

  --bg: var(--hr-ink);
  --surface: var(--hr-ink-raised);
  --surface2: color-mix(in srgb, var(--hr-on-dark) 8%, var(--hr-ink-raised));
  --surface3: var(--hr-ink-raised);
  --surface-text: var(--hr-on-dark);
  --card-bg: var(--hr-ink-raised);
  --card-border: var(--hr-ink-border);

  --text: var(--hr-on-dark);
  --muted: #bdae99;
  --muted2: #9c8a73;

  --border: var(--hr-ink-border);
  --border2: var(--hr-ink-border);

  --hr-rule: color-mix(in srgb, var(--hr-on-dark) 16%, transparent);
  --hr-rule-strong: color-mix(in srgb, var(--hr-on-dark) 30%, transparent);

  --hr-accent-text: var(--hr-gold);

  --green: var(--hr-teal-bright);
  --red: var(--hr-tomato-bright);
  --blue: #7fb3d5;
  --purple: var(--hr-on-dark);

  --btn-bg: var(--hr-gold);
  --btn-text: var(--hr-ink);
  --btn-hover: var(--hr-gold-shadow);
  --btn-hover-text: var(--hr-ink);

  /* Headings in the UI face — see the note at the top of this block. */
  --font-heading: var(--hr-font-ui);
}

/* ------------------------------------------------------------- primitives */
/*
 * Deliberately few, and all hr- prefixed. This file is loaded on every screen
 * in the app, so anything it defines on a bare element or on an existing class
 * name changes 134 templates at once. Component restyling belongs with the
 * component. What lives here is only what the brand itself needs.
 */

/* The mascots, rendered inline by Mascot::svg(). */
.hr-mascot {
  display: block;
  flex: 0 0 auto;
}

/*
 * The drawings carry data-fill="paper" on the shapes that are meant to read as
 * the page behind them — 13 elements across the cast. That attribute is a hook,
 * not a fill: the SVGs deliberately declare no colour for it, so a mascot
 * inherits whatever ground it is sitting on. Without this rule they render
 * unfilled and look like wireframes.
 *
 * The venue theme has to restate it because the ground is ink there, not cream,
 * and a cream-filled house on a dark projector is a glowing box.
 */
.hr-mascot [data-fill="paper"] {
  fill: var(--hr-card);
}

[data-hr-theme="venue"] .hr-mascot [data-fill="paper"],
[data-hr-theme="admin"] .hr-mascot [data-fill="paper"] {
  fill: var(--hr-ink-raised);
}

/* The wordmark: house mark + "HOUSE RULES", as on the main site's nav. */
.hr-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hr-font-display);
  letter-spacing: 1px;
  color: var(--hr-tomato);
  text-decoration: none;
  line-height: 1;
}

.hr-wordmark__text {
  /* Boogaloo has one weight; see the @font-face note. */
  font-weight: 400;
  white-space: nowrap;
}

/*
 * Display type. Applied to headings and big numbers, never to a question or an
 * answer — those stay in the UI sans, which is the whole point of the hybrid
 * decision. A trivia answer read at speed across a bar is not the place for a
 * handwriting face.
 */
.hr-display {
  font-family: var(--hr-font-display);
  font-weight: 400;
  letter-spacing: .5px;
}

/* Body copy on the marketing and public pages only. */
.hr-hand {
  font-family: var(--hr-font-hand);
}