/* DRTX brand tokens — v1.1 (October 2026) */

/*
 * AT THE ROOT, and served at /brand/ by everything that draws a screen.
 *
 * It lived in arena/brand/ and the scoring screens could not reach it, so
 * play/css/ hardcoded twelve colours the brand had never heard of. They were
 * not bad colours — every one clears AA, and they are in here now under their
 * own names — but a palette nobody can import is a palette nobody uses.
 *
 * Same arrangement as engine/: one directory at the root, mounted at one
 * absolute path by the venue hub and by the cloud, so `/brand/drtx-tokens.css`
 * resolves on a hub serving play/ at / and in the cloud serving it at /play/.
 *
 * site/ keeps its own copy because it is a different ORIGIN (drtx.co.uk, not
 * app.drtx.co.uk) and cannot share a mount. test/test-brand.js asserts the two
 * stay identical.
 *
 * One deliberate change from the brand original: its
 * @import of fonts.googleapis.com has been removed.
 *
 * Three reasons, in order of how much they matter:
 *  - Every visitor's browser would announce itself to a third party to read
 *    a page about a darts club. The people on these pages did not agree to
 *    that and there is no reason to ask them to.
 *  - The Content-Security-Policy on this site allows nothing off-origin, so
 *    the request would be blocked anyway and the page would quietly fall
 *    back to Arial while reporting a violation nobody is reading.
 *  - A venue on a pub's broadband should not wait on somebody else's CDN.
 *
 * The same two faces are served from fonts/ and declared at the top of
 * this file. Updating the brand file means re-applying this.
 */

/*
 * THE TWO FACES, declared here rather than in a stylesheet, because this
 * is the only file every DRTX page loads.
 *
 * They used to be declared in css/arena.css, which the scoring screens do
 * not load. So play/ named 'Archivo' and 'JetBrains Mono' in about thirty
 * rules, nothing anywhere fetched either file, and the desk, the chalker
 * and the WALL DISPLAY all rendered in Arial and Consolas. Nobody spots
 * that from a screenshot — it just looks a bit cheap, which is the one
 * thing a scoreboard on a pub wall cannot afford to look.
 *
 * The URLs are root-relative on purpose. This file is served from /brand/
 * on app.drtx.co.uk, from /brand/ on a venue hub serving play/ at /, and
 * from /brand/ on drtx.co.uk, which is a different origin with its own
 * copy of this file and its own fonts. A relative ../fonts/ would mean
 * three different right answers; /fonts/ is one.
 *
 * Both are the VARIABLE cuts. Archivo carries the width axis the display
 * style needs and a static cut cannot do font-stretch. The second src is
 * the same file: a browser too old to understand variations loads it as a
 * static font at its default instance, which is the right fallback and
 * the reason the tablet floor can keep up.
 */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo[wdth,wght].ttf') format('truetype-variations'),
       url('/fonts/Archivo[wdth,wght].ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono[wght].ttf') format('truetype-variations'),
       url('/fonts/JetBrainsMono[wght].ttf') format('truetype');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* Brand colours */
  --drtx-navy: #082F49;
  --drtx-teal: #0E7490;
  --drtx-cyan: #06B6D4;
  /* Neutrals */
  --drtx-midnight: #04131F;
  --drtx-ice: #E9F0F4;
  --drtx-white: #FFFFFF;

  /* Semantic (dark theme default) */
  --drtx-bg: var(--drtx-midnight);
  --drtx-surface: var(--drtx-navy);
  --drtx-text: var(--drtx-white);
  --drtx-text-muted: #B9D3DF;
  --drtx-accent: var(--drtx-cyan);
  --drtx-live: var(--drtx-cyan);
  --drtx-border: #1D4A66;

  /*
   * Status — saying good, careful and wrong.
   *
   * The brand shipped an identity palette and no way to say any of those, so
   * every screen that needed one invented it, Arena included. These are the
   * values those screens had already converged on, written down once.
   *
   * The ratio beside each is against --drtx-bg and --drtx-surface, measured
   * rather than assumed, because this is where a palette quietly stops being
   * readable across a room. Anything added here clears 4.5:1 on both, or says
   * in its own comment why it does not.
   */
  --drtx-ok: #3DDC84;             /* 10.5:1 on bg, 7.8:1 on surface */
  --drtx-warn: #FFB020;           /* 10.3:1, 7.6:1 */
  --drtx-danger: #FF8A9B;         /* 8.4:1, 6.2:1 — the brand's own danger red
                                     measured 4.22:1 on raised navy and failed */
  --drtx-danger-strong: #FF4D4D;  /* 5.7:1 on bg but 4.2:1 on surface, so bold
                                     or large only — never body copy */

  /* A notice somebody has to read before they act. */
  --drtx-notice-bg: #3B2A08;
  --drtx-notice-edge: #A16207;
  --drtx-notice-text: #FDE68A;    /* 11.1:1 on --drtx-notice-bg */

  /*
   * Depth. A scoring screen is one colour at arm's length, so it needs a step
   * above the surface and a divider quieter than a border.
   */
  --drtx-raised: #0B3C5D;
  --drtx-border-soft: #113449;

  /*
   * Where a scorer is typing. Deliberately pure black: the cell being typed
   * into has to be unmistakable from the next seat, and every other shade on
   * these screens is within a few points of its neighbours.
   */
  --drtx-typing: #000000;
  --drtx-typing-press: #141414;

  /*
   * Print. Deliberately outside both themes: a printed list is black on
   * white whatever was on screen, and a navy block costs somebody a
   * cartridge. Here rather than in the one stylesheet that prints, because
   * the rule is that a colour lives in one place and the exceptions are the
   * part nobody maintains.
   */
  --drtx-print-bg: #FFFFFF;
  --drtx-print-ink: #000000;
  --drtx-print-rule: #999999;

  /* Type */
  --drtx-font-sans: 'Archivo', 'Arial', sans-serif;
  --drtx-font-display: 'Archivo', 'Arial Black', sans-serif;
  --drtx-font-mono: 'JetBrains Mono', 'Consolas', monospace;
  /*
   * The score cells on the chalker are a slate, and this is the chalk.
   * A deliberate exception to the two faces above rather than an
   * oversight: the cell is pretending to be the thing it replaced, and
   * it is the one place on any screen where that is the point. Named
   * here so it is a brand decision somebody made, which is the whole
   * argument for this file.
   *
   * Every one is a system face and none is loaded: the first three are
   * Apple, the next two Windows, and Comic Sans is the one thing that is
   * everywhere. Where none exists — most Android tablets — cursive lands
   * on something handwritten, and if even that fails the cell is still a
   * black box with a number in it, which is what it has to be.
   */
  --drtx-font-chalk: 'Chalkboard SE', 'Chalkduster', 'Bradley Hand',
                     'Segoe Print', 'Segoe Script', 'Comic Sans MS', cursive;
  --drtx-display-stretch: 125%;
  --drtx-h2-stretch: 112%;
  --drtx-label-tracking: 0.14em;

  /* Shape */
  --drtx-radius: 4px;
  --drtx-edge-bar: 5px;
}

