/* 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. */

:root {
  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) {
  :root: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);
  }
}
:root[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) {
  :root: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) {
  :root: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) {
  :root[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;
  }
}
:root[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;
}
:root[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) {
  :root {
    --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) {
  :root {
    --scribe-duration-fast: 0ms;
    --scribe-duration-base: var(--scribe-duration-reduced);
    --scribe-duration-slow: var(--scribe-duration-reduced);
  }
}