/* Fretnetic design tokens · v1
 * Base set from the approved design system (fretnetic-design-system.md), extended below with the
 * values the app needs that the mockups didn't cover: the 12 interval colours, fretboard parts,
 * status fills vs status text, secondary accent, logo. Components use these through the aliases
 * in styles.css. Interval palette: hues kept from v0 so learned colour meanings carry over;
 * every colour ≥5.75:1 against note-ink; notes that share common scales are ≥15 ΔE apart. */
:root {
  --fn-font-display: "Fraunces", Georgia, serif;
  --fn-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fn-font-display-axes: "SOFT" 0, "WONK" 0;
  --fn-weight-regular: 400;
  --fn-weight-medium: 500;
  --fn-weight-semibold: 600;
  --fn-weight-bold: 700;
  --fn-text-display: clamp(2.25rem, 3.5vw, 3.5rem);
  --fn-text-h2: 2.25rem;
  --fn-text-h3: 1.5rem;
  --fn-text-body: 1rem;
  --fn-text-control: 0.875rem;
  --fn-text-caption: 0.75rem;
  --fn-leading-display: 1.08;
  --fn-leading-heading: 1.2;
  --fn-leading-body: 1.5;
  --fn-tracking-display: -0.04em;
  --fn-tracking-heading: -0.025em;
  --fn-tracking-label: 0.18em;
  --fn-space-0: 0px;
  --fn-space-1: 4px;
  --fn-space-2: 8px;
  --fn-space-3: 12px;
  --fn-space-4: 16px;
  --fn-space-5: 20px;
  --fn-space-6: 24px;
  --fn-space-8: 32px;
  --fn-space-10: 40px;
  --fn-space-12: 48px;
  --fn-space-16: 64px;
  --fn-radius-small: 4px;
  --fn-radius-control: 6px;
  --fn-radius-panel: 8px;
  --fn-radius-round: 999px;
  --fn-border-width: 1px;
  --fn-focus-width: 2px;
  --fn-focus-offset: 3px;
  --fn-control-height: 44px;
  --fn-note-size: 40px;
  --fn-icon-size: 20px;
  --fn-icon-stroke: 1.75px;
  --fn-header-height: 72px;
  --fn-page-max: 1680px;
  --fn-sidebar-width: 360px;
  --fn-duration-fast: 120ms;
  --fn-duration-normal: 180ms;
  --fn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fn-shadow-panel: none;
}
:root, [data-theme="light"] {
  --fn-canvas: #FAF9F6;
  --fn-surface: #FFFFFF;
  --fn-surface-raised: #F3F4F5;
  --fn-text: #121B2E;
  --fn-text-secondary: #526078;
  --fn-text-muted: #626D7F;
  --fn-border: #E2E5EA;
  --fn-border-control: #818A98;
  --fn-accent: #FF806C;
  --fn-accent-hover: #FF947F;
  --fn-accent-pressed: #FF806C;
  --fn-accent-text: #BA3324;
  --fn-accent-subtle: #FFF0EB;
  --fn-on-accent: #121B2E;
  --fn-note-root: #FF806C;
  --fn-note-scale: #C4DFFC;
  --fn-note-ink: #121B2E;
  --fn-fret-line: #7C838B;
  --fn-position-fill: #E8EFF6;
  --fn-lesson-fill: #FBEAE4;
  --fn-button-primary: #18233A;
  --fn-button-primary-hover: #2A3954;
  --fn-on-primary: #FFFFFF;
  --fn-focus: #265B9D;
  --fn-disabled-fill: #ECEEF1;
  --fn-disabled-text: #6B7380;
  --fn-success: #236947;
  --fn-error: #B52D39;
  /* --- Fretnetic extensions (light) --- */
  --fn-on-accent-text: #FFFFFF;
  --fn-secondary: #2F5FA8;
  --fn-on-secondary: #FFFFFF;
  --fn-info: #2F5FA8;
  --fn-success-fill: #3A9E6F;
  --fn-warning: #8A5208;
  --fn-warning-fill: #D99A26;
  --fn-error-fill: #D6454F;
  --fn-shadow-float: 0 10px 30px rgba(18, 27, 46, 0.12);
  --fn-board: #F6F5F2;
  --fn-nut: #3E4550;
  --fn-inlay: #D3D6DB;
  --fn-ghost-fill: #FFFFFF;
  --fn-marker-ring: rgba(18, 27, 46, 0.28);
  --fn-logo-tile: #EDEDEF;
  --fn-logo-line: #121B2E;
  --fn-logo-dot: #FF806C;
  --iv-0: #FF806C; --iv-1: #F7C0A1; --iv-2: #F7D082; --iv-3: #8ED9EB; --iv-4: #AAC7F8; --iv-5: #90DFAD;
  --iv-6: #C2B4CF; --iv-7: #AF94F0; --iv-8: #ECF075; --iv-9: #A8E6DB; --iv-10: #F4AFD7; --iv-11: #F8BFCA;
}

:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] {
  --fn-canvas: #191B1E;
  --fn-surface: #22252A;
  --fn-surface-raised: #2D3239;
  --fn-text: #F2EEE8;
  --fn-text-secondary: #B2B8C2;
  --fn-text-muted: #A0A9B6;
  --fn-border: #383E47;
  --fn-border-control: #798391;
  --fn-accent: #FF806C;
  --fn-accent-hover: #FF947F;
  --fn-accent-pressed: #FF806C;
  --fn-accent-text: #FF897A;
  --fn-accent-subtle: #3D2C2A;
  --fn-on-accent: #121B2E;
  --fn-note-root: #FF806C;
  --fn-note-scale: #9ABBDD;
  --fn-note-ink: #121B2E;
  --fn-fret-line: #79818C;
  --fn-position-fill: #2C3743;
  --fn-lesson-fill: #352C2A;
  --fn-button-primary: #F2EEE8;
  --fn-button-primary-hover: #DED8CF;
  --fn-on-primary: #191B1E;
  --fn-focus: #A7CFFF;
  --fn-disabled-fill: #2A2D32;
  --fn-disabled-text: #9199A5;
  --fn-success: #8AD8AE;
  --fn-error: #FF929B;
  /* --- Fretnetic extensions (dark) --- */
  --fn-on-accent-text: #121B2E;
  --fn-secondary: #A7CFFF;
  --fn-on-secondary: #121B2E;
  --fn-info: #A7CFFF;
  --fn-success-fill: #8AD8AE;
  --fn-warning: #F2C572;
  --fn-warning-fill: #F2C572;
  --fn-error-fill: #FF929B;
  --fn-shadow-float: 0 12px 34px rgba(0, 0, 0, 0.45);
  --fn-board: #26292E;
  --fn-nut: #A0A9B6;
  --fn-inlay: #3A4049;
  --fn-ghost-fill: #22252A;
  --fn-marker-ring: rgba(0, 0, 0, 0.4);
  --fn-logo-tile: #2E3239;
  --fn-logo-line: #DDD5CC;
  --fn-logo-dot: #FF806C;
  --iv-0: #FF806C; --iv-1: #E0A685; --iv-2: #DFB768; --iv-3: #73C0D3; --iv-4: #94B2E6; --iv-5: #75C793;
  --iv-6: #B2A5C0; --iv-7: #A288DD; --iv-8: #D0D45E; --iv-9: #8BD0C4; --iv-10: #DF90BE; --iv-11: #E9A5B3;
}
[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
  --fn-canvas: #191B1E;
  --fn-surface: #22252A;
  --fn-surface-raised: #2D3239;
  --fn-text: #F2EEE8;
  --fn-text-secondary: #B2B8C2;
  --fn-text-muted: #A0A9B6;
  --fn-border: #383E47;
  --fn-border-control: #798391;
  --fn-accent: #FF806C;
  --fn-accent-hover: #FF947F;
  --fn-accent-pressed: #FF806C;
  --fn-accent-text: #FF897A;
  --fn-accent-subtle: #3D2C2A;
  --fn-on-accent: #121B2E;
  --fn-note-root: #FF806C;
  --fn-note-scale: #9ABBDD;
  --fn-note-ink: #121B2E;
  --fn-fret-line: #79818C;
  --fn-position-fill: #2C3743;
  --fn-lesson-fill: #352C2A;
  --fn-button-primary: #F2EEE8;
  --fn-button-primary-hover: #DED8CF;
  --fn-on-primary: #191B1E;
  --fn-focus: #A7CFFF;
  --fn-disabled-fill: #2A2D32;
  --fn-disabled-text: #9199A5;
  --fn-success: #8AD8AE;
  --fn-error: #FF929B;
  /* --- Fretnetic extensions (dark) --- */
  --fn-on-accent-text: #121B2E;
  --fn-secondary: #A7CFFF;
  --fn-on-secondary: #121B2E;
  --fn-info: #A7CFFF;
  --fn-success-fill: #8AD8AE;
  --fn-warning: #F2C572;
  --fn-warning-fill: #F2C572;
  --fn-error-fill: #FF929B;
  --fn-shadow-float: 0 12px 34px rgba(0, 0, 0, 0.45);
  --fn-board: #26292E;
  --fn-nut: #A0A9B6;
  --fn-inlay: #3A4049;
  --fn-ghost-fill: #22252A;
  --fn-marker-ring: rgba(0, 0, 0, 0.4);
  --fn-logo-tile: #2E3239;
  --fn-logo-line: #DDD5CC;
  --fn-logo-dot: #FF806C;
  --iv-0: #FF806C; --iv-1: #E0A685; --iv-2: #DFB768; --iv-3: #73C0D3; --iv-4: #94B2E6; --iv-5: #75C793;
  --iv-6: #B2A5C0; --iv-7: #A288DD; --iv-8: #D0D45E; --iv-9: #8BD0C4; --iv-10: #DF90BE; --iv-11: #E9A5B3;
}
  :root:not([data-theme]) { color-scheme: dark; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --fn-duration-fast: 0ms; --fn-duration-normal: 0ms; }
}