/* The phrase chart's palette, rule and fonts, shared by every landing page. Tune a value only if
   a contrast measurement forces it, and then change it here, not in a page. */

@font-face {
  font-family: "JT Looped";
  src: url("./fonts/noto-sans-thai-looped-thai-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "JT Looped";
  src: url("./fonts/noto-sans-thai-looped-thai-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "JT Looped";
  src: url("./fonts/noto-sans-thai-looped-thai-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "JT Looped";
  src: url("./fonts/noto-sans-thai-looped-thai-800-normal.woff2") format("woff2");
  font-weight: 800; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("./fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("./fonts/familjen-grotesk-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

:root {
  /* Poster paper and the key line. Bright white, not cream. */
  --paper: #fdfcf8;
  --ink: #16130e;            /* 18.05:1 on paper */
  --ink-2: #4a443a;          /* secondary text, measure before use on a tint */
  --rule: #16130e;           /* the chart's ruled grid */
  --rule-w: 2px;

  /* Four chart colours: flat cell grounds and illustration fills. */
  --red: #e5432a;            /* ink on red 4.56:1 */
  --yellow: #ffc531;         /* ink on yellow 11.7:1 */
  --green: #2e9a5c;          /* ink on green 5.2:1; white on green 3.56 (large only) */
  --blue: #2856c6;           /* white on blue 6.49:1; ink on blue fails */

  /* Tints for quiet cells. Measure ink on each. */
  --red-t: #fbe0d9;
  --yellow-t: #fff1c7;
  --green-t: #d9f0e2;
  --blue-t: #dfe7fb;

  /* Text that sits on a colour, not on the paper. These do not flip with the theme the way ink
     and paper do: a red or yellow cell needs dark text in both, a blue or night cell light text. */
  --on-colour: #16130e;      /* on red, yellow, green */
  --on-colour-2: #3d372d;    /* secondary text on yellow */
  --on-deep: #fdfcf8;        /* on blue and on the night cell */
  --on-deep-2: #dfe7fb;      /* romanization on blue and night */
  --night: #16130e;          /* the night cell and the call screen */
  --blue-ink: #2856c6;       /* blue used as a line or as text on the paper */

  /* Drawings are printed stickers: ink key line and paper fill in both themes. Only a line drawn
     straight onto the cell ground (a strap, a handle) follows the page ink. */
  --pic-line: #16130e;
  --pic-paper: #fdfcf8;
  --pic-free: var(--ink);

  /* Which logo file shows: the ink one on paper, the paper one at night. */
  --show-day: block;
  --show-night: none;

  --font-latin: "Familjen Grotesk", "JT Looped", Arial, sans-serif;
  --font-thai: "JT Looped", "Familjen Grotesk", Arial, sans-serif;
  color-scheme: light;
}

/* The chart at night. The same printed chart on a deep ink ground: paper-coloured text, a softer
   key line that still reads as a grid, the four chart colours lifted a little so they hold on the
   dark, and tints that become deep tints. The two blocks must stay identical: the first is the
   explicit choice, the second follows the device unless light was chosen. */
html[data-theme="dark"] {
  --paper: #1c1b18;
  --ink: #efece5;
  --ink-2: #b8b2a6;
  --rule: #8f897d;
  --red: #ef5638;
  --yellow: #f4bd36;
  --green: #3dab6a;
  --blue: #2b56bd;
  --red-t: #3b231d;
  --yellow-t: #352e1b;
  --green-t: #1b3325;
  --blue-t: #1e2740;
  --on-colour: #16130e;
  --on-colour-2: #3d372d;
  --on-deep: #f6f3ec;
  --on-deep-2: #dde2f0;
  --night: #0f0e0c;
  --blue-ink: #93b2ff;
  --pic-line: #16130e;
  --pic-paper: #ebe7de;
  --pic-free: var(--ink);
  --pic-red-t: #fbe0d9;
  --pic-yellow-t: #fff1c7;
  --pic-green-t: #d9f0e2;
  --pic-blue-t: #dfe7fb;
  --show-day: none;
  --show-night: block;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper: #1c1b18;
    --ink: #efece5;
    --ink-2: #b8b2a6;
    --rule: #8f897d;
    --red: #ef5638;
    --yellow: #f4bd36;
    --green: #3dab6a;
    --blue: #2b56bd;
    --red-t: #3b231d;
    --yellow-t: #352e1b;
    --green-t: #1b3325;
    --blue-t: #1e2740;
    --on-colour: #16130e;
    --on-colour-2: #3d372d;
    --on-deep: #f6f3ec;
    --on-deep-2: #dde2f0;
    --night: #0f0e0c;
    --blue-ink: #93b2ff;
    --pic-line: #16130e;
    --pic-paper: #ebe7de;
    --pic-free: var(--ink);
    --pic-red-t: #fbe0d9;
    --pic-yellow-t: #fff1c7;
    --pic-green-t: #d9f0e2;
    --pic-blue-t: #dfe7fb;
    --show-day: none;
    --show-night: block;
    color-scheme: dark;
  }
}