/* The design system every page shares: the typeface, the colours derived from the brand, and
   the icon base. Loaded after the brand stylesheet (brand.css, the --gt-* tokens) and before a
   page's own stylesheet, on the console, the web app, the web phone and the website widget.

   No literal colour lives here. Every tint, hover and soft fill is mixed from the brand's own
   tokens, so a reseller's palette flows through unchanged and the reseller colour pickers keep
   offering exactly the colours they offer today (a new color-* token would add a picker, and a
   reseller who never chose it would inherit the deployment's value). */

/* ---------- Typeface: Ubuntu, served with the page (Ubuntu Font Licence 1.0, see UFL.txt).
   Two files a weight, split by Unicode range so a page only fetches the extended Latin
   (accented names: Portuguese, French, Romanian and the like) when it has some to show. The
   family is named Ubuntu, so the brand's font-stack token picks these up as it stands. */
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("ubuntu-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: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("ubuntu-400-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: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("ubuntu-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: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("ubuntu-500-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: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("ubuntu-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; }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("ubuntu-700-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; }

/* ---------- Colours derived from the brand. --ui-* is ours; --gt-* is the brand's, and no
   script may set it (the brand stylesheet is the only source of those). */
:root {
  /* The accent, quietly: the selected row, the active menu item, a mine-side chat bubble. */
  /* Soft fills are mixed onto the card they sit on (not the page), so in dark mode, where the
     card is the lighter of the two, a tint still reads as a tint rather than a hole. */
  --ui-accent-soft:   color-mix(in oklab, var(--gt-color-accent) 12%, var(--ui-card));
  --ui-accent-hover:  color-mix(in oklab, var(--gt-color-accent) 88%, black);
  /* Hover and pressed: the text colour at a whisper, so they read on any background. */
  --ui-hover:         color-mix(in oklab, var(--gt-color-fg) 5%, transparent);
  --ui-pressed:       color-mix(in oklab, var(--gt-color-fg) 9%, transparent);
  --ui-border-strong: color-mix(in oklab, var(--gt-color-border) 65%, var(--gt-color-fg));
  /* A calm grey fill on a card: keypad keys, initials, someone else's chat bubble. */
  --ui-neutral-soft:  color-mix(in oklab, var(--gt-color-fg) 6%, var(--ui-card));
  --ui-neutral-hover: color-mix(in oklab, var(--gt-color-fg) 11%, var(--ui-card));
  --ui-focus:         0 0 0 3px color-mix(in oklab, var(--gt-color-accent) 35%, transparent);
  --ui-danger-soft:   color-mix(in oklab, var(--gt-color-danger) 12%, var(--ui-card));
  --ui-success-soft:  color-mix(in oklab, var(--gt-color-success) 12%, var(--ui-card));
  --ui-warning-soft:  color-mix(in oklab, var(--gt-color-warning) 12%, var(--ui-card));
  /* The page and what sits on it. Light: a faintly warm page, white cards on it. */
  --ui-canvas:        var(--gt-color-surface);
  --ui-card:          var(--gt-color-bg);
}
/* Dark: the brand's surface is lighter than its background there, so the two swap or a card
   would read as sunk into the page rather than lifted off it. Same two selectors as the brand
   stylesheet uses for dark, so the swap follows exactly the same choice. */
:root[data-theme="dark"] {
  --ui-canvas: var(--gt-color-bg);
  --ui-card:   var(--gt-color-surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-canvas: var(--gt-color-bg);
    --ui-card:   var(--gt-color-surface);
  }
}

/* ---------- Icons: <svg class="ico"><use href=".../icons.svg#i-NAME"></use></svg>.
   The sprite's symbols carry no stroke or fill of their own, so this rule decides the weight,
   and currentColor makes an icon the colour of the text it sits in. Named .ico, not .icon: the
   web app already has a span.icon that its browser acceptance tests look for. */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico.sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.ico.lg { width: 1.5em; height: 1.5em; }