/* Generated by design/tooling/build.py from design/brands/brasscribe/tokens/tokens.json. Do not edit. */
/* Instrument Serif, SIL Open Font License 1.1 (fonts/OFL.txt). Display sizes (28px and up) only. */
@font-face {
  font-family: "Instrument Serif";
  src: url("brasscribe/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("brasscribe/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Generated by design/tooling/build.py from design/brands/brasscribe/tokens/tokens.json. Do not edit. */
/* Import fonts.css too if the page uses the display face. */
/* --scribe-… is what every brand has (design/tooling/README.md); --bc-… is Brasscribe's own. */

[data-brand="brasscribe"] {
  color-scheme: light;
  --scribe-bg: #FBFAF7;
  --scribe-surface: #F3F1EC;
  --scribe-surface-raised: #FFFFFF;
  --scribe-text: #1B1A17;
  --scribe-text-muted: #5E5A52;
  --scribe-border: #E4E1DA;
  --scribe-border-strong: #8A857B;
  --scribe-primary: #1B1A17;
  --scribe-on-primary: #FBFAF7;
  --scribe-secondary: #ECE9E2;
  --scribe-on-secondary: #1B1A17;
  --scribe-brand: #A57A2C;
  --scribe-accent: #7A5719;
  --scribe-brand-text: #7A5719;
  --scribe-brand-tint: #F4EBDA;
  --scribe-success: #2E6B3F;
  --scribe-warning: #8A5A00;
  --scribe-error: #B3261E;
  --scribe-focus: #1B1A17;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-ink: #121110;
  --scribe-line: #57534B;
  --scribe-uncertain: #0063A6;
  --bc-very-uncertain: #B04A00;
  --bc-adlib-tint: #EFECE5;
  --bc-loop-tint: #FFF3D6;
  --bc-loop-edge: #8A5A00;
  --bc-cursor: #6B3FA0;
  --bc-cursor-tint: #DED5E6;
  --bc-selection-tint: #ECE9E2;
  --bc-selection-edge: #1B1A17;
  --bc-model-1: #0072B2;
  --bc-model-2: #A65E00;
  --bc-model-3: #007A5A;
  --bc-model-4: #A8538A;
  --scribe-font-text: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --scribe-font-display: "Instrument Serif", Georgia, serif;
  --scribe-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --scribe-type-display-size: 2.5rem;
  --scribe-type-display-line: 1.1;
  --scribe-type-display-weight: 400;
  --scribe-type-title-1-size: 1.75rem;
  --scribe-type-title-1-line: 1.2143;
  --scribe-type-title-1-weight: 600;
  --scribe-type-title-2-size: 1.375rem;
  --scribe-type-title-2-line: 1.2727;
  --scribe-type-title-2-weight: 600;
  --scribe-type-headline-size: 1.0625rem;
  --scribe-type-headline-line: 1.2941;
  --scribe-type-headline-weight: 600;
  --scribe-type-body-size: 1.0625rem;
  --scribe-type-body-line: 1.4118;
  --scribe-type-body-weight: 400;
  --scribe-type-callout-size: 0.9375rem;
  --scribe-type-callout-line: 1.3333;
  --scribe-type-callout-weight: 400;
  --scribe-type-label-size: 1.0625rem;
  --scribe-type-label-line: 1.2941;
  --scribe-type-label-weight: 600;
  --scribe-type-caption-size: 0.8125rem;
  --scribe-type-caption-line: 1.3846;
  --scribe-type-caption-weight: 400;
  --scribe-type-numeric-size: 1.0625rem;
  --scribe-type-numeric-line: 1.2941;
  --scribe-type-numeric-weight: 500;
  --bc-type-studio-body-size: 1rem;
  --bc-type-studio-body-line: 1.5;
  --bc-type-studio-body-weight: 400;
  --bc-type-studio-table-size: 0.9375rem;
  --bc-type-studio-table-line: 1.5;
  --bc-type-studio-table-weight: 400;
  --bc-type-studio-meta-size: 0.875rem;
  --bc-type-studio-meta-line: 1.5;
  --bc-type-studio-meta-weight: 400;
  --bc-type-studio-mono-size: 0.875rem;
  --bc-type-studio-mono-line: 1.5;
  --bc-type-studio-mono-weight: 400;
  --bc-type-studio-heading-size: 1.25rem;
  --bc-type-studio-heading-line: 1.3;
  --bc-type-studio-heading-weight: 600;
  --bc-type-studio-subheading-size: 1.0625rem;
  --bc-type-studio-subheading-line: 1.4;
  --bc-type-studio-subheading-weight: 600;
  --scribe-space-0: 0rem;
  --scribe-space-1: 0.25rem;
  --scribe-space-2: 0.5rem;
  --scribe-space-3: 0.75rem;
  --scribe-space-4: 1rem;
  --scribe-space-5: 1.25rem;
  --scribe-space-6: 1.5rem;
  --scribe-space-8: 2rem;
  --scribe-space-10: 2.5rem;
  --scribe-space-12: 3rem;
  --scribe-space-16: 4rem;
  --scribe-radius-xs: 4px;
  --scribe-radius-sm: 8px;
  --scribe-radius-md: 12px;
  --scribe-radius-lg: 16px;
  --scribe-radius-xl: 24px;
  --scribe-radius-full: 9999px;
  --scribe-elevation-0: none;
  --scribe-elevation-1: 0px 1px 2px 0px rgb(27 26 23 / 0.06);
  --scribe-elevation-2: 0px 4px 16px 0px rgb(27 26 23 / 0.1);
  --scribe-elevation-3: 0px 12px 32px 0px rgb(27 26 23 / 0.16);
  --scribe-duration-instant: 0ms;
  --scribe-duration-fast: 120ms;
  --scribe-duration-base: 200ms;
  --scribe-duration-slow: 320ms;
  --scribe-duration-reduced: 150ms;
  --scribe-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --scribe-ease-enter: cubic-bezier(0, 0, 0, 1);
  --scribe-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --bc-score-cursor-width: 3px;
  --bc-score-focus-width: 2px;
  --bc-score-focus-gap: 2px;
  --bc-score-loop-edge-width: 3px;
  --bc-score-selection-edge-width: 1px;
  --scribe-touch-min: 2.75rem;
  --scribe-control-min: 2.5rem;
  --scribe-target-gap: 0.5rem;
  --scribe-content-max: 45rem;
}

/* Dark: follow the system unless the page pins a theme with data-theme. */
@media (prefers-color-scheme: dark) {
  [data-brand="brasscribe"]:not([data-theme="light"]) {
    color-scheme: dark;
    --scribe-bg: #131210;
    --scribe-surface: #1C1B18;
    --scribe-surface-raised: #252420;
    --scribe-text: #EDEBE6;
    --scribe-text-muted: #B4B0A7;
    --scribe-border: #34322D;
    --scribe-border-strong: #85817A;
    --scribe-primary: #EDEBE6;
    --scribe-on-primary: #131210;
    --scribe-secondary: #36342F;
    --scribe-on-secondary: #EDEBE6;
    --scribe-brand: #D2A955;
    --scribe-accent: #D9B266;
    --scribe-brand-text: #D9B266;
    --scribe-brand-tint: #2E2616;
    --scribe-success: #8BD39B;
    --scribe-warning: #E0B65C;
    --scribe-error: #F2B8B5;
    --scribe-focus: #EDEBE6;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #F2F0EB;
    --scribe-line: #A6A29A;
    --scribe-uncertain: #56B4E9;
    --bc-very-uncertain: #F0A04B;
    --bc-adlib-tint: #221F1B;
    --bc-loop-tint: #2B2412;
    --bc-loop-edge: #E0B65C;
    --bc-cursor: #C9A7F0;
    --bc-cursor-tint: #37303D;
    --bc-selection-tint: #2C2A26;
    --bc-selection-edge: #EDEBE6;
    --bc-model-1: #56B4E9;
    --bc-model-2: #E69F00;
    --bc-model-3: #3FC49A;
    --bc-model-4: #E08AC0;
    --scribe-elevation-1: none;
    --scribe-elevation-2: 0 4px 16px rgb(0 0 0 / 0.5);
    --scribe-elevation-3: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}
[data-brand="brasscribe"][data-theme="dark"] {
  color-scheme: dark;
  --scribe-bg: #131210;
  --scribe-surface: #1C1B18;
  --scribe-surface-raised: #252420;
  --scribe-text: #EDEBE6;
  --scribe-text-muted: #B4B0A7;
  --scribe-border: #34322D;
  --scribe-border-strong: #85817A;
  --scribe-primary: #EDEBE6;
  --scribe-on-primary: #131210;
  --scribe-secondary: #36342F;
  --scribe-on-secondary: #EDEBE6;
  --scribe-brand: #D2A955;
  --scribe-accent: #D9B266;
  --scribe-brand-text: #D9B266;
  --scribe-brand-tint: #2E2616;
  --scribe-success: #8BD39B;
  --scribe-warning: #E0B65C;
  --scribe-error: #F2B8B5;
  --scribe-focus: #EDEBE6;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-ink: #F2F0EB;
  --scribe-line: #A6A29A;
  --scribe-uncertain: #56B4E9;
  --bc-very-uncertain: #F0A04B;
  --bc-adlib-tint: #221F1B;
  --bc-loop-tint: #2B2412;
  --bc-loop-edge: #E0B65C;
  --bc-cursor: #C9A7F0;
  --bc-cursor-tint: #37303D;
  --bc-selection-tint: #2C2A26;
  --bc-selection-edge: #EDEBE6;
  --bc-model-1: #56B4E9;
  --bc-model-2: #E69F00;
  --bc-model-3: #3FC49A;
  --bc-model-4: #E08AC0;
  --scribe-elevation-1: none;
  --scribe-elevation-2: 0 4px 16px rgb(0 0 0 / 0.5);
  --scribe-elevation-3: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* Pink, the hidden palette (design/brands/brasscribe/system.md §10): data-palette="pink" on the root. Light or dark
   follows data-theme when the page pins one, else the system. More contrast and forced colours win. */
@media (forced-colors: none) and (not (prefers-contrast: more)) {
  [data-brand="brasscribe"][data-palette="pink"] {
    color-scheme: light;
    --scribe-bg: #FFF6F9;
    --scribe-surface: #FCE9F0;
    --scribe-surface-raised: #FFFFFF;
    --scribe-text: #2B1420;
    --scribe-text-muted: #6B4558;
    --scribe-border: #F2D3E0;
    --scribe-border-strong: #A0768A;
    --scribe-primary: #AD1463;
    --scribe-on-primary: #FFFFFF;
    --scribe-secondary: #F9DAE7;
    --scribe-on-secondary: #2B1420;
    --scribe-brand: #A57A2C;
    --scribe-accent: #7A5719;
    --scribe-brand-text: #7A5719;
    --scribe-brand-tint: #FBE4ED;
    --scribe-success: #2E6B3F;
    --scribe-warning: #8A5A00;
    --scribe-error: #B3261E;
    --scribe-focus: #2B1420;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #121110;
    --scribe-line: #57534B;
    --scribe-uncertain: #0063A6;
    --bc-very-uncertain: #A04300;
    --bc-adlib-tint: #F6E8EE;
    --bc-loop-tint: #FFF3D6;
    --bc-loop-edge: #8A5A00;
    --bc-cursor: #6B3FA0;
    --bc-cursor-tint: #E1D1E7;
    --bc-selection-tint: #F3E0E8;
    --bc-selection-edge: #2B1420;
    --bc-model-1: #0072B2;
    --bc-model-2: #A65E00;
    --bc-model-3: #007A5A;
    --bc-model-4: #A8538A;
  }
  [data-brand="brasscribe"][data-palette="pink"][data-theme="dark"] {
    color-scheme: dark;
    --scribe-bg: #1B1017;
    --scribe-surface: #241620;
    --scribe-surface-raised: #2E1D28;
    --scribe-text: #F8E9F0;
    --scribe-text-muted: #CDAABB;
    --scribe-border: #3F2835;
    --scribe-border-strong: #957082;
    --scribe-primary: #FF9ECF;
    --scribe-on-primary: #2B0F1E;
    --scribe-secondary: #44293A;
    --scribe-on-secondary: #F8E9F0;
    --scribe-brand: #D2A955;
    --scribe-accent: #D9B266;
    --scribe-brand-text: #D9B266;
    --scribe-brand-tint: #33202B;
    --scribe-success: #8BD39B;
    --scribe-warning: #E0B65C;
    --scribe-error: #FF8A7A;
    --scribe-focus: #F8E9F0;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #F2F0EB;
    --scribe-line: #A6A29A;
    --scribe-uncertain: #56B4E9;
    --bc-very-uncertain: #F0A04B;
    --bc-adlib-tint: #261A21;
    --bc-loop-tint: #2B2412;
    --bc-loop-edge: #E0B65C;
    --bc-cursor: #C9A7F0;
    --bc-cursor-tint: #3E2E42;
    --bc-selection-tint: #35242E;
    --bc-selection-edge: #F8E9F0;
    --bc-model-1: #56B4E9;
    --bc-model-2: #E69F00;
    --bc-model-3: #3FC49A;
    --bc-model-4: #E08AC0;
  }
}
@media (forced-colors: none) and (not (prefers-contrast: more)) and (prefers-color-scheme: dark) {
  [data-brand="brasscribe"][data-palette="pink"]:not([data-theme="light"]) {
    color-scheme: dark;
    --scribe-bg: #1B1017;
    --scribe-surface: #241620;
    --scribe-surface-raised: #2E1D28;
    --scribe-text: #F8E9F0;
    --scribe-text-muted: #CDAABB;
    --scribe-border: #3F2835;
    --scribe-border-strong: #957082;
    --scribe-primary: #FF9ECF;
    --scribe-on-primary: #2B0F1E;
    --scribe-secondary: #44293A;
    --scribe-on-secondary: #F8E9F0;
    --scribe-brand: #D2A955;
    --scribe-accent: #D9B266;
    --scribe-brand-text: #D9B266;
    --scribe-brand-tint: #33202B;
    --scribe-success: #8BD39B;
    --scribe-warning: #E0B65C;
    --scribe-error: #FF8A7A;
    --scribe-focus: #F8E9F0;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #F2F0EB;
    --scribe-line: #A6A29A;
    --scribe-uncertain: #56B4E9;
    --bc-very-uncertain: #F0A04B;
    --bc-adlib-tint: #261A21;
    --bc-loop-tint: #2B2412;
    --bc-loop-edge: #E0B65C;
    --bc-cursor: #C9A7F0;
    --bc-cursor-tint: #3E2E42;
    --bc-selection-tint: #35242E;
    --bc-selection-edge: #F8E9F0;
    --bc-model-1: #56B4E9;
    --bc-model-2: #E69F00;
    --bc-model-3: #3FC49A;
    --bc-model-4: #E08AC0;
  }
}

/* High contrast: our palettes when the user asks for more contrast; tints become outlines.
   Light or dark follows the resolved theme: data-theme when the page pins one, else the system.
   Under forced colours the system colours below win instead. */
@media (prefers-contrast: more) and (forced-colors: none) {
  [data-brand="brasscribe"]:not([data-theme="dark"]) {
    color-scheme: light;
    --scribe-bg: #FFFFFF;
    --scribe-surface: #FFFFFF;
    --scribe-surface-raised: #FFFFFF;
    --scribe-text: #000000;
    --scribe-text-muted: #000000;
    --scribe-border: #000000;
    --scribe-border-strong: #000000;
    --scribe-primary: #000000;
    --scribe-on-primary: #FFFFFF;
    --scribe-secondary: #FFFFFF;
    --scribe-on-secondary: #000000;
    --scribe-brand: #000000;
    --scribe-accent: #000000;
    --scribe-brand-text: #000000;
    --scribe-brand-tint: #FFFFFF;
    --scribe-success: #005C1F;
    --scribe-warning: #6B4500;
    --scribe-error: #A10000;
    --scribe-focus: #000000;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #000000;
    --scribe-line: #000000;
    --scribe-uncertain: #004EC2;
    --bc-very-uncertain: #9E3400;
    --bc-adlib-tint: #FFFFFF;
    --bc-loop-tint: #FFFFFF;
    --bc-loop-edge: #6B4500;
    --bc-cursor: #A8006E;
    --bc-cursor-tint: #FFFFFF;
    --bc-selection-tint: #FFFFFF;
    --bc-selection-edge: #000000;
    --bc-model-1: #004EC2;
    --bc-model-2: #8A4200;
    --bc-model-3: #006241;
    --bc-model-4: #A3007A;
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}
@media (prefers-contrast: more) and (forced-colors: none) and (prefers-color-scheme: dark) {
  [data-brand="brasscribe"]:not([data-theme="light"]) {
    color-scheme: dark;
    --scribe-bg: #000000;
    --scribe-surface: #000000;
    --scribe-surface-raised: #000000;
    --scribe-text: #FFFFFF;
    --scribe-text-muted: #FFFFFF;
    --scribe-border: #FFFFFF;
    --scribe-border-strong: #FFFFFF;
    --scribe-primary: #FFFFFF;
    --scribe-on-primary: #000000;
    --scribe-secondary: #000000;
    --scribe-on-secondary: #FFFFFF;
    --scribe-brand: #FFFFFF;
    --scribe-accent: #FFFFFF;
    --scribe-brand-text: #FFFFFF;
    --scribe-brand-tint: #000000;
    --scribe-success: #80FF80;
    --scribe-warning: #FFFF00;
    --scribe-error: #FF8080;
    --scribe-focus: #FFFFFF;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #FFFFFF;
    --scribe-line: #FFFFFF;
    --scribe-uncertain: #00FFFF;
    --bc-very-uncertain: #FFFF00;
    --bc-adlib-tint: #000000;
    --bc-loop-tint: #000000;
    --bc-loop-edge: #FFFF00;
    --bc-cursor: #FF80FF;
    --bc-cursor-tint: #000000;
    --bc-selection-tint: #000000;
    --bc-selection-edge: #FFFFFF;
    --bc-model-1: #00FFFF;
    --bc-model-2: #FFFF00;
    --bc-model-3: #80FF80;
    --bc-model-4: #FF80FF;
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}
@media (prefers-contrast: more) and (forced-colors: none) {
  [data-brand="brasscribe"][data-theme="dark"] {
    color-scheme: dark;
    --scribe-bg: #000000;
    --scribe-surface: #000000;
    --scribe-surface-raised: #000000;
    --scribe-text: #FFFFFF;
    --scribe-text-muted: #FFFFFF;
    --scribe-border: #FFFFFF;
    --scribe-border-strong: #FFFFFF;
    --scribe-primary: #FFFFFF;
    --scribe-on-primary: #000000;
    --scribe-secondary: #000000;
    --scribe-on-secondary: #FFFFFF;
    --scribe-brand: #FFFFFF;
    --scribe-accent: #FFFFFF;
    --scribe-brand-text: #FFFFFF;
    --scribe-brand-tint: #000000;
    --scribe-success: #80FF80;
    --scribe-warning: #FFFF00;
    --scribe-error: #FF8080;
    --scribe-focus: #FFFFFF;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-ink: #FFFFFF;
    --scribe-line: #FFFFFF;
    --scribe-uncertain: #00FFFF;
    --bc-very-uncertain: #FFFF00;
    --bc-adlib-tint: #000000;
    --bc-loop-tint: #000000;
    --bc-loop-edge: #FFFF00;
    --bc-cursor: #FF80FF;
    --bc-cursor-tint: #000000;
    --bc-selection-tint: #000000;
    --bc-selection-edge: #FFFFFF;
    --bc-model-1: #00FFFF;
    --bc-model-2: #FFFF00;
    --bc-model-3: #80FF80;
    --bc-model-4: #FF80FF;
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}
[data-brand="brasscribe"][data-theme="high-contrast"] {
  color-scheme: dark;
  --scribe-bg: #000000;
  --scribe-surface: #000000;
  --scribe-surface-raised: #000000;
  --scribe-text: #FFFFFF;
  --scribe-text-muted: #FFFFFF;
  --scribe-border: #FFFFFF;
  --scribe-border-strong: #FFFFFF;
  --scribe-primary: #FFFFFF;
  --scribe-on-primary: #000000;
  --scribe-secondary: #000000;
  --scribe-on-secondary: #FFFFFF;
  --scribe-brand: #FFFFFF;
  --scribe-accent: #FFFFFF;
  --scribe-brand-text: #FFFFFF;
  --scribe-brand-tint: #000000;
  --scribe-success: #80FF80;
  --scribe-warning: #FFFF00;
  --scribe-error: #FF8080;
  --scribe-focus: #FFFFFF;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-ink: #FFFFFF;
  --scribe-line: #FFFFFF;
  --scribe-uncertain: #00FFFF;
  --bc-very-uncertain: #FFFF00;
  --bc-adlib-tint: #000000;
  --bc-loop-tint: #000000;
  --bc-loop-edge: #FFFF00;
  --bc-cursor: #FF80FF;
  --bc-cursor-tint: #000000;
  --bc-selection-tint: #000000;
  --bc-selection-edge: #FFFFFF;
  --bc-model-1: #00FFFF;
  --bc-model-2: #FFFF00;
  --bc-model-3: #80FF80;
  --bc-model-4: #FF80FF;
  --scribe-elevation-1: none;
  --scribe-elevation-2: none;
  --scribe-elevation-3: none;
}
[data-brand="brasscribe"][data-theme="high-contrast-light"] {
  color-scheme: light;
  --scribe-bg: #FFFFFF;
  --scribe-surface: #FFFFFF;
  --scribe-surface-raised: #FFFFFF;
  --scribe-text: #000000;
  --scribe-text-muted: #000000;
  --scribe-border: #000000;
  --scribe-border-strong: #000000;
  --scribe-primary: #000000;
  --scribe-on-primary: #FFFFFF;
  --scribe-secondary: #FFFFFF;
  --scribe-on-secondary: #000000;
  --scribe-brand: #000000;
  --scribe-accent: #000000;
  --scribe-brand-text: #000000;
  --scribe-brand-tint: #FFFFFF;
  --scribe-success: #005C1F;
  --scribe-warning: #6B4500;
  --scribe-error: #A10000;
  --scribe-focus: #000000;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-ink: #000000;
  --scribe-line: #000000;
  --scribe-uncertain: #004EC2;
  --bc-very-uncertain: #9E3400;
  --bc-adlib-tint: #FFFFFF;
  --bc-loop-tint: #FFFFFF;
  --bc-loop-edge: #6B4500;
  --bc-cursor: #A8006E;
  --bc-cursor-tint: #FFFFFF;
  --bc-selection-tint: #FFFFFF;
  --bc-selection-edge: #000000;
  --bc-model-1: #004EC2;
  --bc-model-2: #8A4200;
  --bc-model-3: #006241;
  --bc-model-4: #A3007A;
  --scribe-elevation-1: none;
  --scribe-elevation-2: none;
  --scribe-elevation-3: none;
}

/* Forced colours (Windows contrast themes): system colours only; shape carries the meaning. */
@media (forced-colors: active) {
  [data-brand="brasscribe"] {
    --scribe-bg: Canvas;
    --scribe-surface: Canvas;
    --scribe-surface-raised: Canvas;
    --scribe-text: CanvasText;
    --scribe-text-muted: CanvasText;
    --scribe-border: CanvasText;
    --scribe-border-strong: CanvasText;
    --scribe-primary: Highlight;
    --scribe-on-primary: HighlightText;
    --scribe-secondary: ButtonFace;
    --scribe-on-secondary: ButtonText;
    --scribe-brand: CanvasText;
    --scribe-accent: LinkText;
    --scribe-brand-text: CanvasText;
    --scribe-brand-tint: Canvas;
    --scribe-success: CanvasText;
    --scribe-warning: CanvasText;
    --scribe-error: CanvasText;
    --scribe-focus: Highlight;
    --scribe-scrim: Canvas;
    --scribe-ink: CanvasText;
    --scribe-line: CanvasText;
    --scribe-uncertain: LinkText;
    --bc-very-uncertain: LinkText;
    --bc-adlib-tint: Canvas;
    --bc-loop-tint: Canvas;
    --bc-loop-edge: Highlight;
    --bc-cursor: Highlight;
    --bc-cursor-tint: Canvas;
    --bc-selection-tint: Canvas;
    --bc-selection-edge: Highlight;
    --bc-model-1: CanvasText;
    --bc-model-2: CanvasText;
    --bc-model-3: CanvasText;
    --bc-model-4: CanvasText;
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}

/* Reduced motion: no movement; state changes cross-fade at most --scribe-duration-reduced. */
@media (prefers-reduced-motion: reduce) {
  [data-brand="brasscribe"] {
    --scribe-duration-fast: 0ms;
    --scribe-duration-base: var(--scribe-duration-reduced);
    --scribe-duration-slow: var(--scribe-duration-reduced);
  }
}

/* Generated by design/tooling/build.py from design/brands/fretscribe/tokens/tokens.json. Do not edit. */
/* Atkinson Hyperlegible Next, SIL Open Font License 1.1 (fonts/OFL-AtkinsonHyperlegibleNext.txt). Wordmark, onboarding and screen titles at 28px and up, weight 600. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fretscribe/fonts/AtkinsonHyperlegibleNext-wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Fretscribe Tab, SIL Open Font License 1.1 (fonts/OFL-FretscribeTab.txt). Fret numbers only. */
@font-face {
  font-family: "Fretscribe Tab";
  src: url("fretscribe/fonts/FretscribeTab-Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Generated by design/tooling/build.py from design/brands/fretscribe/tokens/tokens.json. Do not edit. */
/* Import fonts.css too if the page uses the display face. */
/* --scribe-… is what every brand has (design/tooling/README.md); --fs-… is Fretscribe's own. */

[data-brand="fretscribe"] {
  color-scheme: light;
  --scribe-bg: #FAF8F3;
  --scribe-surface: #F1EFE9;
  --scribe-surface-raised: #FFFFFF;
  --scribe-text: #1B1D21;
  --scribe-text-muted: #4B5058;
  --scribe-border: #E2E0DA;
  --scribe-border-strong: #737983;
  --scribe-primary: #1B1D21;
  --scribe-on-primary: #FAF8F3;
  --scribe-secondary: #E7E6E0;
  --scribe-on-secondary: #1B1D21;
  --scribe-brand: #1F5FAD;
  --scribe-accent: #1F5FAD;
  --scribe-brand-text: #1F5FAD;
  --scribe-brand-tint: #E8EFF8;
  --scribe-success: #2E6B3F;
  --scribe-warning: #7A5A12;
  --scribe-error: #B3261E;
  --scribe-focus: #1B1D21;
  --scribe-ink: #1B1D21;
  --scribe-line: #737983;
  --scribe-uncertain: #9A5200;
  --fs-uncertain-tint: #FCF0DB;
  --fs-loop-tint: #E4F0EA;
  --fs-loop-edge: #1D6B55;
  --fs-cursor: #1F5FAD;
  --fs-cursor-tint: #DDE7F5;
  --fs-selection-tint: #E7E6E0;
  --fs-selection-edge: #1B1D21;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-font-text: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --scribe-font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --scribe-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --fs-font-tab: "Fretscribe Tab", ui-monospace, monospace;
  --scribe-type-display-size: 2.5rem;
  --scribe-type-display-line: 1.1;
  --scribe-type-display-weight: 600;
  --scribe-type-title-1-size: 1.75rem;
  --scribe-type-title-1-line: 1.2143;
  --scribe-type-title-1-weight: 600;
  --scribe-type-title-2-size: 1.375rem;
  --scribe-type-title-2-line: 1.2727;
  --scribe-type-title-2-weight: 600;
  --scribe-type-headline-size: 1.0625rem;
  --scribe-type-headline-line: 1.2941;
  --scribe-type-headline-weight: 600;
  --scribe-type-body-size: 1.0625rem;
  --scribe-type-body-line: 1.4118;
  --scribe-type-body-weight: 400;
  --scribe-type-callout-size: 0.9375rem;
  --scribe-type-callout-line: 1.3333;
  --scribe-type-callout-weight: 400;
  --scribe-type-label-size: 1.0625rem;
  --scribe-type-label-line: 1.2941;
  --scribe-type-label-weight: 600;
  --scribe-type-caption-size: 0.8125rem;
  --scribe-type-caption-line: 1.3846;
  --scribe-type-caption-weight: 400;
  --scribe-type-numeric-size: 1.0625rem;
  --scribe-type-numeric-line: 1.2941;
  --scribe-type-numeric-weight: 500;
  --scribe-space-0: 0rem;
  --scribe-space-1: 0.25rem;
  --scribe-space-2: 0.5rem;
  --scribe-space-3: 0.75rem;
  --scribe-space-4: 1rem;
  --scribe-space-5: 1.25rem;
  --scribe-space-6: 1.5rem;
  --scribe-space-8: 2rem;
  --scribe-space-10: 2.5rem;
  --scribe-space-12: 3rem;
  --scribe-space-16: 4rem;
  --scribe-radius-xs: 4px;
  --scribe-radius-sm: 8px;
  --scribe-radius-md: 12px;
  --scribe-radius-lg: 16px;
  --scribe-radius-xl: 24px;
  --scribe-radius-full: 9999px;
  --scribe-elevation-0: none;
  --scribe-elevation-1: 0px 1px 2px 0px rgb(27 26 23 / 0.06);
  --scribe-elevation-2: 0px 4px 16px 0px rgb(27 26 23 / 0.1);
  --scribe-elevation-3: 0px 12px 32px 0px rgb(27 26 23 / 0.16);
  --scribe-duration-instant: 0ms;
  --scribe-duration-fast: 120ms;
  --scribe-duration-base: 200ms;
  --scribe-duration-slow: 320ms;
  --scribe-duration-reduced: 150ms;
  --scribe-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --scribe-ease-enter: cubic-bezier(0, 0, 0, 1);
  --scribe-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --fs-tab-cursor-width: 3px;
  --fs-tab-focus-width: 2px;
  --fs-tab-focus-gap: 2px;
  --fs-tab-loop-edge-width: 3px;
  --fs-tab-selection-edge-width: 1.5px;
  --scribe-touch-min: 2.75rem;
  --scribe-control-min: 2.5rem;
  --scribe-target-gap: 0.5rem;
  --scribe-content-max: 45rem;
}

/* Dark: follow the system unless the page pins a theme with data-theme. */
@media (prefers-color-scheme: dark) {
  [data-brand="fretscribe"]:not([data-theme="light"]) {
    color-scheme: dark;
    --scribe-bg: #15171A;
    --scribe-surface: #1A1C20;
    --scribe-surface-raised: #212429;
    --scribe-text: #ECEAE4;
    --scribe-text-muted: #A9AEB6;
    --scribe-border: #30343A;
    --scribe-border-strong: #80868F;
    --scribe-primary: #ECEAE4;
    --scribe-on-primary: #15171A;
    --scribe-secondary: #2C3036;
    --scribe-on-secondary: #ECEAE4;
    --scribe-brand: #8AB8F2;
    --scribe-accent: #8AB8F2;
    --scribe-brand-text: #8AB8F2;
    --scribe-brand-tint: #1C2635;
    --scribe-success: #8BD39B;
    --scribe-warning: #E0B65C;
    --scribe-error: #FF8A80;
    --scribe-focus: #ECEAE4;
    --scribe-ink: #ECEAE4;
    --scribe-line: #80868F;
    --scribe-uncertain: #F2B24C;
    --fs-uncertain-tint: #3B3325;
    --fs-loop-tint: #18291F;
    --fs-loop-edge: #5FC4A3;
    --fs-cursor: #8AB8F2;
    --fs-cursor-tint: #1F2C3D;
    --fs-selection-tint: #2C3036;
    --fs-selection-edge: #ECEAE4;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-elevation-1: none;
    --scribe-elevation-2: 0 4px 16px rgb(0 0 0 / 0.5);
    --scribe-elevation-3: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}
[data-brand="fretscribe"][data-theme="dark"] {
  color-scheme: dark;
  --scribe-bg: #15171A;
  --scribe-surface: #1A1C20;
  --scribe-surface-raised: #212429;
  --scribe-text: #ECEAE4;
  --scribe-text-muted: #A9AEB6;
  --scribe-border: #30343A;
  --scribe-border-strong: #80868F;
  --scribe-primary: #ECEAE4;
  --scribe-on-primary: #15171A;
  --scribe-secondary: #2C3036;
  --scribe-on-secondary: #ECEAE4;
  --scribe-brand: #8AB8F2;
  --scribe-accent: #8AB8F2;
  --scribe-brand-text: #8AB8F2;
  --scribe-brand-tint: #1C2635;
  --scribe-success: #8BD39B;
  --scribe-warning: #E0B65C;
  --scribe-error: #FF8A80;
  --scribe-focus: #ECEAE4;
  --scribe-ink: #ECEAE4;
  --scribe-line: #80868F;
  --scribe-uncertain: #F2B24C;
  --fs-uncertain-tint: #3B3325;
  --fs-loop-tint: #18291F;
  --fs-loop-edge: #5FC4A3;
  --fs-cursor: #8AB8F2;
  --fs-cursor-tint: #1F2C3D;
  --fs-selection-tint: #2C3036;
  --fs-selection-edge: #ECEAE4;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-elevation-1: none;
  --scribe-elevation-2: 0 4px 16px rgb(0 0 0 / 0.5);
  --scribe-elevation-3: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* High contrast: our palettes when the user asks for more contrast; tints become outlines.
   Light or dark follows the resolved theme: data-theme when the page pins one, else the system.
   Under forced colours the system colours below win instead. */
@media (prefers-contrast: more) and (forced-colors: none) {
  [data-brand="fretscribe"]:not([data-theme="dark"]) {
    color-scheme: light;
    --scribe-bg: #FFFFFF;
    --scribe-surface: #FFFFFF;
    --scribe-surface-raised: #FFFFFF;
    --scribe-text: #000000;
    --scribe-text-muted: #1F1F1F;
    --scribe-border: #000000;
    --scribe-border-strong: #000000;
    --scribe-primary: #000000;
    --scribe-on-primary: #FFFFFF;
    --scribe-secondary: #EDEDED;
    --scribe-on-secondary: #000000;
    --scribe-brand: #0B3F80;
    --scribe-accent: #0B3F80;
    --scribe-brand-text: #0B3F80;
    --scribe-brand-tint: #FFFFFF;
    --scribe-success: #14502A;
    --scribe-warning: #5A4000;
    --scribe-error: #8C1A13;
    --scribe-focus: #000000;
    --scribe-ink: #000000;
    --scribe-line: #000000;
    --scribe-uncertain: #6E3A00;
    --fs-uncertain-tint: #FFFFFF;
    --fs-loop-tint: #FFFFFF;
    --fs-loop-edge: #0F4F3E;
    --fs-cursor: #0B3F80;
    --fs-cursor-tint: #FFFFFF;
    --fs-selection-tint: #FFFFFF;
    --fs-selection-edge: #000000;
    --scribe-scrim: rgb(0 0 0 / 0.4);
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}
@media (prefers-contrast: more) and (forced-colors: none) and (prefers-color-scheme: dark) {
  [data-brand="fretscribe"]:not([data-theme="light"]) {
    color-scheme: dark;
    --scribe-bg: #000000;
    --scribe-surface: #000000;
    --scribe-surface-raised: #0A0A0A;
    --scribe-text: #FFFFFF;
    --scribe-text-muted: #E6E6E6;
    --scribe-border: #FFFFFF;
    --scribe-border-strong: #FFFFFF;
    --scribe-primary: #FFFFFF;
    --scribe-on-primary: #000000;
    --scribe-secondary: #1A1A1A;
    --scribe-on-secondary: #FFFFFF;
    --scribe-brand: #A8CCFF;
    --scribe-accent: #A8CCFF;
    --scribe-brand-text: #A8CCFF;
    --scribe-brand-tint: #000000;
    --scribe-success: #9BE8AE;
    --scribe-warning: #FFD27A;
    --scribe-error: #FFA8A0;
    --scribe-focus: #FFFFFF;
    --scribe-ink: #FFFFFF;
    --scribe-line: #FFFFFF;
    --scribe-uncertain: #FFC66B;
    --fs-uncertain-tint: #000000;
    --fs-loop-tint: #000000;
    --fs-loop-edge: #7FE0BF;
    --fs-cursor: #A8CCFF;
    --fs-cursor-tint: #000000;
    --fs-selection-tint: #000000;
    --fs-selection-edge: #FFFFFF;
    --scribe-scrim: rgb(0 0 0 / 0.6);
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}
@media (prefers-contrast: more) and (forced-colors: none) {
  [data-brand="fretscribe"][data-theme="dark"] {
    color-scheme: dark;
    --scribe-bg: #000000;
    --scribe-surface: #000000;
    --scribe-surface-raised: #0A0A0A;
    --scribe-text: #FFFFFF;
    --scribe-text-muted: #E6E6E6;
    --scribe-border: #FFFFFF;
    --scribe-border-strong: #FFFFFF;
    --scribe-primary: #FFFFFF;
    --scribe-on-primary: #000000;
    --scribe-secondary: #1A1A1A;
    --scribe-on-secondary: #FFFFFF;
    --scribe-brand: #A8CCFF;
    --scribe-accent: #A8CCFF;
    --scribe-brand-text: #A8CCFF;
    --scribe-brand-tint: #000000;
    --scribe-success: #9BE8AE;
    --scribe-warning: #FFD27A;
    --scribe-error: #FFA8A0;
    --scribe-focus: #FFFFFF;
    --scribe-ink: #FFFFFF;
    --scribe-line: #FFFFFF;
    --scribe-uncertain: #FFC66B;
    --fs-uncertain-tint: #000000;
    --fs-loop-tint: #000000;
    --fs-loop-edge: #7FE0BF;
    --fs-cursor: #A8CCFF;
    --fs-cursor-tint: #000000;
    --fs-selection-tint: #000000;
    --fs-selection-edge: #FFFFFF;
    --scribe-scrim: rgb(0 0 0 / 0.6);
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}
[data-brand="fretscribe"][data-theme="high-contrast"] {
  color-scheme: dark;
  --scribe-bg: #000000;
  --scribe-surface: #000000;
  --scribe-surface-raised: #0A0A0A;
  --scribe-text: #FFFFFF;
  --scribe-text-muted: #E6E6E6;
  --scribe-border: #FFFFFF;
  --scribe-border-strong: #FFFFFF;
  --scribe-primary: #FFFFFF;
  --scribe-on-primary: #000000;
  --scribe-secondary: #1A1A1A;
  --scribe-on-secondary: #FFFFFF;
  --scribe-brand: #A8CCFF;
  --scribe-accent: #A8CCFF;
  --scribe-brand-text: #A8CCFF;
  --scribe-brand-tint: #000000;
  --scribe-success: #9BE8AE;
  --scribe-warning: #FFD27A;
  --scribe-error: #FFA8A0;
  --scribe-focus: #FFFFFF;
  --scribe-ink: #FFFFFF;
  --scribe-line: #FFFFFF;
  --scribe-uncertain: #FFC66B;
  --fs-uncertain-tint: #000000;
  --fs-loop-tint: #000000;
  --fs-loop-edge: #7FE0BF;
  --fs-cursor: #A8CCFF;
  --fs-cursor-tint: #000000;
  --fs-selection-tint: #000000;
  --fs-selection-edge: #FFFFFF;
  --scribe-scrim: rgb(0 0 0 / 0.6);
  --scribe-elevation-1: none;
  --scribe-elevation-2: none;
  --scribe-elevation-3: none;
}
[data-brand="fretscribe"][data-theme="high-contrast-light"] {
  color-scheme: light;
  --scribe-bg: #FFFFFF;
  --scribe-surface: #FFFFFF;
  --scribe-surface-raised: #FFFFFF;
  --scribe-text: #000000;
  --scribe-text-muted: #1F1F1F;
  --scribe-border: #000000;
  --scribe-border-strong: #000000;
  --scribe-primary: #000000;
  --scribe-on-primary: #FFFFFF;
  --scribe-secondary: #EDEDED;
  --scribe-on-secondary: #000000;
  --scribe-brand: #0B3F80;
  --scribe-accent: #0B3F80;
  --scribe-brand-text: #0B3F80;
  --scribe-brand-tint: #FFFFFF;
  --scribe-success: #14502A;
  --scribe-warning: #5A4000;
  --scribe-error: #8C1A13;
  --scribe-focus: #000000;
  --scribe-ink: #000000;
  --scribe-line: #000000;
  --scribe-uncertain: #6E3A00;
  --fs-uncertain-tint: #FFFFFF;
  --fs-loop-tint: #FFFFFF;
  --fs-loop-edge: #0F4F3E;
  --fs-cursor: #0B3F80;
  --fs-cursor-tint: #FFFFFF;
  --fs-selection-tint: #FFFFFF;
  --fs-selection-edge: #000000;
  --scribe-scrim: rgb(0 0 0 / 0.4);
  --scribe-elevation-1: none;
  --scribe-elevation-2: none;
  --scribe-elevation-3: none;
}

/* Forced colours (Windows contrast themes): system colours only; shape carries the meaning. */
@media (forced-colors: active) {
  [data-brand="fretscribe"] {
    --scribe-bg: Canvas;
    --scribe-surface: Canvas;
    --scribe-surface-raised: Canvas;
    --scribe-text: CanvasText;
    --scribe-text-muted: CanvasText;
    --scribe-border: CanvasText;
    --scribe-border-strong: CanvasText;
    --scribe-primary: Highlight;
    --scribe-on-primary: HighlightText;
    --scribe-secondary: ButtonFace;
    --scribe-on-secondary: ButtonText;
    --scribe-brand: CanvasText;
    --scribe-accent: LinkText;
    --scribe-brand-text: CanvasText;
    --scribe-brand-tint: Canvas;
    --scribe-success: CanvasText;
    --scribe-warning: CanvasText;
    --scribe-error: CanvasText;
    --scribe-focus: Highlight;
    --scribe-ink: CanvasText;
    --scribe-line: CanvasText;
    --scribe-uncertain: LinkText;
    --fs-uncertain-tint: Canvas;
    --fs-loop-tint: Canvas;
    --fs-loop-edge: Highlight;
    --fs-cursor: Highlight;
    --fs-cursor-tint: Canvas;
    --fs-selection-tint: Canvas;
    --fs-selection-edge: Highlight;
    --scribe-scrim: Canvas;
    --scribe-elevation-1: none;
    --scribe-elevation-2: none;
    --scribe-elevation-3: none;
  }
}

/* Reduced motion: no movement; state changes cross-fade at most --scribe-duration-reduced. */
@media (prefers-reduced-motion: reduce) {
  [data-brand="fretscribe"] {
    --scribe-duration-fast: 0ms;
    --scribe-duration-base: var(--scribe-duration-reduced);
    --scribe-duration-slow: var(--scribe-duration-reduced);
  }
}