/*
 * Visuelize brand: "Navy Signal". The single source of the brand palette and
 * type. Every page gets it: app pages through the @import at the top of
 * base.css, standalone pages (index.html, error.html) through their own <link>.
 *
 * Rules for any page, now or later:
 *  - Colour comes from these --vz-* tokens (or the semantic tokens base.css
 *    builds from them). No raw hex in page CSS or inline styles.
 *  - Gold is the brand mark and the live cue only: the logo diamond, an agenda
 *    item marked Now, the screen that is live. Buttons, links, selection and
 *    focus are cobalt.
 *  - Text meets WCAG AA (4.5:1) on the surface it sits on. The ink ramps below
 *    are chosen so ink-0..ink-3 all pass on their own theme's surfaces.
 *  - No em-dash or en-dash in visible copy. `npm run check:brand` enforces the
 *    palette and dash rules (tools/check-brand.js).
 */

/* Latin subsets of the brand faces, self-hosted (SIL OFL, see /fonts/README.txt).
   Bricolage and Plex Sans are variable, so one file covers every weight. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); }

:root {
  /* navy: the dark room */
  --vz-navy-975: #04070f;   /* inside a screen */
  --vz-navy-950: #060a14;
  --vz-navy-900: #080d1a;   /* dark page */
  --vz-navy-850: #0e1528;   /* dark surface */
  --vz-navy-800: #121b31;   /* dark hover */
  --vz-navy-750: #16203a;   /* dark raised */
  --vz-navy-700: #1d2a47;
  --vz-navy-650: #24304d;   /* dark hairline */
  --vz-navy-brand: #0e1a33; /* logo ground */

  /* graphite: navy with the blue pulled back, for people who want a quieter dark */
  --vz-graphite-900: #0b0e15;
  --vz-graphite-850: #11151e;
  --vz-graphite-750: #181d29;
  --vz-graphite-700: #212735;
  --vz-graphite-650: #2c3345;

  /* mist: the lit room */
  --vz-mist-50:  #fdfeff;   /* light raised */
  --vz-mist-75:  #fcfdff;   /* light surface */
  --vz-mist-100: #f5f7fb;   /* light page */
  --vz-mist-150: #eef2f9;   /* light hover */
  --vz-mist-200: #e9eef6;
  --vz-mist-250: #dde3ee;
  --vz-mist-300: #dce2ed;   /* light hairline */
  --vz-mist-350: #cfd7e5;   /* hairline on a mist-200 page */
  --vz-white:    #ffffff;   /* paper surface */

  /* ink on navy */
  --vz-ink-d0: #eef2fa;
  --vz-ink-d1: #b4bfd4;
  --vz-ink-d2: #8391ab;
  --vz-ink-d3: #72809b;
  --vz-ink-d2b: #8f9cb5;    /* d2 lifted for raised navy surfaces */
  --vz-ink-d3b: #7d8aa3;
  /* ink on mist */
  --vz-ink-l0: #0c1426;
  --vz-ink-l1: #34405a;
  --vz-ink-l2: #56627a;
  --vz-ink-l3: #5f6b84;

  /* cobalt: every action */
  --vz-cobalt-300: #9db6ff;
  --vz-cobalt-400: #7fa2ff;  /* text and hover on navy */
  --vz-cobalt-500: #5b86ff;  /* fill on navy */
  --vz-cobalt-600: #2f5fe8;  /* fill on mist */
  --vz-cobalt-700: #2447c4;  /* text and hover on mist */
  --vz-on-cobalt-dark:  #06102a;  /* label on cobalt-500 */
  --vz-on-cobalt-light: #f8faff;  /* label on cobalt-600 */

  /* gold: the brand and the live cue, nothing else */
  --vz-gold:      #e2b33c;
  --vz-gold-deep: #8a6508;   /* gold that must read on mist */
  --vz-on-gold:   #1a1405;

  /* status */
  --vz-red:        #f2555a;
  --vz-red-deep:   #c9282d;
  --vz-red-text:   #ff7a80;   /* red TEXT on navy (fill red is 4.2:1 there) */
  --vz-on-red:     #1a0506;
  --vz-green:      #43c088;
  --vz-green-deep: #1f7a4d;
  --vz-amber:      #e8b339;
  --vz-amber-deep: #8a5a00;   /* amber that must read on mist */

  /* type */
  --vz-font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --vz-font-ui:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --vz-font-mono:    'IBM Plex Mono', 'SF Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* shape: controls 6, containers 10, large panels 16, choice chips pill */
  --vz-r-ctl:  6px;
  --vz-r-box:  10px;
  --vz-r-lg:   16px;
  --vz-r-pill: 999px;

  /* shadows are navy-tinted, never pure black */
  --vz-shade-dark:  3, 6, 16;
  --vz-shade-light: 14, 26, 51;

  /* The same colours as bare "r, g, b" triplets, for rgba(var(--x), a).
     color-mix() would be tidier, but a Chrome 49 room TV drops it and paints
     nothing; theme.js refreshes the live values for every theme and accent. */
  --vz-navy-900-rgb: 8, 13, 26;
  --vz-navy-750-rgb: 22, 32, 58;
  --vz-cobalt-500-rgb: 91, 134, 255;
  --vz-ink-d0-rgb: 238, 242, 250;
  --vz-ink-d2-rgb: 143, 156, 181;
  --vz-red-rgb: 242, 85, 90;
}