/* =============================================================================
   The Music Ledger - design tokens (ML-198)

   The single source of truth for every visual value in the app. Loaded before
   style.css / admin.css on every page (index.html, admin.html, styleguide.html).

   Three layers:
     Layer 1 - primitives (--ds-*). Raw palette/scale values. Never referenced
               directly by component CSS - only by Layer 2 below.
     Layer 2 - project aliases (everything else in this file). Semantic names
               that reference a Layer 1 primitive WITH a literal fallback, e.g.
               --text-color: var(--ds-neutral-750, #333333). Dark mode remaps
               Layer 2 onto different primitives (body.dark-mode below).
     Layer 3 - components (style.css, admin.css, inline styles). Reference Layer 2
               aliases ONLY - never a --ds-* primitive, never a raw value.

   Full reference: specs/tokens/token-reference.md. Enforced by
   `npm run token-audit` (scripts/token-audit.mjs).
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       LAYER 1 - primitives
       ------------------------------------------------------------------------- */

    /* Neutrals, light to dark */
    --ds-neutral-0: #ffffff;
    --ds-neutral-25: #fafafa;
    --ds-neutral-50: #f4f7f6;
    --ds-neutral-75: #ebedf0;
    --ds-neutral-100: #e0e0e0;
    --ds-neutral-150: #cfcfcf;
    --ds-neutral-200: #cccccc;
    --ds-neutral-300: #bbbbbb;
    --ds-neutral-400: #aaaaaa;
    --ds-neutral-500: #888888;
    --ds-neutral-600: #777777;
    --ds-neutral-650: #666666;
    --ds-neutral-700: #444444;
    --ds-neutral-750: #333333;
    --ds-neutral-775: #2d333b;
    --ds-neutral-800: #2c2c2c;
    --ds-neutral-850: #1e1e1e;
    --ds-neutral-875: #1a1a1a;
    --ds-neutral-900: #121212;
    --ds-neutral-950: #0a0a0a;
    --ds-neutral-1000: #000000;

    /* Brand */
    --ds-gold-300: #f5d78e;
    --ds-gold-500: #d4af37;
    --ds-gold-950: #1a1400;
    --ds-silver-300: #c0c0c8;
    --ds-sage-50: #f1f8e9;

    /* Hues */
    --ds-blue-500: #2196f3;
    --ds-orange-500: #ff9800;
    --ds-amber-400: #ffca28;
    --ds-amber-500: #ffc107;
    --ds-red-500: #f44336;
    --ds-green-400: #2ecc71;
    --ds-green-500: #4caf50;
    --ds-purple-500: #9c27b0;

    /* Accessible text variants (ML-210) - the same hues, darkened for light surfaces / lightened for
       dark ones until they pass 4.5:1 as text. Fills keep the -500 values above. */
    --ds-gold-700: #7a6214;
    --ds-red-700: #c62828;   --ds-red-300: #f7746a;
    --ds-orange-800: #9a5b00;
    --ds-blue-800: #1565c0;  --ds-blue-300: #6ab7f7;
    --ds-green-800: #2e7d32; --ds-green-300: #66bb6a;
    --ds-amber-800: #7a5c00;
    --ds-purple-300: #ce93d8;
    --ds-tuner-green-800: #1d7e46;
    --ds-neutral-625: #6b6b6b;
    --ds-neutral-550: #858585;
    --ds-neutral-500b: #808080;

    /* Heatmap ramps (data viz) */
    /* ML-235: gold ramp - the stats charts show every session type at once, so they use the brand
       gold rather than a category hue (green/purple read as "practice only"/"lesson only"). */
    --ds-heat-gold-1: #f3e3a8; --ds-heat-gold-2: #e2c355; --ds-heat-gold-3: #c9a22c; --ds-heat-gold-4: #8f7114;
    --ds-heat-gold-dark-1: #4a3b0b; --ds-heat-gold-dark-2: #7d6415; --ds-heat-gold-dark-3: #b8952b; --ds-heat-gold-dark-4: #f5d78e;
    /* ML-316: practice Levels 1-5 - silver (1-2) rising to gold (5); the brighter, the better. */
    --ds-level-1: #8f9398; --ds-level-2: #c9cdd2; --ds-level-3: #f6e7ad; --ds-level-4: #eccf62; --ds-level-5: #f5c211;
    --ds-level-dark-1: #50545a; --ds-level-dark-2: #80858c; --ds-level-dark-3: #6f5f22; --ds-level-dark-4: #b8952b; --ds-level-dark-5: #ffd23f;
    /* ML-390: the kinds of practice block - orange, teal, violet, blue - kept well away from the Levels'
       silver and gold, and always shown with the block's icon and name. */
    --ds-kind-warmup: #c2410c; --ds-kind-warmup-deep: #9a3412; --ds-kind-warmup-a14: rgba(194, 65, 12, 0.14);
    --ds-kind-scales: #0f766e; --ds-kind-scales-deep: #115e59; --ds-kind-scales-a14: rgba(15, 118, 110, 0.14);
    --ds-kind-skills: #6d28d9; --ds-kind-skills-deep: #5b21b6; --ds-kind-skills-a14: rgba(109, 40, 217, 0.14);
    --ds-kind-pieces: #1d4ed8; --ds-kind-pieces-deep: #1e40af; --ds-kind-pieces-a14: rgba(29, 78, 216, 0.14);
    --ds-kind-theory: #be185d; --ds-kind-theory-deep: #9d174d; --ds-kind-theory-a14: rgba(190, 24, 93, 0.14);
    --ds-kind-warmup-dark: #fb923c; --ds-kind-warmup-soft-dark: #fdba74; --ds-kind-warmup-a16-dark: rgba(251, 146, 60, 0.16);
    --ds-kind-scales-dark: #2dd4bf; --ds-kind-scales-soft-dark: #5eead4; --ds-kind-scales-a16-dark: rgba(45, 212, 191, 0.16);
    --ds-kind-skills-dark: #a78bfa; --ds-kind-skills-soft-dark: #c4b5fd; --ds-kind-skills-a16-dark: rgba(167, 139, 250, 0.16);
    --ds-kind-pieces-dark: #60a5fa; --ds-kind-pieces-soft-dark: #93c5fd; --ds-kind-pieces-a16-dark: rgba(96, 165, 250, 0.16);
    --ds-kind-theory-dark: #f472b6; --ds-kind-theory-soft-dark: #f9a8d4; --ds-kind-theory-a16-dark: rgba(244, 114, 182, 0.16);
    /* ML-390: the 30-second rest - a calm blue screen, light and dark */
    --ds-rest-page: #e6f0f3; --ds-rest-card: #ffffff; --ds-rest-ink: #235b6e; --ds-rest-ring: #3d8aa3; --ds-rest-track: #cfe0e6;
    --ds-rest-page-dark: #14232a; --ds-rest-card-dark: #1b2e36; --ds-rest-ink-dark: #9fd3e3; --ds-rest-ring-dark: #6fb6cc; --ds-rest-track-dark: #27414b;

    /* Translucent */
    --ds-black-a20: rgba(0, 0, 0, 0.2);
    --ds-black-a10: rgba(0, 0, 0, 0.1);
    --ds-black-a30: rgba(0, 0, 0, 0.3);
    --ds-black-a60: rgba(0, 0, 0, 0.6);
    --ds-black-a85: rgba(0, 0, 0, 0.85);
    --ds-white-a30: rgba(255, 255, 255, 0.3);
    --ds-gold-a12: rgba(212, 175, 55, 0.12);
    --ds-gold-a25: rgba(212, 175, 55, 0.25);
    --ds-gold-a55: rgba(212, 175, 55, 0.55);
    --ds-blue-a40: rgba(33, 150, 243, 0.4);
    --ds-gold-a40: rgba(212, 175, 55, 0.4);
    --ds-orange-a12: rgba(255, 152, 0, 0.12);
    --ds-red-a12: rgba(244, 67, 54, 0.12);
    --ds-blue-a12: rgba(33, 150, 243, 0.12);
    --ds-green-a15: rgba(46, 204, 113, 0.15);
    --ds-green-a28: rgba(46, 204, 113, 0.28);
    --ds-green-a45: rgba(46, 204, 113, 0.45);

    /* Status chip pairs (admin feedback/notification status) - light bg/fg, then dark bg/fg */
    --ds-status-amber-bg: #fdf3d0; --ds-status-amber-fg: #7a5c00; --ds-status-amber-bg-dark: #4a3c0c; --ds-status-amber-fg-dark: #f2dd90;
    --ds-status-green-bg: #d9f2df; --ds-status-green-fg: #1c5c2e; --ds-status-green-bg-dark: #17431f; --ds-status-green-fg-dark: #a7dcb5;
    --ds-status-blue-bg: #d6e8fb; --ds-status-blue-fg: #14457a; --ds-status-blue-bg-dark: #123a63; --ds-status-blue-fg-dark: #a6cdf2;
    --ds-status-grey-bg: #e6e6e6; --ds-status-grey-fg: #555555; --ds-status-grey-bg-dark: #3a3a3a; --ds-status-grey-fg-dark: #c4c4c4;
    --ds-status-purple-bg: #dfd9f5; --ds-status-purple-fg: #3e2f7a; --ds-status-purple-bg-dark: #2f2557; --ds-status-purple-fg-dark: #c3b6f0;

    /* Spacing - 4px grid */
    --ds-size-0: 0;
    --ds-size-2: 2px;
    --ds-size-4: 4px;
    --ds-size-8: 8px;
    --ds-size-12: 12px;
    --ds-size-16: 16px;
    --ds-size-20: 20px;
    --ds-size-24: 24px;
    --ds-size-32: 32px;
    --ds-size-40: 40px;
    --ds-size-48: 48px;
    --ds-size-64: 64px;

    /* Type */
    --ds-font-inter: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    --ds-font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --ds-font-music: 'Noto Music', serif;
    --ds-font-icons: 'Material Symbols Outlined';
    --ds-font-bravura: 'Bravura';
    --ds-font-serif: Georgia, 'Times New Roman', serif;
    --ds-font-lexend: 'Lexend', 'Segoe UI', sans-serif;          /* ML-356 reading font (self-hosted, SIL OFL) */
    --ds-font-opendyslexic: 'OpenDyslexic', 'Comic Sans MS', sans-serif; /* ML-356 reading font (self-hosted, SIL OFL) */
    --ds-text-scale-100: 100%;
    --ds-text-scale-112: 112.5%;
    --ds-text-scale-125: 125%;
    --ds-leading-1-7: 1.7;
    --ds-leading-1-85: 1.85;
    --ds-tracking-reading: 0.035em;   /* ML-356 dyslexia-friendly letter spacing */
    --ds-word-spacing-reading: 0.12em;
    --ds-tile-label-fit: 15cqi;       /* ML-356 a tool tile's label never wider than its tile */
    /* ML-356 background choices - light, then dark: page, cards, fields. ML-359: + soft yellow and peach
       (visual stress overlays), and stronger dark versions so a colour shows in dark mode too. Every text
       colour is at least 4.5:1 on each (checked for page, card and field). */
    --ds-cream-page: #f9f1df;
    --ds-cream-card: #fdf8ec;
    --ds-cream-field: #fffcf4;
    --ds-blue-page: #ecf2f9;
    --ds-blue-card: #f1f6fb;
    --ds-blue-field: #f9fbfd;
    --ds-green-page: #eaf4eb;
    --ds-green-card: #f0f8f1;
    --ds-green-field: #f9fcf9;
    --ds-yellow-page: #f8f3d2;
    --ds-yellow-card: #fcf9e6;
    --ds-yellow-field: #fffdf3;
    --ds-peach-page: #ffede6;
    --ds-peach-card: #fff6f2;
    --ds-peach-field: #fff8f5;
    --ds-cream-page-dark: #2b2517;
    --ds-cream-card-dark: #362f1f;
    --ds-cream-field-dark: #3a3223;
    --ds-blue-page-dark: #16222f;
    --ds-blue-card-dark: #1f2d3c;
    --ds-blue-field-dark: #273544;
    --ds-green-page-dark: #17261b;
    --ds-green-card-dark: #213225;
    --ds-green-field-dark: #27372a;
    --ds-yellow-page-dark: #29260f;
    --ds-yellow-card-dark: #343118;
    --ds-yellow-field-dark: #37341d;
    --ds-peach-page-dark: #2e1f1b;
    --ds-peach-card-dark: #3a2823;
    --ds-peach-field-dark: #422f2a;
    --ds-text-0-6: 0.6rem;
    --ds-text-0-65: 0.65rem;
    --ds-text-0-8: 0.8rem;
    --ds-text-0-95: 0.95rem;
    --ds-text-1-1: 1.1rem;
    --ds-text-1-3: 1.3rem;
    --ds-text-1-6: 1.6rem;
    --ds-text-2: 2rem;
    --ds-text-3: 3rem;
    --ds-weight-400: 400;
    --ds-weight-600: 600;
    --ds-weight-700: 700;
    --ds-leading-1: 1;
    --ds-leading-1-2: 1.2;
    --ds-leading-1-45: 1.45;
    --ds-leading-1-6: 1.6;

    /* Radius */
    --ds-radius-2: 2px;
    --ds-radius-4: 4px;
    --ds-radius-8: 8px;
    --ds-radius-12: 12px;
    --ds-radius-16: 16px;
    --ds-radius-20: 20px;
    --ds-radius-full: 999px;
    --ds-radius-50pct: 50%;

    /* Motion */
    --ds-duration-80: 80ms;
    --ds-duration-150: 150ms;
    --ds-duration-200: 200ms;
    --ds-duration-250: 250ms;
    --ds-duration-400: 400ms;
    --ds-duration-1000: 1000ms;
    --ds-duration-10000: 10000ms;

    /* -------------------------------------------------------------------------
       LAYER 2 - project aliases (the only tokens components may use)
       ------------------------------------------------------------------------- */

    /* Surfaces */
    --bg-color: var(--ds-neutral-50, #f4f7f6);            /* page background */
    --container-bg: var(--ds-neutral-0, #ffffff);         /* main column, cards, modals, menus */
    --secondary-color: var(--ds-sage-50, #f1f8e9);        /* quiet tinted panel (month nav, active admin tab) */
    --input-bg: var(--ds-neutral-25, #fafafa);            /* inputs + tappable surfaces */
    --surface-inverse: var(--ds-neutral-750, #333333);    /* dark toast / snackbar */
    --overlay-bg: var(--ds-black-a85, rgba(0, 0, 0, 0.85)); /* modal scrim */
    --menu-backdrop-bg: var(--ds-black-a30, rgba(0, 0, 0, 0.3)); /* dims the page behind the open ☰ menu on a phone (ML-291) - lighter than a modal scrim */
    --media-bg: var(--ds-neutral-1000, #000000);              /* letterbox behind embedded video */
    --splash-bg: var(--ds-neutral-950, #0a0a0a);                 /* login splash backdrop only */

    /* Text */
    --text-color: var(--ds-neutral-750, #333333);         /* body text */
    --label-color: var(--ds-neutral-625, #6b6b6b);        /* secondary / muted text, labels, captions */
    --text-on-accent: var(--ds-neutral-875, #1a1a1a);     /* text/icon on a saturated fill (danger, info, edit, pass) - dark, not white, for contrast (ML-210) */
    --text-on-inverse: var(--ds-neutral-0, #ffffff);      /* text/icon on --surface-inverse (dark toasts) */
    --text-on-warning: var(--ds-neutral-1000, #000000);   /* text on amber */
    --splash-title-color: var(--ds-gold-300, #f5d78e);           /* login splash title only */
    --splash-subtitle-color: var(--ds-neutral-150, #cfcfcf);     /* login splash subtitle only */

    /* Borders */
    --input-border: var(--ds-neutral-100, #e0e0e0);       /* every hairline/outline border and divider */
    --control-off-bg: var(--ds-neutral-550, #858585);     /* toggle track off, neutral accent stripe (3:1 against the page, ML-210) */
    --control-border: var(--ds-neutral-550, #858585);     /* edge of a TAPPABLE surface (tile, input, value box) - 3:1 against the page so "lighter = clickable" is visible (ML-210). Display cards keep --input-border */
    --control-knob: var(--ds-neutral-0, #ffffff);             /* toggle knob - white in both themes */

    /* Actions & interactive states */
    --primary-action: var(--ds-gold-500, #d4af37);        /* primary buttons, selected outlines, accents */
    --primary-action-text: var(--ds-gold-950, #1a1400);   /* text on --primary-action */
    --primary-action-strong: var(--ds-gold-700, #7a6214);  /* gold TEXT and thin gold outlines (selected tiles, links, focus ring) - passes 4.5:1; fills keep --primary-action (ML-210) */
    --primary-action-tint: var(--ds-gold-a12, rgba(212, 175, 55, 0.12)); /* selected/hover wash */
    --primary-action-border-soft: var(--ds-gold-a40, rgba(212, 175, 55, 0.4)); /* quiet gold outline around a featured card */
    --selection-tint: var(--ds-orange-a12, rgba(255, 152, 0, 0.12)); /* wash behind a --selection-color outline (lead-in) */
    --danger-tint: var(--ds-red-a12, rgba(244, 67, 54, 0.12));  /* wash behind a danger/warning tile or icon */
    --info-tint: var(--ds-blue-a12, rgba(33, 150, 243, 0.12));  /* wash behind an info-coloured icon */
    --primary-action-glow: var(--ds-gold-a55, rgba(212, 175, 55, 0.55)); /* pulsing glow on a live/active element (fermata hold) */
    --primary-action-glow-soft: var(--ds-gold-a25, rgba(212, 175, 55, 0.25)); /* resting glow around a highlighted element */
    --primary-action-gradient-end: var(--ds-gold-300, #f5d78e);  /* second stop of the gold gradient (splash sign-in button) */
    --nav-action: var(--ds-silver-300, #c0c0c8);          /* navigation / neutral buttons */
    --nav-action-text: var(--ds-neutral-875, #1a1a1a);           /* text on --nav-action */
    --link-color: var(--ds-gold-700, #7a6214);                   /* inline text links */
    --selection-color: var(--ds-orange-500, #ff9800);     /* toggles on, edit buttons */
    --button-overlay: var(--ds-white-a30, rgba(255, 255, 255, 0.3)); /* button sitting on a coloured toast */
    --opacity-disabled: 0.5;                                     /* any disabled control */
    --opacity-muted: 0.6;                                        /* de-emphasised text/content */

    /* Feedback */
    --info-color: var(--ds-blue-500, #2196f3);                   /* info toasts, informational highlights */
    --warning-color: var(--ds-amber-500, #ffc107);               /* warning toasts, caution icons */
    --danger-color: var(--ds-red-500, #f44336);                  /* destructive actions, errors, unread dots */
    --success-color: var(--ds-green-500, #4caf50);               /* success states, completed status */
    --danger-text: var(--ds-red-700, #c62828);             /* red text/icons (destructive text buttons, delete icons) */
    --selection-text: var(--ds-orange-800, #9a5b00);       /* orange text/icons/outlines (edit icon, lead-in) */
    --info-text: var(--ds-blue-800, #1565c0);              /* blue text/icons */
    --success-text: var(--ds-green-800, #2e7d32);          /* green text/icons */
    --warning-text: var(--ds-amber-800, #7a5c00);          /* amber text/icons */
    --tuner-in-tune-text: var(--ds-tuner-green-800, #1d7e46); /* tuner in-tune state as text/outline */
    --tuner-in-tune-green: var(--ds-green-400, #2ecc71);         /* tuner in-tune state only (brighter than --success-color) */
    --tuner-in-tune-tint: var(--ds-green-a28, rgba(46, 204, 113, 0.28)); /* tuner card background while in tune */
    --tuner-in-tune-zone: var(--ds-green-a45, rgba(46, 204, 113, 0.45)); /* in-tune band on the needle track */
    --tuner-in-tune-zone-soft: var(--ds-green-a15, rgba(46, 204, 113, 0.15)); /* in-tune band on the pitch graph */

    /* Status chips (admin feedback / notification status) */
    --status-amber-bg: var(--ds-status-amber-bg, #fdf3d0);   /* under review */
    --status-amber-fg: var(--ds-status-amber-fg, #7a5c00); /* text on --status-amber-bg */
    --status-green-bg: var(--ds-status-green-bg, #d9f2df);   /* planned, live */
    --status-green-fg: var(--ds-status-green-fg, #1c5c2e); /* text on --status-green-bg */
    --status-blue-bg: var(--ds-status-blue-bg, #d6e8fb);     /* in progress, scheduled */
    --status-blue-fg: var(--ds-status-blue-fg, #14457a); /* text on --status-blue-bg */
    --status-grey-bg: var(--ds-status-grey-bg, #e6e6e6);     /* not progressing, expired, withdrawn */
    --status-grey-fg: var(--ds-status-grey-fg, #555555); /* text on --status-grey-bg */
    --status-purple-bg: var(--ds-status-purple-bg, #dfd9f5); /* resolved */
    --status-purple-fg: var(--ds-status-purple-fg, #3e2f7a); /* text on --status-purple-bg */

    /* Data viz */
    --cat-practise: var(--ds-green-500, #4caf50);                /* Practice category - chips, chart bars, history stripe */
    --cat-rehearsal: var(--ds-blue-500, #2196f3);                /* Rehearsal category */
    --cat-lesson: var(--ds-purple-500, #9c27b0);                 /* Lesson category */
    --cat-performance: var(--ds-orange-500, #ff9800);            /* Performance category */
    --cat-practise-text: var(--ds-green-800, #2e7d32);     /* category colour as TEXT (history rows, active filter pill) */
    --cat-rehearsal-text: var(--ds-blue-800, #1565c0);     /* category colour as text */
    --cat-lesson-text: var(--ds-purple-500, #9c27b0);      /* category colour as text */
    --cat-performance-text: var(--ds-orange-800, #9a5b00); /* category colour as text */
    --chart-hours: var(--ds-gold-500, #d4af37);                  /* stats "Hours" bar chart - gold, since it counts every session type (ML-235) */
    --chart-days: var(--ds-gold-500, #d4af37);                   /* stats "Days" bar chart - gold (ML-235) */
    --chart-sessions: var(--ds-gold-500, #d4af37);               /* stats "Sessions" bar chart - gold (ML-235) */
    --chart-streak: var(--ds-gold-500, #d4af37);                 /* practice and playing streak histogram bars (ML-235) */
    --heat-time-0: var(--ds-neutral-75, #ebedf0);                /* practice-time heatmap, empty day (0-4 = intensity ramp) */
    --heat-time-1: var(--ds-heat-gold-1, #f3e3a8);               /* intensity step 1 - gold ramp (ML-235) */
    --heat-time-2: var(--ds-heat-gold-2, #e2c355);               /* intensity step 2 */
    --heat-time-3: var(--ds-heat-gold-3, #c9a22c);               /* intensity step 3 */
    --heat-time-4: var(--ds-heat-gold-4, #8f7114);               /* intensity step 4 (max) */
    --heat-sess-0: var(--ds-neutral-75, #ebedf0);                /* session-count heatmap, empty day (0-4 = intensity ramp) */
    --heat-sess-1: var(--ds-heat-gold-1, #f3e3a8);               /* intensity step 1 - same gold ramp as time (ML-235) */
    --heat-sess-2: var(--ds-heat-gold-2, #e2c355);               /* intensity step 2 */
    --heat-sess-3: var(--ds-heat-gold-3, #c9a22c);               /* intensity step 3 */
    --heat-sess-4: var(--ds-heat-gold-4, #8f7114);               /* intensity step 4 (max) */
    --level-1: var(--ds-level-1, #8f9398);                       /* practice Level 1 (ML-316) - dull silver: heat-map bar, Level chip, picker */
    --level-2: var(--ds-level-2, #c9cdd2);                       /* practice Level 2 - silver */
    --level-3: var(--ds-level-3, #f6e7ad);                       /* practice Level 3 - pale gold */
    --level-4: var(--ds-level-4, #eccf62);                       /* practice Level 4 - light gold */
    --level-5: var(--ds-level-5, #f5c211);                       /* practice Level 5 - gold, performance-ready */
    --level-1-text: var(--ds-neutral-875, #1a1a1a);              /* the Level number on a --level-1 fill */
    --level-2-text: var(--ds-neutral-875, #1a1a1a);              /* the Level number on --level-2 */
    --level-3-text: var(--ds-neutral-875, #1a1a1a);              /* the Level number on --level-3 */
    --level-4-text: var(--ds-neutral-875, #1a1a1a);              /* the Level number on --level-4 */
    --level-5-text: var(--ds-neutral-875, #1a1a1a);              /* the Level number on --level-5 */
    --level-unset-border: var(--ds-neutral-550, #858585);        /* dashed outline of a bar with no Level yet (3:1 on the page) */
    /* ML-390: the kinds of practice block (Warm-up, Scales, Skills, Pieces) - edge, icon/text and fill */
    --kind-warmup: var(--ds-kind-warmup, #c2410c);               /* a Warm-up block's edge (3:1 on the page) */
    --kind-warmup-text: var(--ds-kind-warmup-deep, #9a3412);     /* a Warm-up block's icon and name (4.5:1 on its tint) */
    --kind-warmup-tint: var(--ds-kind-warmup-a14, rgba(194, 65, 12, 0.14)); /* a Warm-up block's fill */
    --kind-scales: var(--ds-kind-scales, #0f766e);               /* a Scales block's edge */
    --kind-scales-text: var(--ds-kind-scales-deep, #115e59);     /* a Scales block's icon and name */
    --kind-scales-tint: var(--ds-kind-scales-a14, rgba(15, 118, 110, 0.14)); /* a Scales block's fill */
    --kind-skills: var(--ds-kind-skills, #6d28d9);               /* a Skills block's edge */
    --kind-skills-text: var(--ds-kind-skills-deep, #5b21b6);     /* a Skills block's icon and name */
    --kind-skills-tint: var(--ds-kind-skills-a14, rgba(109, 40, 217, 0.14)); /* a Skills block's fill */
    --kind-pieces: var(--ds-kind-pieces, #1d4ed8);               /* a Pieces block's edge (Prepare and Play-through too) */
    --kind-pieces-text: var(--ds-kind-pieces-deep, #1e40af);     /* a Pieces block's icon and name */
    --kind-pieces-tint: var(--ds-kind-pieces-a14, rgba(29, 78, 216, 0.14)); /* a Pieces block's fill */
    --kind-theory: var(--ds-kind-theory, #be185d);               /* a Theory block's edge (ML-418 - deep pink, apart from the four playing kinds) */
    --kind-theory-text: var(--ds-kind-theory-deep, #9d174d);     /* a Theory block's icon and name */
    --kind-theory-tint: var(--ds-kind-theory-a14, rgba(190, 24, 93, 0.14)); /* a Theory block's fill */
    /* ML-390: the 30-second rest screen */
    --rest-bg: var(--ds-rest-page, #e6f0f3);                     /* the rest screen's calm page */
    --rest-surface: var(--ds-rest-card, #ffffff);                /* the message card and "Next up" on the rest screen */
    --rest-text: var(--ds-rest-ink, #235b6e);                    /* the countdown, the message's kind and its icon (4.5:1 on both) */
    --rest-ring: var(--ds-rest-ring, #3d8aa3);                   /* the countdown ring and the breathing circle's edge (3:1 on --rest-bg) */
    --rest-track: var(--ds-rest-track, #cfe0e6);                 /* the ring's empty track (decorative) */

    /* Spacing */
    --space-0: var(--ds-size-0, 0);                              /* reset only */
    --space-0-5: var(--ds-size-2, 2px);   /* hairline gaps (heatmap cells, stacked labels) */
    --space-1: var(--ds-size-4, 4px);                            /* icon-to-label gaps, tight stacks */
    --space-2: var(--ds-size-8, 8px);                            /* default gap between related items; label-to-input */
    --space-3: var(--ds-size-12, 12px);                          /* inner padding of compact controls; list row padding */
    --space-4: var(--ds-size-16, 16px);                          /* standard button padding; gap between stacked blocks */
    --space-5: var(--ds-size-20, 20px);                          /* container padding; gap between form groups */
    --space-6: var(--ds-size-24, 24px);                          /* modal/card padding; space before a new group */
    --space-7: var(--ds-size-32, 32px);                          /* section separation */
    --space-8: var(--ds-size-40, 40px);                          /* large section separation */
    --space-9: var(--ds-size-48, 48px);                          /* touch-target-sized offsets */
    --space-10: var(--ds-size-64, 64px);                         /* page-level whitespace (empty states, logged-out screens) */

    /* Typography */
    --font-sans: var(--ds-font-inter, 'Inter', 'Segoe UI', Tahoma, sans-serif); /* all UI text */
    --font-mono: var(--ds-font-mono, monospace);                 /* code, IDs, timestamps in admin */
    --font-music: var(--ds-font-music, 'Noto Music', serif);     /* Unicode musical symbols (segno, coda) */
    --font-icons: var(--ds-font-icons, 'Material Symbols Outlined');   /* the icon font - every .material-symbols-outlined icon (self-hosted, ML-430) */
    --font-notation: var(--ds-font-bravura, 'Bravura');          /* music notation glyphs (notes, clefs, symbols) - Bravura via public/notation.js (ML-262) */
    --font-notation-text: var(--ds-font-serif, serif);           /* words printed in music: Fine, 1./2. time-bar numbers (ML-262) */
    --font-2xs: var(--ds-text-0-6, 0.6rem);                      /* heatmap day labels only */
    --font-xs: var(--ds-text-0-65, 0.65rem);                     /* micro labels, badges, chart axes */
    --font-sm: var(--ds-text-0-8, 0.8rem);                       /* secondary text, captions, chips, metadata */
    --font-base: var(--ds-text-0-95, 0.95rem);                   /* body text, list rows, inputs */
    --font-md: var(--ds-text-1-1, 1.1rem);                       /* buttons, card titles, top-bar title */
    --font-lg: var(--ds-text-1-3, 1.3rem);                       /* large buttons, modal titles, stat values */
    --font-xl: var(--ds-text-1-6, 1.6rem);                       /* hero values (current piece, tuner octave) */
    --font-2xl: var(--ds-text-2, 2rem);                          /* page titles, splash title */
    --font-3xl: var(--ds-text-3, 3rem);                          /* giant readouts (tuner note) */
    --font-weight-normal: var(--ds-weight-400, 400);             /* body text */
    --font-weight-semibold: var(--ds-weight-600, 600);           /* form labels, nav/tab items, modal titles */
    --font-weight-bold: var(--ds-weight-700, 700);               /* buttons, titles, emphasised values */
    --line-height-tight: var(--ds-leading-1, 1);                 /* icon glyphs, single-line numeric readouts */
    --line-height-snug: var(--ds-leading-1-2, 1.2);              /* multi-line button labels, chart labels */
    --line-height-base: var(--ds-leading-1-45, 1.45);            /* body paragraphs, notifications */
    --line-height-relaxed: var(--ds-leading-1-6, 1.6);           /* long-form reading text (release notes) */
    /* ML-356 reading preferences (html[data-*] blocks at the end of this file switch these) */
    --text-scale: var(--ds-text-scale-100, 100%);                /* the root font size - Text size setting */
    --reading-letter-spacing: normal;                            /* dyslexia-friendly: a little more */
    --reading-word-spacing: normal;                              /* dyslexia-friendly: a little more */
    --reading-em-style: italic;                                  /* dyslexia-friendly: no italics */
    --tile-label-fit: var(--ds-tile-label-fit, 15cqi);           /* the biggest a tool tile's label can be and still fit its tile */
    --scale-grid-label-width: var(--ds-size-64, 64px);           /* ML-357 the Scales grade grid's row-label column (the 15 key columns share the rest) */
    --font-preview-standard: var(--ds-font-inter, 'Inter', sans-serif); /* each Reading font choice drawn in its own font */
    --font-preview-lexend: var(--ds-font-lexend, 'Lexend', sans-serif); /* the Lexend choice, in Lexend */
    --font-preview-opendyslexic: var(--ds-font-opendyslexic, 'OpenDyslexic', sans-serif); /* the OpenDyslexic choice, in OpenDyslexic */
    --swatch-standard: var(--ds-neutral-50, #f4f7f6);            /* Background choice swatches - the light page colours (the dark shades in dark mode, ML-359) */
    --swatch-cream: var(--ds-cream-page, #f9f1df);               /* the Cream choice's swatch */
    --swatch-blue: var(--ds-blue-page, #ecf2f9);                 /* the Pale blue choice's swatch */
    --swatch-green: var(--ds-green-page, #eaf4eb);               /* the Pale green choice's swatch */
    --swatch-yellow: var(--ds-yellow-page, #f8f3d2);             /* ML-359 the Soft yellow choice's swatch */
    --swatch-peach: var(--ds-peach-page, #ffede6);               /* ML-359 the Peach choice's swatch */

    /* Icon glyph sizes (Material Symbols font-size) */
    --icon-sm: var(--ds-size-16, 16px);                          /* inline icons inside text or chips */
    --icon-md: var(--ds-size-20, 20px);                          /* default Material Symbols size */
    --icon-lg: var(--ds-size-24, 24px);                          /* icon-only buttons */
    --icon-xl: var(--ds-size-32, 32px);                          /* tool tiles, hero icons */

    /* Practice Levels heat map (ML-316) */
    --level-cell-size: var(--ds-size-24, 24px);                  /* one bar's square in a piece's Level map (display only, not a tap target) */
    --level-strip-height: var(--ds-size-12, 12px);               /* the thin one-row strip (Range's notes past your range) */
    --level-bar-height: var(--ds-size-20, 20px);                 /* ML-390 a piece's Levels bar chart on a list row - holds the Level number */
    --time-strip-height: var(--ds-size-12, 12px);                /* ML-390 step 1: the strip of 5-minute blocks - thin (ML-419), so it can't pass for a row of buttons */

    /* Radius - see specs/foundations/radius.md. --radius-md is THE button radius. */
    --radius-2xs: var(--ds-radius-2, 2px);                       /* heatmap cells, chart bar tops */
    --radius-xs: var(--ds-radius-4, 4px);                        /* inline code, tiny tags, toast buttons */
    --radius-sm: var(--ds-radius-8, 8px);                        /* menus, toasts, popups, small inset boxes */
    --radius-md: var(--ds-radius-12, 12px);                      /* EVERY button and tile, list rows, stat cards */
    --radius-lg: var(--ds-radius-16, 16px);                      /* inputs, choice options, picker tiles, feature cards */
    --radius-xl: var(--ds-radius-20, 20px);                      /* modals, flow cards, block boxes */
    --radius-pill: var(--ds-radius-full, 999px);                 /* badges, chips, filter pills, toggle tracks - never a button */
    --radius-circle: var(--ds-radius-50pct, 50%);                /* icon-only circular buttons, dots, avatars */

    /* Elevation */
    --shadow-sm: 0 2px 4px var(--ds-black-a20, rgba(0, 0, 0, 0.2)); /* small raised controls (toggle knob, scroll buttons) */
    --shadow-md: 0 2px 8px var(--ds-black-a10, rgba(0, 0, 0, 0.1)); /* top bar, slider thumb */
    --shadow-lg: 0 4px 12px var(--ds-black-a20, rgba(0, 0, 0, 0.2)); /* item being dragged */
    --shadow-xl: 0 4px 12px var(--ds-black-a30, rgba(0, 0, 0, 0.3)); /* menus, modals, popups */
    --shadow-2xl: 0 10px 40px var(--ds-black-a60, rgba(0, 0, 0, 0.6)); /* splash artwork only */
    --shadow-top: 0 -2px 8px var(--ds-black-a10, rgba(0, 0, 0, 0.1));   /* bars docked to the bottom edge */
    --shadow-info: 0 4px 12px var(--ds-blue-a40, rgba(33, 150, 243, 0.4)); /* info toast only */
    --focus-ring: 0 0 0 2px var(--container-bg), 0 0 0 4px var(--primary-action-strong);               /* keyboard focus outline, selected-swatch ring */
    --selected-ring-inset: inset 0 0 0 1px var(--primary-action-strong);                                /* ML-359 thickens a chosen colour tile's outline inside it (the tile is filled with its colour, so no tint wash) */
    --shadow-ring-surface: 0 0 0 2px var(--container-bg);           /* separates a dot/badge from whatever it overlaps */
    --shadow-cut-line: inset var(--ds-size-4, 4px) 0 0 var(--danger-color); /* ML-390 the knife's cut on Focus bits: a red line down a bar's left edge */
    --shadow-glow: 0 0 10px 5px var(--ds-gold-a55, rgba(212, 175, 55, 0.55)); /* peak of the pulsing gold glow */
    --shadow-glow-rest: 0 0 0 0 var(--ds-gold-a55, rgba(212, 175, 55, 0.55)); /* rest frame of the pulsing gold glow */
    --shadow-glow-soft: 0 0 14px var(--ds-gold-a25, rgba(212, 175, 55, 0.25)); /* static halo on a selected featured option */

    /* Z-index - one ladder, low to high. Never invent a number in a component. */
    --z-base: 1;          /* lift above a sibling in the same stacking context */
    --z-raised: 2;                                               /* second layer inside the same component */
    --z-sticky: 10;       /* sticky axis/column inside a scroller */
    --z-float: 30;        /* floating scroll buttons over content */
    --z-header: 50;       /* sticky top bar group */
    --z-menu-backdrop: 40;                                       /* ☰ menu backdrop: over the page and its floating buttons, under the top bar that holds the menu */
    --z-header-overlay: 60;                                      /* element that must sit over the sticky header (timer dropdown) */
    --z-dropdown: 100;    /* menus, and the base modal layer */
    --z-modal: 100;                                              /* modal scrim + dialog */
    --z-modal-stacked: 200; /* a modal opened from inside another modal */
    --z-toast: 1000;      /* toasts, anchored popups */
    --z-splash: 9999;     /* login splash - always on top */

    /* Motion */
    --duration-instant: var(--ds-duration-80, 80ms);   /* press feedback */
    --duration-fast: var(--ds-duration-150, 150ms);    /* colour/border state changes */
    --duration-swipe: var(--ds-duration-200, 200ms);  /* a swiped row settling open or shut (swipeTo, app.js) */
    --duration-base: var(--ds-duration-250, 250ms);    /* slides, fades, toggles, expanding panels */
    --duration-slow: var(--ds-duration-400, 400ms);    /* chart bar growth */
    --duration-pulse: var(--ds-duration-1000, 1000ms); /* looping attention animations */
    --duration-breath: var(--ds-duration-10000, 10000ms); /* one slow breath on the practice rest screen (ML-390): 4 s in, 6 s out */
    --ease-standard: ease;                                       /* default easing for UI transitions */
    --ease-in-out: ease-in-out;                                  /* looping/pulsing animations */
    --ease-linear: linear;                                       /* colour/opacity tracking a live value (meters, metronome dots) */

    /* Layout */
    --app-max-width: 500px;   /* single source of truth for the centred app column (ML-53) */
    /* ML-239: tablet and desktop (specs/foundations/layout.md) */
    --rail-width: 256px;          /* the menu rail, open: icons and names */
    --rail-width-folded: 64px;    /* the menu rail, folded to icons */
    --page-max-narrow: 640px;     /* a form, a set of steps or a page of reading on a wide screen */
    --page-max-wide: 1080px;      /* Home, playing and the two-pane pages on a wide screen */
    --pane-list-width: 320px;     /* the list side of a two-pane page */
    --pane-col-min: 320px;        /* narrowest a side-by-side column may get before the two stack */
    --page-max-panes: 1320px;     /* a two-pane page: the list, and room for what opens beside it */
    --play-col-min: 380px;        /* narrowest the controls and the piece get side by side on the play screen */
    --tile-col-min: 96px;         /* narrowest a tool tile gets when a row fits as many as it can */
    --stat-col-min: 180px;        /* narrowest a stat card gets on the Stats page's grid */
    --rail-head-height: 58px;     /* the rail's head lines up with the top bar */
    --touch-target: var(--ds-size-48, 48px); /* minimum tap target for any button */
    --bottom-bar-clearance-lg: 150px;    /* scroll room above the taller Flow details sticky bar */
    --toast-above-bottom-bar: 100px;     /* where a toast sits on a screen with a bar pinned to the bottom (Quick entry's Back / Next, the piece edit screen's Cancel / Save), so it never covers the bar's buttons */
}

body.dark-mode {
    --menu-backdrop-bg: var(--ds-black-a60, rgba(0, 0, 0, 0.6)); /* a dark page needs a heavier dim to read as dimmed */
    --bg-color: var(--ds-neutral-900, #121212);
    --container-bg: var(--ds-neutral-850, #1e1e1e);
    --secondary-color: var(--ds-neutral-800, #2c2c2c);
    --input-bg: var(--ds-neutral-750, #333333);
    --input-border: var(--ds-neutral-700, #444444);
    --text-color: var(--ds-neutral-100, #e0e0e0);
    --label-color: var(--ds-neutral-300, #bbbbbb); /* #aaa failed AA against --input-bg - lightened */
    --warning-color: var(--ds-amber-400, #ffca28);
    --control-off-bg: var(--ds-neutral-500b, #808080);
    --control-border: var(--ds-neutral-500b, #808080);
    --primary-action-strong: var(--ds-gold-500, #d4af37);
    --link-color: var(--ds-gold-500, #d4af37);
    --danger-text: var(--ds-red-300, #f7746a);
    --selection-text: var(--ds-orange-500, #ff9800);
    --info-text: var(--ds-blue-300, #6ab7f7);
    --success-text: var(--ds-green-300, #66bb6a);
    --warning-text: var(--ds-amber-400, #ffca28);
    --tuner-in-tune-text: var(--ds-green-400, #2ecc71);
    --cat-practise-text: var(--ds-green-300, #66bb6a);
    --cat-rehearsal-text: var(--ds-blue-300, #6ab7f7);
    --cat-lesson-text: var(--ds-purple-300, #ce93d8);
    --cat-performance-text: var(--ds-orange-500, #ff9800);
    --heat-time-0: var(--ds-neutral-775, #2d333b);
    --heat-time-1: var(--ds-heat-gold-dark-1, #4a3b0b);
    --heat-time-2: var(--ds-heat-gold-dark-2, #7d6415);
    --heat-time-3: var(--ds-heat-gold-dark-3, #b8952b);
    --heat-time-4: var(--ds-heat-gold-dark-4, #f5d78e);
    --heat-sess-0: var(--ds-neutral-775, #2d333b);
    --heat-sess-1: var(--ds-heat-gold-dark-1, #4a3b0b);
    --heat-sess-2: var(--ds-heat-gold-dark-2, #7d6415);
    --heat-sess-3: var(--ds-heat-gold-dark-3, #b8952b);
    --heat-sess-4: var(--ds-heat-gold-dark-4, #f5d78e);
    --level-1: var(--ds-level-dark-1, #50545a);
    --level-2: var(--ds-level-dark-2, #80858c);
    --level-3: var(--ds-level-dark-3, #6f5f22);
    --level-4: var(--ds-level-dark-4, #b8952b);
    --level-5: var(--ds-level-dark-5, #ffd23f);
    --level-1-text: var(--ds-neutral-0, #ffffff);
    --level-3-text: var(--ds-neutral-0, #ffffff);
    --level-unset-border: var(--ds-neutral-500b, #808080);
    --kind-warmup: var(--ds-kind-warmup-dark, #fb923c);
    --kind-warmup-text: var(--ds-kind-warmup-soft-dark, #fdba74);
    --kind-warmup-tint: var(--ds-kind-warmup-a16-dark, rgba(251, 146, 60, 0.16));
    --kind-scales: var(--ds-kind-scales-dark, #2dd4bf);
    --kind-scales-text: var(--ds-kind-scales-soft-dark, #5eead4);
    --kind-scales-tint: var(--ds-kind-scales-a16-dark, rgba(45, 212, 191, 0.16));
    --kind-skills: var(--ds-kind-skills-dark, #a78bfa);
    --kind-skills-text: var(--ds-kind-skills-soft-dark, #c4b5fd);
    --kind-skills-tint: var(--ds-kind-skills-a16-dark, rgba(167, 139, 250, 0.16));
    --kind-pieces: var(--ds-kind-pieces-dark, #60a5fa);
    --kind-pieces-text: var(--ds-kind-pieces-soft-dark, #93c5fd);
    --kind-pieces-tint: var(--ds-kind-pieces-a16-dark, rgba(96, 165, 250, 0.16));
    --kind-theory: var(--ds-kind-theory-dark, #f472b6);
    --kind-theory-text: var(--ds-kind-theory-soft-dark, #f9a8d4);
    --kind-theory-tint: var(--ds-kind-theory-a16-dark, rgba(244, 114, 182, 0.16));
    --rest-bg: var(--ds-rest-page-dark, #14232a);
    --rest-surface: var(--ds-rest-card-dark, #1b2e36);
    --rest-text: var(--ds-rest-ink-dark, #9fd3e3);
    --rest-ring: var(--ds-rest-ring-dark, #6fb6cc);
    --rest-track: var(--ds-rest-track-dark, #27414b);
    --status-amber-bg: var(--ds-status-amber-bg-dark, #4a3c0c);
    --status-amber-fg: var(--ds-status-amber-fg-dark, #f2dd90);
    --status-green-bg: var(--ds-status-green-bg-dark, #17431f);
    --status-green-fg: var(--ds-status-green-fg-dark, #a7dcb5);
    --status-blue-bg: var(--ds-status-blue-bg-dark, #123a63);
    --status-blue-fg: var(--ds-status-blue-fg-dark, #a6cdf2);
    --status-grey-bg: var(--ds-status-grey-bg-dark, #3a3a3a);
    --status-grey-fg: var(--ds-status-grey-fg-dark, #c4c4c4);
    --status-purple-bg: var(--ds-status-purple-bg-dark, #2f2557);
    --status-purple-fg: var(--ds-status-purple-fg-dark, #c3b6f0);
    /* ML-359: the Background tint tiles show the dark shades you would get */
    --swatch-standard: var(--ds-neutral-900, #121212);
    --swatch-cream: var(--ds-cream-page-dark, #2b2517);
    --swatch-blue: var(--ds-blue-page-dark, #16222f);
    --swatch-green: var(--ds-green-page-dark, #17261b);
    --swatch-yellow: var(--ds-yellow-page-dark, #29260f);
    --swatch-peach: var(--ds-peach-page-dark, #2e1f1b);
}

/* =============================================================================
   ML-356 display and reading preferences - saved on the account, set as data
   attributes on <html> by public/display-prefs.js (before the page draws) and
   app.js. Each block only remaps Layer 2 aliases, like dark mode. Music notation
   keeps its own font (--font-notation) whatever the reading font.
   ============================================================================= */
html[data-font="lexend"] { --font-sans: var(--ds-font-lexend, 'Lexend', sans-serif); }
html[data-font="opendyslexic"] { --font-sans: var(--ds-font-opendyslexic, 'OpenDyslexic', sans-serif); }

html[data-text="large"] { --text-scale: var(--ds-text-scale-112, 112.5%); }
html[data-text="larger"] { --text-scale: var(--ds-text-scale-125, 125%); }

/* Dyslexia-friendly reading: more space between lines, letters and words; no italics (British
   Dyslexia Association style guide). */
html[data-reading="on"] {
    --line-height-base: var(--ds-leading-1-7, 1.7);
    --line-height-relaxed: var(--ds-leading-1-85, 1.85);
    --reading-letter-spacing: var(--ds-tracking-reading, 0.035em);
    --reading-word-spacing: var(--ds-word-spacing-reading, 0.12em);
    --reading-em-style: normal;
}

/* Background colour - light, then dark (the dark variant beats body.dark-mode on specificity). */
html[data-bg="cream"] { --bg-color: var(--ds-cream-page, #f9f1df); --container-bg: var(--ds-cream-card, #fdf8ec); --input-bg: var(--ds-cream-field, #fffcf4); }
html[data-bg="blue"] { --bg-color: var(--ds-blue-page, #ecf2f9); --container-bg: var(--ds-blue-card, #f1f6fb); --input-bg: var(--ds-blue-field, #f9fbfd); }
html[data-bg="green"] { --bg-color: var(--ds-green-page, #eaf4eb); --container-bg: var(--ds-green-card, #f0f8f1); --input-bg: var(--ds-green-field, #f9fcf9); }
html[data-bg="yellow"] { --bg-color: var(--ds-yellow-page, #f8f3d2); --container-bg: var(--ds-yellow-card, #fcf9e6); --input-bg: var(--ds-yellow-field, #fffdf3); }
html[data-bg="peach"] { --bg-color: var(--ds-peach-page, #ffede6); --container-bg: var(--ds-peach-card, #fff6f2); --input-bg: var(--ds-peach-field, #fff8f5); }
html[data-bg="cream"] body.dark-mode { --bg-color: var(--ds-cream-page-dark, #2b2517); --container-bg: var(--ds-cream-card-dark, #362f1f); --input-bg: var(--ds-cream-field-dark, #3a3223); }
html[data-bg="blue"] body.dark-mode { --bg-color: var(--ds-blue-page-dark, #16222f); --container-bg: var(--ds-blue-card-dark, #1f2d3c); --input-bg: var(--ds-blue-field-dark, #273544); }
html[data-bg="green"] body.dark-mode { --bg-color: var(--ds-green-page-dark, #17261b); --container-bg: var(--ds-green-card-dark, #213225); --input-bg: var(--ds-green-field-dark, #27372a); }
html[data-bg="yellow"] body.dark-mode { --bg-color: var(--ds-yellow-page-dark, #29260f); --container-bg: var(--ds-yellow-card-dark, #343118); --input-bg: var(--ds-yellow-field-dark, #37341d); }
html[data-bg="peach"] body.dark-mode { --bg-color: var(--ds-peach-page-dark, #2e1f1b); --container-bg: var(--ds-peach-card-dark, #3a2823); --input-bg: var(--ds-peach-field-dark, #422f2a); }