/* Generated by npm run brand:sync from public/fonts/fonts.css, brand/tokens/tokens.css and brand/tokens/brand-art.css. Do not edit. */
/* Self-hosted brand faces (SIL Open Font License 1.1). Generated by scripts/fetch-fonts.mjs. */
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-display-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-display-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:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-400-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-400-italic-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:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-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:'Libre Franklin';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/libre-franklin-400-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/libre-franklin-400-600-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;}

/*
 * Design tokens. Generated by Brandi, generated from the resolved system. Edit the brand file, not this.
 *
 * Three layers:
 *   :root primitives   raw values. Identical in every theme. Do not consume directly.
 *   :root semantic     what a value is FOR. Consume these.
 *   dark selector     the same semantic keys pointing at different primitives.
 *
 * If you find yourself writing var(--color-brand-9) in a component, the
 * semantic layer is missing a token. Add one there instead.
 */

:root {
  color-scheme: light;
  /* Colour ramps */
  --color-brand-1: #FBFDFC; /* app-background */
  --color-brand-2: #F6F9F8; /* subtle-background */
  --color-brand-3: #EDF4F2; /* ui-background */
  --color-brand-4: #E5EFEB; /* ui-background-hover */
  --color-brand-5: #DBE8E4; /* ui-background-active */
  --color-brand-6: #D1E1DB; /* border-subtle */
  --color-brand-7: #C3D6D0; /* border */
  --color-brand-8: #ADC6BE; /* border-hover */
  --color-brand-9: #22433A; /* solid */
  --color-brand-10: #183B32; /* solid-hover */
  --color-brand-11: #5B776E; /* text-low */
  --color-brand-12: #263430; /* text-high */
  --color-neutral-1: #FCFDFC; /* app-background */
  --color-neutral-2: #F8F8F8; /* subtle-background */
  --color-neutral-3: #F2F3F2; /* ui-background */
  --color-neutral-4: #EBECEC; /* ui-background-hover */
  --color-neutral-5: #E3E5E5; /* ui-background-active */
  --color-neutral-6: #DBDDDC; /* border-subtle */
  --color-neutral-7: #CFD2D1; /* border */
  --color-neutral-8: #BDC0BF; /* border-hover */
  --color-neutral-9: #393D3B; /* solid */
  --color-neutral-10: #313534; /* solid-hover */
  --color-neutral-11: #6D7170; /* text-low */
  --color-neutral-12: #2F3130; /* text-high */
  --color-accent1-1: #FFFCFC; /* app-background */
  --color-accent1-2: #FFF6F6; /* subtle-background */
  --color-accent1-3: #FFEEED; /* ui-background */
  --color-accent1-4: #FFE5E5; /* ui-background-hover */
  --color-accent1-5: #FFDBDA; /* ui-background-active */
  --color-accent1-6: #FFCFCE; /* border-subtle */
  --color-accent1-7: #FDBFBF; /* border */
  --color-accent1-8: #FCA4A5; /* border-hover */
  --color-accent1-9: #F15060; /* solid */
  --color-accent1-10: #EA3F55; /* solid-hover */
  --color-accent1-11: #B3474F; /* text-low */
  --color-accent1-12: #4E2022; /* text-high */
  --color-accent2-1: #FBFDFF; /* app-background */
  --color-accent2-2: #F3F9FF; /* subtle-background */
  --color-accent2-3: #E8F4FF; /* ui-background */
  --color-accent2-4: #DDEFFF; /* ui-background-hover */
  --color-accent2-5: #CFE8FF; /* ui-background-active */
  --color-accent2-6: #BFE1FF; /* border-subtle */
  --color-accent2-7: #AAD7FE; /* border */
  --color-accent2-8: #89C6FB; /* border-hover */
  --color-accent2-9: #0078BF; /* solid */
  --color-accent2-10: #006FB1; /* solid-hover */
  --color-accent2-11: #2575B1; /* text-low */
  --color-accent2-12: #10334E; /* text-high */
  --color-danger-1: #FFFCFB; /* app-background */
  --color-danger-2: #FEF6F5; /* subtle-background */
  --color-danger-3: #FEEEEC; /* ui-background */
  --color-danger-4: #FDE6E3; /* ui-background-hover */
  --color-danger-5: #FADDD9; /* ui-background-active */
  --color-danger-6: #F6D3CE; /* border-subtle */
  --color-danger-7: #EFC6C0; /* border */
  --color-danger-8: #E5B1A9; /* border-hover */
  --color-danger-9: #A9655D; /* solid */
  --color-danger-10: #A15B53; /* solid-hover */
  --color-danger-11: #985F58; /* text-low */
  --color-danger-12: #432825; /* text-high */
  --color-warning-1: #FEFCF9; /* app-background */
  --color-warning-2: #FCF8F2; /* subtle-background */
  --color-warning-3: #F9F1E5; /* ui-background */
  --color-warning-4: #F6EBDA; /* ui-background-hover */
  --color-warning-5: #F1E3CD; /* ui-background-active */
  --color-warning-6: #EBDAC0; /* border-subtle */
  --color-warning-7: #E3CEAE; /* border */
  --color-warning-8: #D6BB92; /* border-hover */
  --color-warning-9: #D7B174; /* solid */
  --color-warning-10: #CFA767; /* solid-hover */
  --color-warning-11: #886B39; /* text-low */
  --color-warning-12: #3B2E18; /* text-high */
  --color-success-1: #FBFDFB; /* app-background */
  --color-success-2: #F5FAF5; /* subtle-background */
  --color-success-3: #EBF6EC; /* ui-background */
  --color-success-4: #E1F1E3; /* ui-background-hover */
  --color-success-5: #D7EBD9; /* ui-background-active */
  --color-success-6: #CCE4CE; /* border-subtle */
  --color-success-7: #BCDAC0; /* border */
  --color-success-8: #A4CBA9; /* border-hover */
  --color-success-9: #53895C; /* solid */
  --color-success-10: #488152; /* solid-hover */
  --color-success-11: #507D57; /* text-low */
  --color-success-12: #223625; /* text-high */
  --color-info-1: #FBFDFF; /* app-background */
  --color-info-2: #F4F9FE; /* subtle-background */
  --color-info-3: #E9F4FE; /* ui-background */
  --color-info-4: #DFEEFC; /* ui-background-hover */
  --color-info-5: #D4E8F9; /* ui-background-active */
  --color-info-6: #C7E0F5; /* border-subtle */
  --color-info-7: #B7D5EF; /* border */
  --color-info-8: #9EC4E6; /* border-hover */
  --color-info-9: #4980AC; /* solid */
  --color-info-10: #3D77A5; /* solid-hover */
  --color-info-11: #48759A; /* text-low */
  --color-info-12: #1E3343; /* text-high */

  /* Spacing */
  --space-0: 0;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-160: 10rem;
  --space-192: 12rem;
  --space-256: 16rem;

  /* Radius */
  --radius-none: 0px;
  --radius-xs: 1px;
  --radius-sm: 1.5px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 4.5px;
  --radius-2xl: 7px;
  --radius-full: 9999px;

  /* Chart colour. Not the brand ramps: those are built for hierarchy,
     these are checked to stay apart under colour-blindness. */
  --chart-1: #0078BF;
  --chart-2: #FFB511;
  --chart-3: #F15060;
  --chart-4: #22433A;
  --chart-seq-1: #FBFDFC;
  --chart-seq-2: #EDF4F2;
  --chart-seq-3: #DBE8E4;
  --chart-seq-4: #C3D6D0;
  --chart-seq-5: #5B776E;
  --chart-seq-6: #183B32;

  /* Layout. A custom property cannot be used inside a media query, so
     these are the numbers to type into one, not values to reference
     there. --content-max IS usable, and is what a text column wants. */
  --bp-sm: 480px;  /* Above a large phone. Two columns of small controls become possible. */
  --bp-md: 768px;  /* Tablet portrait. A single column can become two. */
  --bp-lg: 1024px;  /* Laptop. Sidebars and three-column grids hold. */
  --bp-xl: 1280px;  /* Where the fluid type stops growing, so the layout stops with it. */
  --content-max: 624px;
  --gutter: 48px;

  /* Type */
  --font-weight-regular: 400;  /* Body text, and everything that is not asking for attention */
  --font-weight-medium: 500;  /* UI labels, buttons, table headers: emphasis without shouting */
  --font-weight-bold: 700;  /* Display type and the one word in a sentence that carries it */
  --font-display: Libre Caslon Display;
  --font-body: Libre Caslon Text;
  --text-xs: clamp(0.8rem, 0.8rem + 0vw, 0.8rem);
  --leading-xs: 1.55;
  --tracking-xs: 0.01em;
  --text-sm: clamp(0.8944rem, 0.8944rem + 0vw, 0.8944rem);
  --leading-sm: 1.55;
  --tracking-sm: 0em;
  --text-base: clamp(1rem, 1rem + 0vw, 1rem);
  --leading-base: 1.55;
  --tracking-base: -0.006em;
  --text-md: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  --leading-md: 1.476;
  --tracking-md: -0.006em;
  --text-lg: clamp(1.5625rem, 1.5625rem + 0vw, 1.5625rem);
  --leading-lg: 1.402;
  --tracking-lg: -0.012em;
  --text-xl: clamp(1.9531rem, 1.9531rem + 0vw, 1.9531rem);
  --leading-xl: 1.327;
  --tracking-xl: -0.012em;
  --text-2xl: clamp(2.4413rem, 2.4413rem + 0vw, 2.4413rem);
  --leading-2xl: 1.253;
  --tracking-2xl: -0.017em;
  --text-3xl: clamp(3.0519rem, 3.0519rem + 0vw, 3.0519rem);
  --leading-3xl: 1.179;
  --tracking-3xl: -0.022em;
  --text-4xl: clamp(3.815rem, 3.815rem + 0vw, 3.815rem);
  --leading-4xl: 1.105;
  --tracking-4xl: -0.022em;
  --measure: 66ch;

  /* Elevation */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(1 32 25 / 0.06), 0 1px 1px rgb(1 32 25 / 0.04);
  --shadow-md: 0 2px 4px rgb(1 32 25 / 0.06), 0 4px 12px rgb(1 32 25 / 0.08);
  --shadow-lg: 0 4px 8px rgb(1 32 25 / 0.06), 0 12px 32px rgb(1 32 25 / 0.1);
  --shadow-xl: 0 8px 16px rgb(1 32 25 / 0.08), 0 24px 64px rgb(1 32 25 / 0.12);

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Motion */
  --duration-instant: 0ms;
  --duration-fast: 90ms;
  --duration-base: 150ms;
  --duration-slow: 240ms;
  --duration-slower: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1.2);

  /* Tier 2. These are the tokens components use. */
  --surface-page: var(--color-neutral-1);
  --surface-subtle: var(--color-neutral-2);
  --surface-raised: var(--color-neutral-1);
  --surface-sunken: var(--color-neutral-2);
  --surface-overlay: var(--color-neutral-1);
  --surface-inverted: var(--color-neutral-12);
  --control-bg: var(--color-neutral-3);
  --control-bg-hover: var(--color-neutral-4);
  --control-bg-active: var(--color-neutral-5);
  --border-subtle: var(--color-neutral-6);
  --border-default: var(--color-neutral-7);
  --border-strong: var(--color-neutral-8);
  --text-primary: var(--color-neutral-12);
  --text-secondary: var(--color-neutral-11);
  --text-disabled: var(--color-neutral-8);
  --text-inverted: var(--color-neutral-1);
  --text-brand: var(--color-brand-11);
  --text-link: var(--color-brand-11);
  --accent-bg: var(--color-brand-3);
  --accent-bg-hover: var(--color-brand-4);
  --accent-border: var(--color-brand-7);
  --accent-solid: var(--color-brand-9);
  --accent-solid-hover: var(--color-brand-10);
  --accent-text: var(--color-brand-11);
  --focus-ring: var(--color-brand-9);
  --danger-bg: var(--color-danger-3);
  --danger-border: var(--color-danger-7);
  --danger-solid: var(--color-danger-9);
  --danger-text: var(--color-danger-11);
  --warning-bg: var(--color-warning-3);
  --warning-border: var(--color-warning-7);
  --warning-solid: var(--color-warning-9);
  --warning-text: var(--color-warning-11);
  --success-bg: var(--color-success-3);
  --success-border: var(--color-success-7);
  --success-solid: var(--color-success-9);
  --success-text: var(--color-success-11);
  --info-bg: var(--color-info-3);
  --info-border: var(--color-info-7);
  --info-solid: var(--color-info-9);
  --info-text: var(--color-info-11);
  --accent-on-solid: #FFFFFF;
  --accent-solid-strong: #22433A;
}

