/*
 * Booth typography. Six families across two scripts, bound to three roles.
 *
 * Self-hosted rather than loaded from the Google Fonts CDN on purpose: this runs
 * as a kiosk at a venue. A captive portal or a dead uplink would otherwise drop
 * the whole booth to a system serif on the one screen visitors actually look at.
 *
 * Roles, not family names, are what the UI references. Swapping a family is a
 * one-line change to a token at the bottom of this file and touches nothing else.
 *
 *   --font-display  the wordmark and section headings
 *   --font-ui       buttons and choice chips
 *   --font-body     status text and small print
 *
 * The Latin faces are the default. The Arabic faces re-bind those same three
 * tokens under [lang="ar"], so every rule in the UI stylesheet stays
 * script-agnostic - nothing downstream names a font.
 */

/* ---------------------------------------------------------------- English -- */

/*
 * 29LT Zawi is a commercial licence from 29Letters and is NOT redistributable, so
 * the file is not in this repo and --font-display no longer names it. The face is
 * declared and ready: once the licensed woff2 is dropped at the path below, put
 * '29LT Zawi' back at the front of --font-display and it takes over. The local()
 * entries come first, so a booth machine with the font installed system-wide needs
 * no file at all.
 *
 * It is deliberately NOT in the fallback chain in the meantime. Left there it is
 * requested on every load, 404s, and puts a console error on a kiosk that nobody
 * is watching - for a face that by definition cannot resolve.
 */
@font-face {
  font-family: '29LT Zawi';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('29LT Zawi'), local('29LTZawi'),
    url('/fonts/29lt-zawi-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- Arabic -- */

/*
 * The UKIJ faces ship as TTF, not woff2 - upstream publishes no woff2, and adding
 * a font-encoder dependency to convert them is not worth it for a booth served
 * over localhost where the difference is unmeasurable.
 *
 * Both are Uyghur Arabic-script fonts, and the two do NOT behave the same on
 * standard Arabic. Codepoint coverage says they do - both cmaps contain every
 * character this UI renders - but coverage is not shaping, and Qolyazma's
 * substitution tables follow Uyghur orthography. Rendered side by side against
 * Tajawal it silently produces the wrong word:
 *
 *   إطلالة  ->  ۇهلاله   (alef-hamza-below swapped for a Uyghur vowel)
 *   صقّار   ->  ـقار     (initial sad reduced to a stroke, shadda dropped)
 *   مدينة   ->  مدينه    (teh marbuta becomes heh)
 *   آمن     ->  من       (alef madda dropped outright)
 *   ٠١٢٣٤٥  ->  012345   (Arabic-Indic digits fall back to Latin)
 *
 * UKIJ Bom is correct on all of these, so Bom is the Arabic display face. Do not
 * put Qolyazma in an Arabic fallback chain. Its @font-face is kept because the
 * file ships and it is legitimately usable for Uyghur or as a decorative face,
 * but never for Arabic copy.
 */
@font-face {
  font-family: 'UKIJ Bom';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/UKIJBom.ttf') format('truetype');
}
@font-face {
  font-family: 'UKIJ Qolyazma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/UKIJQolyazma.ttf') format('truetype');
}

@font-face {
  font-family: 'Mada';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/mada-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Mada';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/mada-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- Tokens -- */

:root {
  /*
   * Nunito, not Fredoka, and not because Nunito is more display-like - it is that
   * Fredoka is already --font-ui. A display token that resolves to the UI face
   * collapses the two tiers into one, which is exactly what the missing Zawi was
   * doing: English headings and English buttons drew identically while the Arabic
   * side kept a real split (UKIJ Bom against Mada).
   *
   * Nunito is also --font-body, so the pair is held apart by weight instead - which
   * is what --font-display-weight is for.
   */
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-ui: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /*
   * A token rather than a number in each rule, because the right answer differs by
   * script. English needs 800 to hold a heading apart from body text set in the
   * same family. Arabic does not - UKIJ Bom and Tajawal are already different
   * faces - and Bom ships one weight, so anything above 400 is the browser
   * synthesising a bold: it thickens the strokes of a joined script and closes up
   * the counters. Latin gets the weight, Arabic gets the face.
   */
  --font-display-weight: 800;

  /*
   * Arabic faces render noticeably smaller than Latin at the same px value, which
   * leaves Arabic headings looking timid beside their English equivalents. Applied
   * as one multiplier rather than hand-tuning every size rule for the second script.
   */
  --font-scale: 1;
}

/*
 * Matches any element marked lang="ar", not just the document root, because the
 * language gate shows an Arabic label on an otherwise-English page. Custom
 * properties inherit, so tagging that one span is enough to re-font its subtree.
 */
:root[lang='ar'],
[lang='ar'] {
  /* Bom, not Qolyazma - see the shaping note above before changing this. */
  --font-display: 'UKIJ Bom', 'Mada', sans-serif;
  --font-ui: 'Mada', system-ui, sans-serif;
  --font-body: 'Tajawal', system-ui, sans-serif;
  --font-scale: 1.08;
  /* Bom has one real weight - see the note on the token. 600 is as far as the
     synthetic bold stays clean at heading sizes. */
  --font-display-weight: 600;
}