/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Xiao design tokens, shared by the start page, the toolbar panel, the
 * browser's own UI and the website. Fonts (SIL OFL 1.1) sit next to this file
 * in fonts/: Bricolage Grotesque for text, Junicode italic for headings (as on
 * zen-browser.app). junicode-italic-latin.woff2 is JunicodeVF-Italic at weight
 * 400, subset to Latin with fonttools (see shared/fonts/). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Junicode";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/junicode-italic-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #eeeee7;
  --paper-raised: #f6f6f1;
  --ink: #1d1d1b;
  --ink-soft: #5e5e58;
  --rule: rgb(29 29 27 / 0.12);
  --fill: rgb(29 29 27 / 0.05);
  --accent: #e70923; /* fills, borders and focus rings only: 4.0:1 on paper, too low for text */
  --accent-ink: #ffffff;
  --accent-text: #c4071d; /* red for words, 5.3:1 on paper */
  --tor: #7b4fd6;
  --pool-a: #f3c7c8;
  --pool-b: #f5cdc1;

  --serif: "Junicode", "Iowan Old Style", Georgia, serif;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.5rem;
  --step-4: clamp(2.75rem, 7vw, 4.5rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --quick: 160ms;
  --calm: 280ms;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1b1b1b;
    --paper-raised: #242423;
    --ink: #ececE4;
    --ink-soft: #9a9a92;
    --rule: rgb(236 236 228 / 0.14);
    --fill: rgb(236 236 228 / 0.06);
    --accent-text: #f36a52; /* 5.7:1 on dark paper */
    --tor: #b49af0;
    --pool-a: #44020a;
    --pool-b: #410e06;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b1b1b;
  --paper-raised: #242423;
  --ink: #ececE4;
  --ink-soft: #9a9a92;
  --rule: rgb(236 236 228 / 0.14);
  --fill: rgb(236 236 228 / 0.06);
  --accent-text: #f36a52;
  --tor: #b49af0;
  --pool-a: #44020a;
  --pool-b: #410e06;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --quick: 0ms;
    --calm: 0ms;
  }
}