[data-theme="dark"] {
  color-scheme: dark;
  /* Colour ramps */
  --color-brand-1: #101111; /* app-background */
  --color-brand-2: #171A19; /* subtle-background */
  --color-brand-3: #1E2422; /* ui-background */
  --color-brand-4: #242C2A; /* ui-background-hover */
  --color-brand-5: #2A3531; /* ui-background-active */
  --color-brand-6: #323F3B; /* border-subtle */
  --color-brand-7: #3E4F49; /* border */
  --color-brand-8: #516861; /* border-hover */
  --color-brand-9: #22433A; /* solid */
  --color-brand-10: #284B42; /* solid-hover */
  --color-brand-11: #9EBCB2; /* text-low */
  --color-brand-12: #E1F1EC; /* text-high */
  --color-neutral-1: #111111; /* app-background */
  --color-neutral-2: #191919; /* subtle-background */
  --color-neutral-3: #222222; /* ui-background */
  --color-neutral-4: #292A2A; /* ui-background-hover */
  --color-neutral-5: #313232; /* ui-background-active */
  --color-neutral-6: #3A3C3B; /* border-subtle */
  --color-neutral-7: #494B4A; /* border */
  --color-neutral-8: #606362; /* border-hover */
  --color-neutral-9: #393D3B; /* solid */
  --color-neutral-10: #404543; /* solid-hover */
  --color-neutral-11: #B1B5B4; /* text-low */
  --color-neutral-12: #EBEDED; /* text-high */
  --color-accent1-1: #150F0F; /* app-background */
  --color-accent1-2: #211515; /* subtle-background */
  --color-accent1-3: #301C1C; /* ui-background */
  --color-accent1-4: #3C2122; /* ui-background-hover */
  --color-accent1-5: #492728; /* ui-background-active */
  --color-accent1-6: #592C2E; /* border-subtle */
  --color-accent1-7: #713538; /* border */
  --color-accent1-8: #994348; /* border-hover */
  --color-accent1-9: #F15060; /* solid */
  --color-accent1-10: #FF5667; /* solid-hover */
  --color-accent1-11: #FF8E92; /* text-low */
  --color-accent1-12: #FFE6E6; /* text-high */
  --color-accent2-1: #0F1214; /* app-background */
  --color-accent2-2: #141A1F; /* subtle-background */
  --color-accent2-3: #17242F; /* ui-background */
  --color-accent2-4: #192C3C; /* ui-background-hover */
  --color-accent2-5: #1A344A; /* ui-background-active */
  --color-accent2-6: #1D3E5A; /* border-subtle */
  --color-accent2-7: #224E71; /* border */
  --color-accent2-8: #2A6797; /* border-hover */
  --color-accent2-9: #0078BF; /* solid */
  --color-accent2-10: #0281CD; /* solid-hover */
  --color-accent2-11: #6FBCFC; /* text-low */
  --color-accent2-12: #DEEFFF; /* text-high */
  --color-danger-1: #131010; /* app-background */
  --color-danger-2: #1D1717; /* subtle-background */
  --color-danger-3: #2A1F1E; /* ui-background */
  --color-danger-4: #362523; /* ui-background-hover */
  --color-danger-5: #412C29; /* ui-background-active */
  --color-danger-6: #4E3430; /* border-subtle */
  --color-danger-7: #62403C; /* border */
  --color-danger-8: #82554F; /* border-hover */
  --color-danger-9: #A9655D; /* solid */
  --color-danger-10: #B56D64; /* solid-hover */
  --color-danger-11: #E1A29A; /* text-low */
  --color-danger-12: #FFE6E3; /* text-high */
  --color-warning-1: #12110F; /* app-background */
  --color-warning-2: #1B1914; /* subtle-background */
  --color-warning-3: #272119; /* ui-background */
  --color-warning-4: #31291C; /* ui-background-hover */
  --color-warning-5: #3B301F; /* ui-background-active */
  --color-warning-6: #473923; /* border-subtle */
  --color-warning-7: #59472B; /* border */
  --color-warning-8: #765E37; /* border-hover */
  --color-warning-9: #D7B174; /* solid */
  --color-warning-10: #E2BA79; /* solid-hover */
  --color-warning-11: #CFAF7C; /* text-low */
  --color-warning-12: #FCEACF; /* text-high */
  --color-success-1: #101210; /* app-background */
  --color-success-2: #161A17; /* subtle-background */
  --color-success-3: #1D251E; /* ui-background */
  --color-success-4: #222E23; /* ui-background-hover */
  --color-success-5: #273729; /* ui-background-active */
  --color-success-6: #2D4130; /* border-subtle */
  --color-success-7: #38523C; /* border */
  --color-success-8: #496C4E; /* border-hover */
  --color-success-9: #53895C; /* solid */
  --color-success-10: #599363; /* solid-hover */
  --color-success-11: #93C299; /* text-low */
  --color-success-12: #DBF5DE; /* text-high */
  --color-info-1: #101113; /* app-background */
  --color-info-2: #16191D; /* subtle-background */
  --color-info-3: #1B232A; /* ui-background */
  --color-info-4: #202C36; /* ui-background-hover */
  --color-info-5: #243441; /* ui-background-active */
  --color-info-6: #2A3E4F; /* border-subtle */
  --color-info-7: #334D63; /* border */
  --color-info-8: #436684; /* border-hover */
  --color-info-9: #4980AC; /* solid */
  --color-info-10: #4F89B8; /* solid-hover */
  --color-info-11: #8BBAE2; /* text-low */
  --color-info-12: #DEEFFF; /* text-high */

  /* Tier 2, dark. Same keys. Some point at a different step on purpose. */
  --surface-page: var(--color-neutral-1);
  --surface-subtle: var(--color-neutral-2);
  --surface-raised: var(--color-neutral-2);
  --surface-sunken: var(--color-neutral-2);
  --surface-overlay: var(--color-neutral-3);
  --surface-inverted: var(--color-neutral-12);
  --control-bg: var(--color-neutral-3);
  --control-bg-hover: var(--color-neutral-4);
  --control-bg-active: var(--color-neutral-5);
  --border-subtle: var(--color-neutral-6);
  --border-default: var(--color-neutral-7);
  --border-strong: var(--color-neutral-8);
  --text-primary: var(--color-neutral-12);
  --text-secondary: var(--color-neutral-11);
  --text-disabled: var(--color-neutral-8);
  --text-inverted: var(--color-neutral-1);
  --text-brand: var(--color-brand-11);
  --text-link: var(--color-brand-11);
  --accent-bg: var(--color-brand-3);
  --accent-bg-hover: var(--color-brand-4);
  --accent-border: var(--color-brand-7);
  --accent-solid: var(--color-brand-9);
  --accent-solid-hover: var(--color-brand-10);
  --accent-text: var(--color-brand-11);
  --focus-ring: var(--color-brand-11);
  --danger-bg: var(--color-danger-3);
  --danger-border: var(--color-danger-7);
  --danger-solid: var(--color-danger-9);
  --danger-text: var(--color-danger-11);
  --warning-bg: var(--color-warning-3);
  --warning-border: var(--color-warning-7);
  --warning-solid: var(--color-warning-9);
  --warning-text: var(--color-warning-11);
  --success-bg: var(--color-success-3);
  --success-border: var(--color-success-7);
  --success-solid: var(--color-success-9);
  --success-text: var(--color-success-11);
  --info-bg: var(--color-info-3);
  --info-border: var(--color-info-7);
  --info-solid: var(--color-info-9);
  --info-text: var(--color-info-11);
  --accent-on-solid: #FFFFFF;
  --accent-solid-strong: #22433A;
}