/*
 * Light theme.
 *
 * Nothing selects it today — every page is hard-set data-theme="dark" — and it
 * is carried because the brand original has it. The status colours below are
 * NOT the dark ones: #3DDC84 on white is 1.7:1 and unreadable, so a half-filled
 * light theme is a trap for whoever turns this on. Every value here is measured
 * against both --drtx-bg and --drtx-surface in their light forms.
 */
[data-theme="light"] {
  --drtx-bg: var(--drtx-white);
  --drtx-surface: var(--drtx-ice);
  --drtx-text: var(--drtx-navy);
  --drtx-text-muted: #24485C;
  --drtx-accent: var(--drtx-teal);
  --drtx-border: #C9D8E0;

  --drtx-ok: #11693A;             /* 6.8:1 on white, 5.9:1 on ice */
  --drtx-warn: #7A4E00;           /* 7.2:1, 6.3:1 */
  --drtx-danger: #A81B33;         /* 7.3:1, 6.4:1 */
  --drtx-danger-strong: #8C0F22;  /* 9.5:1, 8.3:1 */

  --drtx-notice-bg: #FFF4D6;
  --drtx-notice-edge: #C8912B;
  --drtx-notice-text: #7A4E00;    /* 6.6:1 on --drtx-notice-bg */

  --drtx-raised: #E3EDF3;
  --drtx-border-soft: #DCE7EE;

  /* Inverted with everything else: the cell being typed into stays the thing
   * that stands out, which on a white screen means white on dark. */
  --drtx-typing: var(--drtx-navy);
  --drtx-typing-press: #0C3D5C;
}

.drtx-display { font-family: var(--drtx-font-display); font-weight: 900; font-stretch: var(--drtx-display-stretch); text-transform: uppercase; line-height: 0.95; }
.drtx-h2 { font-family: var(--drtx-font-sans); font-weight: 800; font-stretch: var(--drtx-h2-stretch); }
.drtx-label { font-family: var(--drtx-font-mono); font-size: 12px; letter-spacing: var(--drtx-label-tracking); text-transform: uppercase; }
.drtx-score { font-family: var(--drtx-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.drtx-live { box-shadow: inset var(--drtx-edge-bar) 0 0 var(--drtx-live); }