:root {
    color-scheme: light;
    /* Typography */
    /* Inter for text, Outfit (the wordmark's face) for titles and big numbers: fonts/fonts.css. */
    --font-family-base: 'Inter Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-display: 'Outfit Variable', 'Inter Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /*
     * Type scale (docs/design-system.md): every font-size picks a step, never a literal.
     * 2xs is the floor for text a user has to read; nothing smaller.
     */
    --font-size-2xs: 0.6875rem;  /* 11px: micro labels, axis ticks, badge counters */
    --font-size-xs: 0.75rem;     /* 12px: captions, chips, meta */
    --font-size-sm: 0.8125rem;   /* 13px: secondary text in rows and cards */
    --font-size-md: 0.9375rem;   /* 15px: dense body, buttons, list rows */
    --font-size-base: 1rem;      /* 16px: body, inputs (below 16px iOS zooms on focus) */
    --font-size-lg: 1.125rem;    /* 18px: card and row titles */
    --font-size-xl: 1.375rem;    /* 22px: section and sheet titles */
    --font-size-2xl: 1.75rem;    /* 28px: page titles, headline numbers */
    --font-size-3xl: 2.25rem;    /* 36px: hero numbers (timer, report) */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;    /* the app's default for titles and numbers */
    --font-weight-black: 900;
    --line-height-none: 1;       /* icons, a single line boxed exactly to its text */
    --line-height-tight: 1.1;    /* numbers and one-line titles */
    --line-height-snug: 1.25;    /* titles that may wrap, chips */
    --line-height-base: 1.5;     /* running text */
    /* Icon sizes (AppIcon takes its size from font-size): beside small text, in rows and buttons, in the nav and headers. */
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    /*
     * Primary brand: the same lime ("volt") in both themes, next to the brand's black.
     * --color-primary fills (buttons, active chips, panels) with --color-on-primary, dark,
     * on top. Lime can't be read on white, so text, links, borders and chips use
     * --color-primary-emphasis, the brand's black; bars, rings and charts are drawn in
     * --color-primary-graphic, the lime, because a shape that large still reads.
     */
    --color-primary: #D4F53C;
    --color-primary-rgb: 212, 245, 60;
    --color-primary-hover: #C9EB2E;
    --color-primary-active: #BBDD22;
    /* The primary that reads on a light background: text, icons, links, borders. */
    --color-primary-emphasis: #111111;
    --color-primary-emphasis-rgb: 17, 17, 17;
    --color-primary-emphasis-hover: #3a3a3a;
    /* Bars, rings, chart lines and areas, heatmap: the lime, with --color-on-primary-graphic on top. */
    --color-primary-graphic: #D4F53C;
    --color-primary-graphic-rgb: 212, 245, 60;
    --color-on-primary-graphic: #1f2600;
    /* Primary subtle */
    --color-primary-subtle: #F3FBCF;
    --color-primary-subtle-rgb: 243, 251, 207;
    --color-primary-subtle-hover: #E7F6A6;
    /* Testo sul primary subtle (bottoni tonali, badge) */
    --color-on-primary-subtle: #1f2600;
    /*
     * The record of all time, and only that: gold beside the brand's lime. --color-record fills
     * shapes (the trophy's disc, a border, the toast) with --color-on-record on top; a gold that
     * light can't be read as text on white, so words take --color-record-text, a darker gold
     * (6.6:1), and a soft panel --color-record-subtle with --color-on-record-subtle.
     */
    --color-record: #E3C04A;
    --color-record-rgb: 227, 192, 74;
    --color-on-record: #2a2300;
    --color-record-text: #6F5C00;
    --color-record-subtle: #FAF4D6;
    --color-on-record-subtle: #5C4C00;
    /* Secondary */
    --color-secondary: #64748b;
    --color-secondary-rgb: 100, 116, 139;
    --color-secondary-hover: #475569;
    /* Backgrounds */
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-rgb: 255, 255, 255;
    --color-surface-muted: #f1f2f4;
    --color-surface-muted-rgb: 241, 242, 244;
    /* Text */
    --color-text: #1f2937;
    --color-text-rgb: 31, 41, 55;
    /* AA (4.5:1) on every surface, the grey one included (ColorContrastTests). */
    --color-text-muted: #5e6d82;
    --color-text-muted-rgb: 94, 109, 130;
    /* Borders and focus */
    --color-border: #e7ecf2;
    --color-border-rgb: 231, 236, 242;
    --color-focus: var(--color-primary-emphasis);
    /* The dim layer behind a bottom sheet or a dialog, the same in both themes. */
    --color-scrim: rgba(0, 0, 0, 0.45);
    /* Marks on an inverted surface (--color-text as the fill, the calendar's selected day): done and missed. */
    --color-inverse-positive: #a3e635;
    --color-inverse-negative: #fca5a5;
    /* Status colors */
    --color-success: #198754;
    --color-danger: #b32121;
    --color-danger-rgb: 179, 33, 33;
    /* A fill that asks for care without being destructive (archive); text on it is --color-on-caution. */
    --color-caution: #a16207;
    --color-warning-surface: #fff0e9;
    /* Text on --color-warning-surface: an exercise that stopped growing. */
    --color-warning: #9a4a12;
    /* The streak's flame (Home's chip): an icon, so a warm orange that reads at 3:1 on the muted surface. */
    --color-streak: #ea580c;
    /* Custom badge colors */
    --badge-red-background: #fee2e2;
    --badge-red-color: #991b1b;
    --badge-green-background: #dcfce7;
    --badge-green-color: #166534;
    --badge-blue-background: #dbeafe;
    --badge-blue-color: #1d4ed8;
    --badge-yellow-background: #fef3c7;
    --badge-yellow-color: #92400e;
    --badge-orange-background: #ffedd5;
    --badge-orange-color: #9a3412;
    --badge-purple-background: #ede9fe;
    --badge-purple-color: #6d28d9;
    --badge-gray-background: #e7ecf2;
    --badge-gray-color: #475569;
    /* Foreground colors */
    --color-on-primary: #1f2600;
    --color-on-primary-rgb: 31, 38, 0;
    --color-on-secondary: #ffffff;
    --color-on-danger: #ffffff;
    --color-on-success: #ffffff;
    --color-on-caution: #ffffff;
    /* Muscle colors */
    --muscle-default-bg: var(--color-surface-muted);
    --muscle-default-color: var(--color-text-muted);
    --muscle-chest-bg: #fee2e2;
    --muscle-chest-color: #991b1b;
    --muscle-back-bg: #dbeafe;
    --muscle-back-color: #1d4ed8;
    --muscle-shoulders-bg: #fef3c7;
    --muscle-shoulders-color: #92400e;
    --muscle-triceps-bg: #ede9fe;
    --muscle-triceps-color: #6d28d9;
    --muscle-biceps-bg: #dcfce7;
    --muscle-biceps-color: #166534;
    --muscle-quadriceps-bg: #ccfbf1;
    --muscle-quadriceps-color: #0f766e;
    --muscle-hamstrings-bg: #fce7f3;
    --muscle-hamstrings-color: #9d174d;
    --muscle-glutes-bg: #ffedd5;
    --muscle-glutes-color: #9a3412;
    --muscle-calves-bg: #e0e7ff;
    --muscle-calves-color: #3730a3;
    /* Terra: il lime è del brand, un badge muscolare non deve confondersi con i bottoni. */
    --muscle-legs-bg: #EFE4D8;
    --muscle-legs-color: #6B4423;
    --muscle-rear-delts-bg: #cffafe;
    --muscle-rear-delts-color: #0e7490;
    --muscle-abs-bg: #fae8ff;
    --muscle-abs-color: #86198f;
    --muscle-traps-bg: #e0f2fe;
    --muscle-traps-color: #075985;
    --muscle-lower-back-bg: #f5f5f4;
    --muscle-lower-back-color: #57534e;
    --muscle-forearms-bg: #fef9c3;
    --muscle-forearms-color: #854d0e;
    --muscle-adductors-bg: #d1fae5;
    --muscle-adductors-color: #065f46;
    --muscle-obliques-bg: #ffe4e6;
    --muscle-obliques-color: #9f1239;
    --muscle-abductors-bg: #f3e8ff;
    --muscle-abductors-color: #6b21a8;
    --muscle-rotator-cuff-bg: #ecfccb;
    --muscle-rotator-cuff-color: #3f6212;
    /* Muscles in the Progress charts (bars, donut): the badge hue in pastel. On white a 200 tint would
       vanish, so the light theme takes the 300 one; the dark theme reuses the badge text, already pastel. */
    --muscle-default-graphic: #cbd5e1;
    --muscle-chest-graphic: #fca5a5;
    --muscle-back-graphic: #93c5fd;
    --muscle-shoulders-graphic: #fcd34d;
    --muscle-triceps-graphic: #c4b5fd;
    --muscle-biceps-graphic: #86efac;
    --muscle-quadriceps-graphic: #5eead4;
    --muscle-hamstrings-graphic: #f9a8d4;
    --muscle-glutes-graphic: #fdba74;
    --muscle-calves-graphic: #a5b4fc;
    --muscle-legs-graphic: #d9bb9b;
    --muscle-rear-delts-graphic: #67e8f9;
    --muscle-abs-graphic: #f0abfc;
    --muscle-traps-graphic: #7dd3fc;
    --muscle-lower-back-graphic: #d6d3d1;
    --muscle-forearms-graphic: #fde047;
    --muscle-adductors-graphic: #6ee7b7;
    --muscle-obliques-graphic: #fda4af;
    --muscle-abductors-graphic: #d8b4fe;
    --muscle-rotator-cuff-graphic: #bef264;
    /* Radius */
    /* Radius scale (docs/design-system.md): the roundness of a corner, from a small mark to a sheet. */
    --radius-sm: 0.25rem;        /* 4px: small marks, progress bars */
    --radius-md: 0.5rem;         /* 8px: inputs, inner tiles */
    --radius-lg: 0.75rem;        /* 12px: rows, small cards, chips that aren't pills */
    --radius-xl: 1rem;           /* 16px: cards */
    --radius-2xl: 1.25rem;       /* 20px: large cards and tiles */
    --radius-3xl: 1.5rem;        /* 24px: the top corners of a bottom sheet, dialogs */
    --radius-pill: 50rem;
    /* Shadows */
    --shadow-sm: 0 0.35rem 0.9rem rgba(31, 41, 55, 0.08);
    --shadow-md: 0 0.8rem 1.8rem rgba(31, 41, 55, 0.14);
    --shadow-lg: 0 1.1rem 2.2rem rgba(31, 41, 55, 0.18);
    /* A bottom sheet's shadow, cast upwards over the page. */
    --shadow-sheet: 0 -0.625rem 1.875rem rgba(31, 41, 55, 0.18);
    /* Under a filled primary surface (the nav indicator, the live-workout banner): it glows in its own colour. */
    --shadow-primary: 0 0.5rem 1.2rem rgba(var(--color-primary-rgb), 0.3);
    /* Focus: a ring around a control (buttons, checks); a soft halo around a field, whose border turns --color-primary-emphasis. */
    /* The outer ring opaque, in the focus colour: at least 3:1 against what is around it (ColorContrastTests). */
    --focus-ring: 0 0 0 0.1rem var(--color-surface), 0 0 0 0.25rem var(--color-focus);
    --focus-ring-field: 0 0 0 0.2rem rgba(var(--color-primary-emphasis-rgb), 0.16);
    /* Spacing: a 4px grid (docs/design-system.md), --space-N is N × 4px; margins, paddings and gaps pick a step. */
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    /* Z-index */
    --z-index-sticky: 10;
    --z-index-fixed: 20;
    --z-index-bottom-nav: 20;
    --z-index-overlay: 1000;
    --z-index-dialog: 1060;
    --z-index-toast: 1200;
    --z-index-confirmation: 1300;
    /* Stacking inside one component (a layer above or below its siblings), never across the page. */
    --z-index-below: -1;
    --z-index-raised: 1;
    --z-index-raised-2: 2;
    --z-index-raised-3: 3;
    /* Layout */
    --bottom-nav-content-offset: 6.5rem;
    /* The widest a column of content gets on a large screen (web, tablet); wider is margin. */
    --layout-content-max-width: 45rem;
    /* Touch targets, whatever the visible size of the control: 48px (Material, Android) for a new
       control, never below 44px (Apple, WCAG 2.5.5). */
    --touch-target: 3rem;
    --touch-target-min: 2.75rem;
    /*
     * The chrome at the screen's edge (docs/design-system.md › Phone and web). On a phone the nav sits
     * at the bottom: what floats above it (mini player, period pill) starts --bottom-chrome-offset up.
     * From 992px the nav is a rail on the left, --nav-rail-width wide, and what floats is centred in
     * the space right of it (--chrome-inset-left).
     */
    --bottom-chrome-offset: calc(var(--space-4) + 4.55rem + var(--space-2));
    --chrome-inset-left: 0rem;
    --nav-rail-width: 6.5rem;
    --nav-rail-item-height: 4rem;
    /*
     * Motion (docs/design-system.md › Motion, motion.css). Curves after Material 3: emphasized for
     * what moves on screen, decelerate for what arrives, accelerate for what leaves, spring for a pop.
     */
    --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --motion-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --motion-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Durations: the bigger the change, the longer; what leaves is quicker than what arrives. */
    --motion-duration-xs: 100ms;   /* a press answering the finger */
    --motion-duration-sm: 150ms;   /* colour, opacity, a small change of state */
    --motion-duration-md: 200ms;   /* something leaving or swapping: a sheet going down, a toast, a tab */
    --motion-duration-lg: 300ms;   /* something arriving: a page, a bar filling, a thumb sliding */
    --motion-duration-xl: 400ms;   /* a pop with a bounce, a list entering */
    --motion-duration-2xl: 500ms;  /* emphasis: a banner, a chart fading in */
    --motion-duration-3xl: 700ms;  /* drawing: a chart growing, a ring */
    /* A bar that follows the timers, which tick every 250 ms (WorkoutSessionStore): linear, one tick long. */
    --motion-duration-tick: 250ms;
    /* The gap between the items of a list entering one after the other (.stagger-in). */
    --motion-stagger: 40ms;
    /* State changes (colour, background, border) of a control. */
    --transition-fast: var(--motion-duration-sm) ease;
    /*
     * Celebrations (ConfettiBurst, FireworksBurst, ShockwaveBurst): five party colours, the same
     * in both themes, and the glow behind the shockwave. Whatever is lime itself (the report)
     * sets a white glow, or it would vanish.
     */
    --celebration-1: #fbbf24;
    --celebration-2: #f472b6;
    --celebration-3: #34d399;
    --celebration-4: #60a5fa;
    --celebration-5: #a78bfa;
    --celebration-glow: rgba(var(--color-primary-graphic-rgb), .85);
    /*
     * The session report (SessionReport): the brand's black in both themes, with the lime and the dark
     * theme's gold on it, so its words read the same whatever the theme.
     */
    --report-surface: #111111;
    --report-glow: #2c3410;
    --report-border: rgba(255, 255, 255, 0.06);
    --report-on-surface: #ffffff;
    --report-on-surface-soft: rgba(255, 255, 255, 0.74);
    --report-on-surface-muted: rgba(255, 255, 255, 0.62);
    --report-accent: #D4F53C;
    --report-on-accent: #111111;
    --report-accent-halo: rgba(212, 245, 60, 0.18);
    --report-record: #F5C451;
    --report-on-record: #1a1300;
    --report-record-halo: rgba(245, 196, 81, 0.18);
    /*
     * Achievements (AchievementDisc, AchievementSheet): a medal on the brand's black, the same in both
     * themes; bronze, silver and gold are the ring and the icon, volt is the lime medal with a black ring.
     */
    --achievement-plate: #111111;
    --achievement-groove: rgba(255, 255, 255, 0.14);
    --achievement-groove-volt: rgba(31, 38, 0, 0.25);
    --achievement-edge-dark: rgba(255, 255, 255, 0.1);
    --achievement-shine: rgba(255, 255, 255, 0.6);
    --achievement-fire: #ff6a1f;
    --achievement-fire-core: #ffd23f;
    --achievement-bronze-ring: #c2773b;
    --achievement-bronze-icon: #d9915a;
    --achievement-silver-ring: #a9b0b9;
    --achievement-silver-icon: #c4cad1;
    --achievement-gold-ring: #e2b33c;
    --achievement-gold-icon: #ecc35a;
    /*
     * Toasts (AppToast): always a dark surface, in both themes, so they read as something laid on
     * top of the page rather than part of it; on it the lime reads as text too (the action), and
     * each kind has its own tone for the icon and the time bar, with a dark ink on top.
     */
    --toast-surface: #141518;
    --toast-border: rgba(255, 255, 255, 0);
    --toast-on-surface: #f5f6f7;
    --toast-on-surface-muted: rgba(245, 246, 247, .62);
    --toast-hover: rgba(255, 255, 255, .08);
    --toast-accent: #F2FF66;
    --toast-shadow: 0 .9rem 2.25rem rgba(17, 17, 17, .28), 0 .2rem .6rem rgba(17, 17, 17, .16);
    --toast-success: #F2FF66;
    --toast-on-success: #1f2600;
    --toast-info: #e7ecf2;
    --toast-on-info: #141518;
    --toast-warning: #fbbf24;
    --toast-on-warning: #2b1a00;
    --toast-error: #ff7a7a;
    --toast-on-error: #2a0707;
    /*
     * The share editor (ShareCardSheet): full screen over a dark backdrop in both themes, like a story editor;
     * its controls and drawers are translucent dark over the image, with light words on them.
     */
    --share-editor-backdrop: #0b0c0f;
    --share-editor-on-surface: #f5f6f7;
    --share-editor-on-surface-muted: rgba(245, 246, 247, .72);
    --share-editor-surface: rgba(17, 17, 17, .82);
    --share-editor-control: rgba(17, 17, 17, .55);
    --share-editor-border: rgba(255, 255, 255, .18);
    --share-editor-label-shadow: 0 1px 2px var(--share-editor-backdrop), 0 0 4px var(--share-editor-backdrop);
    /* Bootstrap overrides */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: var(--color-text-rgb);
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-color-rgb: var(--color-text-muted-rgb);
    --bs-tertiary-bg: var(--color-surface-muted);
    --bs-tertiary-bg-rgb: var(--color-surface-muted-rgb);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-xl);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-font-sans-serif: var(--font-family-base);
    /*
     * I link usano lo stesso primary leggibile anche quando Bootstrap
     * applica le proprie utility.
     */
    --bs-link-color: var(--color-primary-emphasis);
    --bs-link-color-rgb: var(--color-primary-emphasis-rgb);
    --bs-link-hover-color: var(--color-primary-emphasis-hover);
}