/* Readers who have expressed a preference but not toggled anything. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Colour ramps */
    --color-brand-1: #101111; /* app-background */
    --color-brand-2: #171A19; /* subtle-background */
    --color-brand-3: #1E2422; /* ui-background */
    --color-brand-4: #242C2A; /* ui-background-hover */
    --color-brand-5: #2A3531; /* ui-background-active */
    --color-brand-6: #323F3B; /* border-subtle */
    --color-brand-7: #3E4F49; /* border */
    --color-brand-8: #516861; /* border-hover */
    --color-brand-9: #22433A; /* solid */
    --color-brand-10: #284B42; /* solid-hover */
    --color-brand-11: #9EBCB2; /* text-low */
    --color-brand-12: #E1F1EC; /* text-high */
    --color-neutral-1: #111111; /* app-background */
    --color-neutral-2: #191919; /* subtle-background */
    --color-neutral-3: #222222; /* ui-background */
    --color-neutral-4: #292A2A; /* ui-background-hover */
    --color-neutral-5: #313232; /* ui-background-active */
    --color-neutral-6: #3A3C3B; /* border-subtle */
    --color-neutral-7: #494B4A; /* border */
    --color-neutral-8: #606362; /* border-hover */
    --color-neutral-9: #393D3B; /* solid */
    --color-neutral-10: #404543; /* solid-hover */
    --color-neutral-11: #B1B5B4; /* text-low */
    --color-neutral-12: #EBEDED; /* text-high */
    --color-accent1-1: #150F0F; /* app-background */
    --color-accent1-2: #211515; /* subtle-background */
    --color-accent1-3: #301C1C; /* ui-background */
    --color-accent1-4: #3C2122; /* ui-background-hover */
    --color-accent1-5: #492728; /* ui-background-active */
    --color-accent1-6: #592C2E; /* border-subtle */
    --color-accent1-7: #713538; /* border */
    --color-accent1-8: #994348; /* border-hover */
    --color-accent1-9: #F15060; /* solid */
    --color-accent1-10: #FF5667; /* solid-hover */
    --color-accent1-11: #FF8E92; /* text-low */
    --color-accent1-12: #FFE6E6; /* text-high */
    --color-accent2-1: #0F1214; /* app-background */
    --color-accent2-2: #141A1F; /* subtle-background */
    --color-accent2-3: #17242F; /* ui-background */
    --color-accent2-4: #192C3C; /* ui-background-hover */
    --color-accent2-5: #1A344A; /* ui-background-active */
    --color-accent2-6: #1D3E5A; /* border-subtle */
    --color-accent2-7: #224E71; /* border */
    --color-accent2-8: #2A6797; /* border-hover */
    --color-accent2-9: #0078BF; /* solid */
    --color-accent2-10: #0281CD; /* solid-hover */
    --color-accent2-11: #6FBCFC; /* text-low */
    --color-accent2-12: #DEEFFF; /* text-high */
    --color-danger-1: #131010; /* app-background */
    --color-danger-2: #1D1717; /* subtle-background */
    --color-danger-3: #2A1F1E; /* ui-background */
    --color-danger-4: #362523; /* ui-background-hover */
    --color-danger-5: #412C29; /* ui-background-active */
    --color-danger-6: #4E3430; /* border-subtle */
    --color-danger-7: #62403C; /* border */
    --color-danger-8: #82554F; /* border-hover */
    --color-danger-9: #A9655D; /* solid */
    --color-danger-10: #B56D64; /* solid-hover */
    --color-danger-11: #E1A29A; /* text-low */
    --color-danger-12: #FFE6E3; /* text-high */
    --color-warning-1: #12110F; /* app-background */
    --color-warning-2: #1B1914; /* subtle-background */
    --color-warning-3: #272119; /* ui-background */
    --color-warning-4: #31291C; /* ui-background-hover */
    --color-warning-5: #3B301F; /* ui-background-active */
    --color-warning-6: #473923; /* border-subtle */
    --color-warning-7: #59472B; /* border */
    --color-warning-8: #765E37; /* border-hover */
    --color-warning-9: #D7B174; /* solid */
    --color-warning-10: #E2BA79; /* solid-hover */
    --color-warning-11: #CFAF7C; /* text-low */
    --color-warning-12: #FCEACF; /* text-high */
    --color-success-1: #101210; /* app-background */
    --color-success-2: #161A17; /* subtle-background */
    --color-success-3: #1D251E; /* ui-background */
    --color-success-4: #222E23; /* ui-background-hover */
    --color-success-5: #273729; /* ui-background-active */
    --color-success-6: #2D4130; /* border-subtle */
    --color-success-7: #38523C; /* border */
    --color-success-8: #496C4E; /* border-hover */
    --color-success-9: #53895C; /* solid */
    --color-success-10: #599363; /* solid-hover */
    --color-success-11: #93C299; /* text-low */
    --color-success-12: #DBF5DE; /* text-high */
    --color-info-1: #101113; /* app-background */
    --color-info-2: #16191D; /* subtle-background */
    --color-info-3: #1B232A; /* ui-background */
    --color-info-4: #202C36; /* ui-background-hover */
    --color-info-5: #243441; /* ui-background-active */
    --color-info-6: #2A3E4F; /* border-subtle */
    --color-info-7: #334D63; /* border */
    --color-info-8: #436684; /* border-hover */
    --color-info-9: #4980AC; /* solid */
    --color-info-10: #4F89B8; /* solid-hover */
    --color-info-11: #8BBAE2; /* text-low */
    --color-info-12: #DEEFFF; /* text-high */

    /* Tier 2, dark. Same keys. Some point at a different step on purpose. */
    --surface-page: var(--color-neutral-1);
    --surface-subtle: var(--color-neutral-2);
    --surface-raised: var(--color-neutral-2);
    --surface-sunken: var(--color-neutral-2);
    --surface-overlay: var(--color-neutral-3);
    --surface-inverted: var(--color-neutral-12);
    --control-bg: var(--color-neutral-3);
    --control-bg-hover: var(--color-neutral-4);
    --control-bg-active: var(--color-neutral-5);
    --border-subtle: var(--color-neutral-6);
    --border-default: var(--color-neutral-7);
    --border-strong: var(--color-neutral-8);
    --text-primary: var(--color-neutral-12);
    --text-secondary: var(--color-neutral-11);
    --text-disabled: var(--color-neutral-8);
    --text-inverted: var(--color-neutral-1);
    --text-brand: var(--color-brand-11);
    --text-link: var(--color-brand-11);
    --accent-bg: var(--color-brand-3);
    --accent-bg-hover: var(--color-brand-4);
    --accent-border: var(--color-brand-7);
    --accent-solid: var(--color-brand-9);
    --accent-solid-hover: var(--color-brand-10);
    --accent-text: var(--color-brand-11);
    --focus-ring: var(--color-brand-11);
    --danger-bg: var(--color-danger-3);
    --danger-border: var(--color-danger-7);
    --danger-solid: var(--color-danger-9);
    --danger-text: var(--color-danger-11);
    --warning-bg: var(--color-warning-3);
    --warning-border: var(--color-warning-7);
    --warning-solid: var(--color-warning-9);
    --warning-text: var(--color-warning-11);
    --success-bg: var(--color-success-3);
    --success-border: var(--color-success-7);
    --success-solid: var(--color-success-9);
    --success-text: var(--color-success-11);
    --info-bg: var(--color-info-3);
    --info-border: var(--color-info-7);
    --info-solid: var(--color-info-9);
    --info-text: var(--color-info-11);
    --accent-on-solid: #FFFFFF;
    --accent-solid-strong: #22433A;
  }
}

