@layer tokens, base, layout, components, utilities;

/* Fonts: IBM Plex, self-hosted in static/fonts (SIL OFL). Latin subsets only. */
@layer tokens {
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-wght-normal.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: "IBM Plex Sans";
    font-style: italic;
    font-weight: 100 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-wght-italic.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: "IBM Plex Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-latin-400-normal.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: "IBM Plex Serif";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-latin-600-normal.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: "IBM Plex Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-latin-700-normal.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: "IBM Plex Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-latin-400-italic.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-400-normal.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-600-normal.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-700-normal.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: "IBM Plex Mono";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-400-italic.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;
  }

  :root {
    /* Reading size: the prose in lessons and study pages. Compact is chosen with the Aa
       button (cookie `reading`, shell.html puts data-reading on <html>). */
    --prose-size: 1rem;
    --prose-leading: 1.7;

    --paper: #f8fafc;
    --paper-2: #eef2f7;
    --surface: #ffffff;
    --ink: #0d1b2a;
    --ink-soft: #2c3e50;
    --muted: #56697a;
    --rule: #e2e8f0;
    --brand: #3b5fa8;
    --brand-strong: #2b4a8a;
    --brand-soft: #e3eaf6;
    --amber: #a35207;
    --amber-soft: #fdf0d5;
    --red: #b42318;
    --red-soft: #fde4e1;
    --green: #1e7a46;
    --green-soft: #dcf2e5;
    --violet: #5b4b9a;
    --violet-soft: #ece8f7;
    --night: #0d1b2a;
    --divider: #1a3a7a;
    --code-bg: #121d30;
    --inline-code: #92400e;
    --kbd-edge: #cbd5e1;
    --stripe: rgb(238 242 247 / 0.7);
    --shadow: rgb(13 27 42 / 0.45);
    /* The site's header bar, the same in both modes. */
    --bar: #4f74b9;
    --on-bar: #ffffff;

    /* Workbench scales. */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --step--2: 0.75rem;
    --step--1: 0.8125rem;
    --step-0: 0.9375rem;
    --step-1: 1.125rem;
    --step-2: 1.375rem;
    --step-3: 1.75rem;
    --step-4: 2.25rem;
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgb(13 27 42 / .08);
    --shadow-2: 0 4px 14px rgb(13 27 42 / .12);
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-serif: "IBM Plex Serif", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --tab-bar-height: 3.5rem;
    --sidebar-width: 13rem;
    --measure: 42rem;
    --measure-narrow: 26rem;
    --measure-wide: 56rem;
  }


  [data-reading="compact"] {
    --prose-size: 0.875rem;
    --prose-leading: 1.55;
  }

  .dark {
    color-scheme: dark;
    --paper: #0a1628;
    --paper-2: #111f36;
    --surface: #16223e;
    --ink: #f1f5f9;
    --ink-soft: #cbd5e1;
    --muted: #94a3b8;
    --rule: #24344f;
    --brand: #93c5fd;
    --brand-strong: #bfdbfe;
    --brand-soft: #1a2e55;
    --amber: #fbbf24;
    --amber-soft: #3a2a0f;
    --red: #f8a39a;
    --red-soft: #3d1f24;
    --green: #7dd3a0;
    --green-soft: #14322a;
    --violet: #b3a5ec;
    --violet-soft: #272240;
    --night: #060e1c;
    --divider: #1a3a7a;
    --code-bg: #0b1424;
    --inline-code: #fcd34d;
    --kbd-edge: #33476a;
    --stripe: rgb(255 255 255 / 0.03);
    --shadow: rgb(0 0 0 / 0.6);
  }
}