/* Dark theme */
[data-theme="dark"] {
    color-scheme: dark;
    /* Primary brand */
    --color-primary: #F2FF66;
    --color-primary-rgb: 242, 255, 102;
    --color-primary-hover: #F6FF8C;
    --color-primary-active: #DDEA3F;
    /*
     * Nel tema scuro il primary chiaro è leggibile,
     * quindi non serve una variante scura per il testo.
     */
    --color-primary-emphasis: #F2FF66;
    --color-primary-emphasis-rgb: 242, 255, 102;
    --color-primary-emphasis-hover: #F6FF8C;
    --color-primary-graphic: #F2FF66;
    --color-primary-graphic-rgb: 242, 255, 102;
    --color-on-primary-graphic: #1f2600;
    --color-primary-subtle: #303414;
    --color-primary-subtle-rgb: 48, 52, 20;
    --color-primary-subtle-hover: #3D4319;
    --color-on-primary-subtle: #F2FF66;
    /* The record: on the dark the gold reads as text too. */
    --color-record: #F5C451;
    --color-record-rgb: 245, 196, 81;
    --color-on-record: #1a1300;
    --color-record-text: #F5C451;
    --color-record-subtle: #302B1C;
    --color-on-record-subtle: #F5C451;
    /* Secondary */
    --color-secondary: #7dd3a7;
    --color-secondary-rgb: 125, 211, 167;
    --color-secondary-hover: #a7e5c4;
    /* Backgrounds */
    --color-background: #080a0f;
    --color-surface: #11151d;
    --color-surface-rgb: 17, 21, 29;
    --color-surface-muted: #1b2029;
    --color-surface-muted-rgb: 27, 32, 41;
    /* Text */
    --color-text: #f4f7fb;
    --color-text-rgb: 244, 247, 251;
    --color-text-muted: #a8b1bf;
    --color-text-muted-rgb: 168, 177, 191;
    /* Borders and focus */
    --color-border: #2a313d;
    --color-border-rgb: 42, 49, 61;
    --color-focus: #F2FF66;
    /* Status colors */
    --color-success: #4ade80;
    --color-danger: #f87171;
    --color-danger-rgb: 248, 113, 113;
    --color-caution: #fbbf24;
    --color-inverse-positive: #3f6212;
    --color-inverse-negative: #b32121;
    --color-warning-surface: #2a211d;
    --color-warning: #f5b273;
    --color-streak: #f5b273;
    /* Custom badge colors */
    --badge-red-background: #5f1d2a;
    --badge-red-color: #fecdd3;
    --badge-green-background: #16452d;
    --badge-green-color: #bbf7d0;
    --badge-blue-background: #16345f;
    --badge-blue-color: #bfdbfe;
    --badge-yellow-background: #4d3512;
    --badge-yellow-color: #fde68a;
    --badge-orange-background: #5a2a12;
    --badge-orange-color: #fed7aa;
    --badge-purple-background: #3d276f;
    --badge-purple-color: #ddd6fe;
    --badge-gray-background: #2a313d;
    --badge-gray-color: #d1d5db;
    /* Foreground colors */
    --color-on-primary: #1f2600;
    --color-on-primary-rgb: 31, 38, 0;
    --color-on-secondary: #06110b;
    --color-on-danger: #1f2600;
    --color-on-success: #06110b;
    --color-on-caution: #2b1a00;
    /* Muscle colors */
    --muscle-default-bg: var(--color-surface-muted);
    --muscle-default-color: var(--color-text-muted);
    --muscle-chest-bg: #5f1d2a;
    --muscle-chest-color: #fecdd3;
    --muscle-back-bg: #16345f;
    --muscle-back-color: #bfdbfe;
    --muscle-shoulders-bg: #4d3512;
    --muscle-shoulders-color: #fde68a;
    --muscle-triceps-bg: #3d276f;
    --muscle-triceps-color: #ddd6fe;
    --muscle-biceps-bg: #16452d;
    --muscle-biceps-color: #bbf7d0;
    --muscle-quadriceps-bg: #134e4a;
    --muscle-quadriceps-color: #99f6e4;
    --muscle-hamstrings-bg: #5b1c45;
    --muscle-hamstrings-color: #fbcfe8;
    --muscle-glutes-bg: #5a2a12;
    --muscle-glutes-color: #fed7aa;
    --muscle-calves-bg: #2f2a66;
    --muscle-calves-color: #c7d2fe;
    --muscle-legs-bg: #3B2A1C;
    --muscle-legs-color: #E8CDB0;
    --muscle-rear-delts-bg: #164e63;
    --muscle-rear-delts-color: #a5f3fc;
    --muscle-abs-bg: #4a1650;
    --muscle-abs-color: #f5d0fe;
    --muscle-traps-bg: #0c3a5a;
    --muscle-traps-color: #bae6fd;
    --muscle-lower-back-bg: #3a3632;
    --muscle-lower-back-color: #e7e5e4;
    --muscle-forearms-bg: #4a3d0c;
    --muscle-forearms-color: #fef08a;
    --muscle-adductors-bg: #0b4535;
    --muscle-adductors-color: #a7f3d0;
    --muscle-obliques-bg: #5a1426;
    --muscle-obliques-color: #fecdd3;
    --muscle-abductors-bg: #3b0764;
    --muscle-abductors-color: #e9d5ff;
    --muscle-rotator-cuff-bg: #1a2e05;
    --muscle-rotator-cuff-color: #d9f99d;
    /* Progress charts: the badge text is already pastel on the dark background. */
    --muscle-default-graphic: var(--muscle-default-color);
    --muscle-chest-graphic: var(--muscle-chest-color);
    --muscle-back-graphic: var(--muscle-back-color);
    --muscle-shoulders-graphic: var(--muscle-shoulders-color);
    --muscle-triceps-graphic: var(--muscle-triceps-color);
    --muscle-biceps-graphic: var(--muscle-biceps-color);
    --muscle-quadriceps-graphic: var(--muscle-quadriceps-color);
    --muscle-hamstrings-graphic: var(--muscle-hamstrings-color);
    --muscle-glutes-graphic: var(--muscle-glutes-color);
    --muscle-calves-graphic: var(--muscle-calves-color);
    --muscle-legs-graphic: var(--muscle-legs-color);
    --muscle-rear-delts-graphic: var(--muscle-rear-delts-color);
    --muscle-abs-graphic: var(--muscle-abs-color);
    --muscle-traps-graphic: var(--muscle-traps-color);
    --muscle-lower-back-graphic: var(--muscle-lower-back-color);
    --muscle-forearms-graphic: var(--muscle-forearms-color);
    --muscle-adductors-graphic: var(--muscle-adductors-color);
    --muscle-obliques-graphic: var(--muscle-obliques-color);
    --muscle-abductors-graphic: var(--muscle-abductors-color);
    --muscle-rotator-cuff-graphic: var(--muscle-rotator-cuff-color);
    /* Shadows */
    --shadow-sm: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.26);
    --shadow-md: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 1.1rem 2.2rem rgba(0, 0, 0, 0.46);
    --shadow-sheet: 0 -0.625rem 1.875rem rgba(0, 0, 0, 0.46);
    /* Toasts: a step above the cards, outlined, or the dark would sink into the background. */
    --toast-surface: #232833;
    --toast-border: rgba(255, 255, 255, .08);
    --toast-shadow: 0 .9rem 2.25rem rgba(0, 0, 0, .55), 0 .2rem .6rem rgba(0, 0, 0, .35);
    /* Bootstrap links */
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--color-primary-rgb);
    --bs-link-hover-color: var(--color-primary-hover);
}

/* Expanded layout: the nav is a rail on the left, nothing sits at the bottom but what floats. */
@media (min-width: 992px) {
    :root {
        --bottom-nav-content-offset: var(--space-8);
        --bottom-chrome-offset: var(--space-4);
        --chrome-inset-left: var(--nav-rail-width);
    }
}