/* Honour the reader's setting rather than overriding it. WCAG 2.2 2.3.3 is
   Level AAA, so this is a house rule rather than an AA requirement, and it is
   one worth keeping. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* A focus indicator that is actually visible: WCAG 2.2 2.4.7 Focus Visible,
   at the 3:1 contrast 1.4.11 Non-text Contrast requires. (2.4.11 is Focus
   Not Obscured, which is a different thing.) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/*
  Tinyhuman Books: the brand's own colours and UI face, beside the generated tokens.

  brandi generates tokens.css from a neutral ramp, so its page and text colours land near,
  not on, the brand's paper and line (#FCFDFC and #2F3130 against #FFFFFF and #1F1D1A), and it
  has no slot for a UI typeface. This file is hand-written and brandi never overwrites it.
  Load it after tokens.css. Recorded as decision d16.
*/
:root {
  /* Paper and line: the page ground and every line, including body text. */
  --paper: #FFFFFF;
  --line: #1F1D1A;

  /* Book cloth: the cover, the plate's ground, the one button. */
  --cloth: #22433A;

  /* The three core riso inks. Illustration and the bookplate only, always under a line,
     offset down and right. Red and blue are also the two UI accents (d9); sunflower is never UI. */
  --ink-sunflower: #FFB511;
  --ink-red: #F15060;
  --ink-blue: #0078BF;

  /* Guest inks, one per occasion, for that occasion only (d4). */
  --guest-orange: #FF6C2F;   /* Halloween */
  --guest-green: #00A95C;    /* Christmas */
  --guest-pink: #FF48B0;     /* Valentine's Day */
  --guest-gold: #BB8B41;     /* Thanksgiving */

  /* Type. Caslon Display for headings, Caslon Text for reading and names, Franklin for UI. */
  --font-display: 'Libre Caslon Display', 'Big Caslon', Georgia, serif;
  --font-text: 'Libre Caslon Text', Georgia, serif;
  --font-ui: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  /* Libre Caslon Display ships one weight. Headings in it are always 400, never bold (d18).
     Libre Caslon Text has 400, 400 italic and 700; names on the plate are 400 italic. */
  --font-weight-display: 400;
}

/* Never let the browser fake a weight or an italic the family doesn't ship. A faked bold of
   Caslon Display thickens the outlines and turns the dot on the i into a ring. */
html { font-synthesis: none; }