/*
 * THE UI'S TOKENS (AUUI-T-3): today's pages' tokens (ui/public/frame/tokens.css
 * in AUM/AURISA.git, the second UI's), every colour a page shows, in both
 * themes, and every spacing, radius and border width. Each colour is written
 * once with its light and its dark value (`light-dark()`), and the theme picks
 * which: the person's choice, on the root as `data-theme` (theme.js), else the
 * system's. Red is a pure red in both themes, so it is not taken for magenta
 * or amber (AURISA-DOC-61 §3). Petrol frames, teal acts, magenta only waits on
 * a person, red only ends. No page, style or script writes a colour or a
 * measure of its own (tests/pages.test.mjs).
 *
 * The three typefaces are the files fonts/ holds, with their licences.
 */

@font-face {
  font-family: 'Figtree';
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-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: 'Figtree';
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Urbanist';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/urbanist-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: 'Urbanist';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/urbanist-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the brand (doc/brand/README.md, Colours), the same in both themes */
  --petrol: #0c3940;
  --petrol-2: #154a52;
  --magenta: light-dark(#ff2e88, #ff4a98);
  --magenta-ink: #d6106f;
  --paper: #ecf5f4;
  --teal: #0b7c70;
  --teal-deep: #08655b;
  --teal-soft: light-dark(#e1f2ef, #123b3c);

  /* the page: light, and the brand's dark board */
  --ground: light-dark(#f4f8f8, #0a1f22);
  --surface: light-dark(#ffffff, #10292d);
  --ink: light-dark(var(--petrol), #e2edeb);
  --muted: light-dark(#56706f, #94b1ad);
  --faint: light-dark(#8aa3a1, #6b8985);
  --line: light-dark(#dce7e6, #1d3d42);
  --line-strong: light-dark(#c4d6d4, #2a5258);

  --frame: light-dark(var(--petrol), #051416);   /* the top bar */
  --link: light-dark(var(--teal), #3cc7b4);
  --accent-ink: light-dark(var(--teal-deep), #3cc7b4);  /* teal that carries text on a soft teal ground */
  --act: light-dark(var(--teal), #3cc7b4);              /* everything you can do */
  --act-hover: light-dark(var(--teal-deep), #5fd6c5);
  --on-act: light-dark(#ffffff, #06201f);
  --waits-fill: light-dark(var(--magenta-ink), #ff4a98); /* a count of what waits on you */
  --waits-soft: light-dark(#ffe8f2, #3a1d3b);
  --on-waits: light-dark(#ffffff, #1a0510);
  --ends: light-dark(#c62f2f, #ff3b3b);           /* a pure red: never the dark board's salmon */
  --ends-soft: light-dark(#fde8e8, #3b1a1a);
  --on-ends: light-dark(#ffffff, #1a0505);
  --hold: light-dark(#d08a00, #f5c76b);           /* something held, waiting on someone */
  --hold-ink: light-dark(#8a5a00, #f5c76b);
  --hold-soft: light-dark(#fdf1d8, #3a2e12);
  --hold-edge: color-mix(in srgb, var(--hold) 55%, var(--line));    /* the edge of a word held, such as the line saying the chat is out of reach */
  --shadow: light-dark(rgba(12, 57, 64, 0.35), rgba(0, 0, 0, 0.6));
  --dim: light-dark(rgba(5, 20, 22, 0.45), rgba(0, 0, 0, 0.6));    /* the page under a dialog */

  --on-frame: var(--paper);
  --on-frame-muted: #a9c7c3;
  --on-frame-soft: rgba(255, 255, 255, 0.08);
  --on-frame-edge: rgba(255, 255, 255, 0.16);

  /* spacing: every margin, padding and gap is one step of this scale */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* radius: a chip or a menu's row, a field or a button, a panel or a list, a circle */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-round: 999px;

  /* border: a field's or a panel's edge, the rule between a list's rows, the focus ring */
  --border-width: 2px;
  --border-width-thin: 1px;
  --outline-width: 3px;

  --ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Urbanist', 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;


  --top: 56px;
  --bottom: 62px;
  /* the least a part of the chat is drawn at (CHAT's widget.md, "Holding the parts"); the left column holds one beside its rule */
  --part: 320px;
  --left: calc(var(--part) + var(--border-width-thin));
  /* the mark of lines the person has not seen, as today's widget draws it (widget.css in AUM/CHAT.git, `.unseen`) */
  --mark-size: 8px;
  /* the widest a line of a conversation is drawn, so its text keeps a reading measure; and the tallest the line being written grows before it scrolls */
  --line-measure: 680px;
  --writing-height: 160px;

  /* the theme: the system's, unless the person chose one */
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font: 400 15px/1.5 var(--ui); color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration: none; }
:focus-visible { outline: var(--outline-width) solid color-mix(in srgb, var(--act) 55%, transparent); outline-offset: var(--space-2); border-radius: var(--radius-s); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.01em; }