/* brettboard.dk - layered over site.css, never replacing it.
 *
 * A RULES REFERENCE, not a shop. The reader has a box open on the table and an
 * argument to settle: does the bank pay out on a mortgaged property, does a
 * road get built before or after the roll. So the page has to be readable at
 * arm's length across a table, in evening lamplight, by someone who is not
 * sitting down to read it.
 *
 * The palette is the table itself: dark felt green, the warm cream of an old
 * rules booklet, and brass for the accent - the colour of a meeple, a token, a
 * wooden piece, which is the one thing every game in this cluster has in
 * common. No red-and-yellow toy-shop brightness: this site sells nothing, and
 * the archived domain was a hobbyist's reference from 2000, not a retailer.
 *
 * Headings are serif. Danish board-game vocabulary is long and compound -
 * "samarbejdsspil", "forvekslingsmuligheder", "opbevaringsløsninger" - and a
 * serif carries those words at display size where a heavy sans turns them into
 * a wall. Body stays sans for the same reason the rest of the network does.
 *
 * Contrast is measured, not guessed: body ink clears AAA on the cream, and the
 * brass accent had to be darkened well past the obvious brass before white sat
 * on it at 4.5:1 - so the light theme uses the darkened brass for anything that
 * carries text, and keeps the bright brass for rules, borders and marks.
 */

:root[data-site="brettboard"] {
  /* An old rules booklet: cream, not white, and not the warm sand the Danish
     bird site uses - this one is a shade greener so it sits under the felt. */
  --paper: #faf8f2;
  --paper-alt: #efece1;

  --ink: #1b211f;                /* 15.4:1 on the cream */
  --ink-soft: #454d4a;
  /* Dates, counts and captions. Measured on the darker of the two
     surfaces, not the lighter: 4.9:1 on the cream was 4.4:1 on the hero
     tint, which is the way this token has failed an audit before. */
  --ink-faint: #606864;          /* 5.4:1 cream, 4.9:1 hero tint */

  /* Brass, darkened until white clears 4.5:1 - it lands at 7:1. The bright brass below is for
     rules and marks only, never for text on a light ground. */
  --accent: #7a5117;
  /* site.css spends --accent-ink on TEXT - links, the current nav item, a card
     label, the byline - so it is accent-coloured ink on paper, not the colour
     that sits on the accent. Setting it to white painted every date and card
     label white on cream: six failures in the browser audit, and exactly the
     white-on-white this network has been caught by twice. The colour for text
     ON the accent is --on-accent.  */
  --accent-ink: #7a5117;
  --on-accent: #ffffff;
  --accent-soft: #f4ead6;
  --brass: #c9973f;              /* on the dark felt only */
  --felt: #1d2b2b;
  --felt-soft: #27393a;

  --line: #ddd8c9;
  --radius: 4px;                 /* a tile, not a pill */
  --measure: 38rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

:root[data-site="brettboard"] {
  --header-bg: #faf8f2;
  --header-line: #ddd8c9;
  --brand-word-ink: #1b211f;
  /* The section strip is the felt: white on it at 14.7:1. */
  --subbar-bg: #1d2b2b;
  --subbar-line: #16201f;
  --subbar-ink: #ffffff;
  --subbar-label: #c9973f;       /* brass on felt, 5.6:1 */

  --hero-bg: #efece1;
  --rail-surface: #ffffff;
  --rail-line: #ddd8c9;
  --rail-head: #1d2b2b;
  --rail-head-ink: #ffffff;
  --tile-ink: #ffffff;
  --drawer-bg: #ffffff;
  --drawer-line: #ddd8c9;
  --drawer-field: #faf8f2;
  --share-bg: #efece1;
  --warn-bg: #fdf4e3;
  --warn-line: #e6d4a8;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="brettboard"] {
    --paper: #141a19;
    --paper-alt: #1c2423;
    --ink: #eeeae0;
    --ink-soft: #c6c2b6;
    --ink-faint: #9a978c;
    /* The darkened brass is unreadable on a dark ground, so dark mode goes the
       other way: bright brass, dark ink on it. */
    --accent: #d9a84d;
    --accent-ink: #d9a84d;   /* 8.1:1 on the dark ground */
    --on-accent: #14100a;
    --accent-soft: #3a2d14;
    --line: #313937;
    --header-bg: #141a19;
    --header-line: #313937;
    --brand-word-ink: #eeeae0;
    --hero-bg: #1c2423;
    --rail-surface: #1c2423;
    --rail-line: #313937;
    --drawer-bg: #141a19;
    --drawer-line: #313937;
    --drawer-field: #1c2423;
    --share-bg: #1c2423;
    --warn-bg: #2a2313;
    --warn-line: #4a3d1c;
  }
}

:root[data-site="brettboard"] body { background: var(--paper); color: var(--ink); }

/* Long Danish compounds at display size: serif, and allowed to hyphenate
   rather than forcing a horizontal scrollbar on a phone. */
:root[data-site="brettboard"] h1,
:root[data-site="brettboard"] h2,
:root[data-site="brettboard"] h3 {
  font-family: var(--serif);
  letter-spacing: -0.01em;
  hyphens: auto;
  overflow-wrap: break-word;
}
:root[data-site="brettboard"] h1 { line-height: 1.12; }

/* A rules table is the highest-value block on a game page: it gets the felt
   header and square corners, so it reads as a reference rather than a card. */
:root[data-site="brettboard"] .spec-table th {
  background: var(--felt);
  color: #ffffff;
  font-family: var(--serif);
}
:root[data-site="brettboard"] .spec-table td { border-color: var(--line); }

/* Player count, playing time and age are the three facts every reader checks
   first, so they are set in tabular figures and never wrap mid-range. */
:root[data-site="brettboard"] .spec-table .players,
:root[data-site="brettboard"] .spec-table .playtime,
:root[data-site="brettboard"] .spec-table .age {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Where a page states a rule as the publisher writes it, the source line stays
   visible: a house rule quoted as the rule is how table arguments start. */
:root[data-site="brettboard"] .spec-source,
:root[data-site="brettboard"] .spec-table .source {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* Section tiles on the home page and hub pages: a token on a board. */
:root[data-site="brettboard"] .tile,
:root[data-site="brettboard"] .card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
}
:root[data-site="brettboard"] .tile:hover,
:root[data-site="brettboard"] .card:hover { border-color: var(--accent); }

/* In-body links carry the accent and an underline. The network's audit has
   caught white-on-white twice; an underlined, tinted link cannot fail that way
   even if a surface changes underneath it. */
:root[data-site="brettboard"] .prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
:root[data-site="brettboard"] .prose a:hover { text-decoration-thickness: 2px; }