/* Phoenix design tokens — the ONLY place colours, type and spacing are defined.
   Locked palette: see PHOENIX_BRIEF.md. Contrast checked in test/brand.test.js. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-medium.woff2") format("woff2"); }

:root {
  /* Locked brand palette */
  --color-bg: #2B3032;          /* Graphite — main background */
  --color-surface: #373D3F;     /* Lighter graphite — cards */
  --color-ash: #8E8982;         /* Ash — borders/dividers; NOT for small text */
  --color-champagne: #D8C6A3;   /* Champagne — soft supporting accent (sparingly) */
  --color-gold: #B89A67;        /* Antique gold — wordmark only */
  --color-text: #F4EEE3;        /* Ivory — main text */
  --color-ember: #FF8052;       /* Ember orange — retired from the UI (accent is now champagne); kept in the locked palette */

  /* Derived roles (built only from the palette above) */
  --color-text-muted: rgba(244, 238, 227, 0.72);  /* ivory 72% — passes AA on bg and surface */
  --color-on-ember: var(--color-bg);              /* dark text on orange buttons */
  --color-border: rgba(142, 137, 130, 0.35);      /* ash, subtle */
  --color-border-strong: rgba(142, 137, 130, 0.7);
  --color-divider: rgba(142, 137, 130, 0.22);
  --color-input-bg: var(--color-bg);
  --color-overlay: rgba(43, 48, 50, 0.85);        /* graphite, for dialog backdrops */
  --color-focus: var(--color-champagne);

  /* THE ACCENT RULE. The accent is CHAMPAGNE (Matt, 19 Oct 2026; replaced ember orange). It is the single,
     minimal accent. Fills only ever use a gradient that is strongest at the bottom and fades out as it goes up.
     Outline icons, borders and small markers may use --accent-mark — never a large solid block or cell.
     app.css may only use these --accent-* tokens for the accent (enforced in test/brand.test.js).
     Text on it stays fully opaque ivory. Contrast checked in test/brand.test.js. */
  --btn-primary-tint-top: rgba(216, 198, 163, 0.03);     /* top: almost gone */
  --btn-primary-tint-bottom: rgba(216, 198, 163, 0.30);  /* bottom: strongest */
  --accent-fill: linear-gradient(to top, var(--btn-primary-tint-bottom), var(--btn-primary-tint-top));
  --accent-fill-hover: linear-gradient(to top, rgba(216, 198, 163, 0.38), rgba(216, 198, 163, 0.06));
  --accent-edge: linear-gradient(to top, rgba(216, 198, 163, 0.90), rgba(216, 198, 163, 0.15));
  /* Planned activity, selection and emphasis: outline icons, borders and small markers. */
  --accent-mark: rgba(216, 198, 163, 0.95);
  /* Bars and markers (e.g. the weekly progress bar): same direction, a little stronger. */
  --accent-bar: linear-gradient(to top, rgba(216, 198, 163, 0.95), rgba(216, 198, 163, 0.40));
  /* Opaque layer under the translucent fill, so the gradient edge only shows as a border. */
  --accent-base: var(--color-bg);
  /* Accent surface = fill + gradient edge. Use with "border: 1px solid transparent". */
  --accent-surface: var(--accent-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
  --accent-surface-hover: var(--accent-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
  /* Main button, dark mode (Pair 6, Matt 28 Oct: option A): a stronger champagne fade with a full edge, still soft. */
  --btn-primary-strong-top: rgba(216, 198, 163, 0.22);
  --btn-primary-strong-bottom: rgba(216, 198, 163, 0.55);
  --btn-primary-edge: rgba(216, 198, 163, 0.95);
  --btn-primary-bg: linear-gradient(to top, var(--btn-primary-strong-bottom), var(--btn-primary-strong-top)) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, linear-gradient(var(--btn-primary-edge), var(--btn-primary-edge)) border-box;
  --btn-primary-bg-hover: linear-gradient(to top, rgba(216, 198, 163, 0.65), rgba(216, 198, 163, 0.30)) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, linear-gradient(var(--btn-primary-edge), var(--btn-primary-edge)) border-box;
  --btn-primary-text: var(--color-text);

  /* Functional (always paired with a text label) */
  --color-error: #F2A9B0;
  --color-success: #A8D5B0;
  /* Success green as a fill (Matt, 23 Oct 2026: Start buttons, progress bars, the rest bar). Built only from
     --color-success, and follows the accent rule: strongest at the bottom, fading upwards. */
  --success-tint-top: rgba(168, 213, 176, 0.04);
  --success-tint-bottom: rgba(168, 213, 176, 0.30);
  --success-fill: linear-gradient(to top, var(--success-tint-bottom), var(--success-tint-top));
  --success-fill-hover: linear-gradient(to top, rgba(168, 213, 176, 0.38), rgba(168, 213, 176, 0.07));
  --success-edge: linear-gradient(to top, rgba(168, 213, 176, 0.90), rgba(168, 213, 176, 0.18));
  --success-surface: var(--success-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
  --success-surface-hover: var(--success-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
  --success-bar: linear-gradient(to top, rgba(168, 213, 176, 0.95), rgba(168, 213, 176, 0.55));
  /* The rest bar fills with this as the rest counts down (a solid-ish layer behind the text). */
  --success-progress: rgba(168, 213, 176, 0.26);
  --ob-glow: rgba(216, 198, 163, 0.16);   /* Pair 3: the warm glow at the top of sign-up and set-up (champagne) */
  --ob-mark: 0.05;
  /* The embossed Abode mark behind Abode-look screens (Matt, 29 Oct: F3) */
  --mark-fill: rgba(244, 238, 227, 0.035);
  --mark-edge: rgba(255, 255, 255, 0.22);
  --mark-shadow: rgba(0, 0, 0, 0.7);

  /* Typography — Barlow (standard, not Condensed), self-hosted.
     Regular 400: body, labels, inputs. Medium 500: headings, exercise names, buttons. */
  --font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-size-xs: 13px;         /* column headers */
  --font-size-sm: 14px;         /* secondary text, labels */
  --font-size-base: 15px;       /* interface text (Barlow sets smaller than the previous font) */
  --font-size-input: 17px;      /* phone inputs (16px+ prevents iOS zoom) */
  --font-size-title: 17px;      /* exercise names / card titles */
  --font-size-heading: 23px;    /* page headings (24px on desktop) */
  /* One type scale (audit item 37, Matt 28 Oct): every size in app.css uses one of these. */
  --font-size-2xs: 11px;        /* tags, tiny labels */
  --font-size-caption: 12px;    /* captions, chart notes */
  --font-size-md: 16px;         /* list titles, big buttons */
  --font-size-lg: 20px;         /* card titles */
  --font-size-xl: 22px;         /* feature numbers */
  --font-size-2xl: 24px;        /* section heroes */
  --font-size-3xl: 28px;        /* page titles */
  --font-size-display: 30px;    /* sign-up and tour titles */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 500;    /* headings, names, buttons — Barlow Medium */
  --line-height: 1.4;
  --letter-spacing-wordmark: 0.16em;

  /* Spacing */
  --space-half: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Shape & sizing */
  --radius-sm: 4px;
  --radius-md: 6px;
  /* Corners (audit item 37): pick by size of the thing. */
  --radius-xs: 3px;             /* bars, tiny marks */
  --radius-control: 10px;       /* small chips, tiles */
  --radius-field: 12px;         /* inputs, list cards */
  --radius-card: 14px;          /* cards, buttons on the front pages */
  --radius-lg: 16px;            /* switches, sheets */
  --radius-sheet: 18px;         /* big choice cards */
  --control-h: 44px;            /* phone touch targets */
  --topbar-h: 56px;
  --width-form: 720px;          /* builder, session, details */
  --width-wide: 1040px;         /* workouts overview on desktop */
  --logo-tile: transparent;     /* behind a trainer's logo (light mode can use a dark tile, F71) */
  /* Fixed pictures of each mode (Settings › Appearance, previews): the same in light and dark. */
  --swatch-dark-bg: #2B3032;
  --swatch-dark-card: #373D3F;
  --swatch-dark-text: #F4EEE3;
  --swatch-light-bg: #FFFFFF;
  --swatch-light-card: #F6F2EA;
  --swatch-light-text: #2B3032;
  --switch-knob: var(--color-text);
  --day-bg: transparent;
  --day-border: var(--color-border);
  /* Landing page (abodefitness.co.uk, 4 Nov). Shadows and the phone frame, plus the example trainer's looks
     (Phoenix Fitness) that the page shows. Those looks are trainer presets from lib/brand.js (THEMES, PALETTE,
     LIGHT_PALETTE) plus one trainer's own highlight (ember, readable at 6.2:1 with white text). Not Abode's branding. */
  --lp-shadow: rgba(0, 0, 0, 0.55);
  --lp-shadow-soft: rgba(20, 24, 26, 0.4);
  --lp-device: #1C2022;
  --lp-finger: rgba(244, 238, 227, 0.22);
  --lp-finger-edge: rgba(244, 238, 227, 0.7);
  --lp-on-accent-tint: rgba(255, 255, 255, 0.14);
  --lp-on-accent-edge: rgba(255, 255, 255, 0.25);
  --lp-white: #FFFFFF;
  --lp-ink: #2B3032;
  --lp-ink-muted: #626866;
  --lp-ivory: #F4EEE3;
  --lp-ivory-muted: rgba(244, 238, 227, 0.72);
  --lp-ivory-line: rgba(244, 238, 227, 0.14);
  --lp-sand-bg: #F3EEE6;
  --lp-sand-surface: #FFFDF9;
  --lp-sand-line: #E2DCD1;
  --lp-ember: #A8401C;
  --lp-midnight-bg: #161B24;
  --lp-midnight-surface: #232A36;
  --lp-coral: #E3A27A;
  --lp-forest-bg: #1B2621;
  --lp-forest-surface: #26342D;
  --lp-mint: #9FD3C7;
  --lp-limestone-bg: #F2F1ED;
  --lp-limestone-line: #DEDFD9;
  --lp-berry: #A33A4B;
  --effort-easy: #A8D5B0;
  --effort-mid: #D8C6A3;
  --effort-hard: #F2A9B0;
  --effort-easy-text: #A8D5B0;
  --effort-mid-text: #D8C6A3;
  --effort-hard-text: #F2A9B0;
  --surface-shadow: none;
  --tab-active-bg: var(--accent-fill);
  --tab-icon-idle: var(--color-text-muted);
  --effort-easy: #A8D5B0;
  --effort-mid: #D8C6A3;
  --effort-hard: #F2A9B0;
  --effort-easy-text: #A8D5B0;
  --effort-mid-text: #D8C6A3;
  --effort-hard-text: #F2A9B0;
  color-scheme: dark;
}

/* Appearance (F71): Automatic follows the phone; Settings › Appearance can force Light or Dark (data-theme on <html>).
   The [data-theme] blocks also work on any element, so previews can show either mode (F74). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* LIGHT MODE (F71; refined 24 Oct): soft limestone page, white cards, Graphite text, quiet borders, no beige panels
       or decorative gradients. Gold is kept for Phoenix smart features only. Contrast checked in brand.test.js. */
    --color-bg: #F2F1ED;
    --color-surface: #FFFFFF;
    --color-text: #2B3032;
    --color-champagne: #2B3032;
    --color-gold: #856633;
    --color-text-muted: #626866;
    --color-border: #DEDFD9;
    --color-border-strong: #C5C8C2;
    --color-divider: #DEDFD9;
    --color-overlay: rgba(43, 48, 50, 0.40);
    --btn-primary-tint-top: rgba(43, 48, 50, 0.02);
    --btn-primary-tint-bottom: rgba(43, 48, 50, 0.08);
    --accent-fill-hover: linear-gradient(to top, rgba(43, 48, 50, 0.12), rgba(43, 48, 50, 0.04));
    --accent-edge: linear-gradient(to top, rgba(43, 48, 50, 0.85), rgba(43, 48, 50, 0.40));
    --accent-mark: rgba(43, 48, 50, 0.90);
    --accent-bar: linear-gradient(to top, rgba(43, 48, 50, 0.90), rgba(43, 48, 50, 0.45));
    --color-error: #B3404F;
    --color-success: #2F7A4A;
    --success-tint-top: rgba(47, 122, 74, 0.03);
    --success-tint-bottom: rgba(47, 122, 74, 0.16);
    --success-fill-hover: linear-gradient(to top, rgba(47, 122, 74, 0.24), rgba(47, 122, 74, 0.06));
    --success-edge: linear-gradient(to top, rgba(47, 122, 74, 0.85), rgba(47, 122, 74, 0.25));
    --success-bar: linear-gradient(to top, rgba(47, 122, 74, 0.95), rgba(47, 122, 74, 0.60));
    --success-progress: rgba(47, 122, 74, 0.14);
    --ob-glow: rgba(184, 154, 103, 0.20);   /* Pair 3: the warm glow at the top of sign-up and set-up (antique gold) */
    --ob-mark: 0.06;
    --mark-fill: rgba(43, 48, 50, 0.04);
    --mark-edge: rgba(255, 255, 255, 0.95);
    --mark-shadow: rgba(43, 48, 50, 0.16);
    --surface-shadow: none;
    --tab-active-bg: transparent;
    --tab-icon-idle: #8A8F8C;
    --logo-tile: #2B3032;
    --switch-knob: #FFFFFF;
    /* Light: solid Graphite for the main action and the chosen day (crisp on white, no tinted gradients). */
    --btn-primary-bg: #2B3032;
    --btn-primary-bg-hover: #3A4043;
    --btn-primary-text: #FFFFFF;
    --day-bg: #FFFFFF;
    --day-border: transparent;
    /* Derived roles, re-declared so a block can theme any element (e.g. a preview), not only the page. */
    --color-input-bg: var(--color-bg);
    --accent-base: var(--color-bg);
    --color-focus: var(--color-champagne);
    --accent-fill: linear-gradient(to top, var(--btn-primary-tint-bottom), var(--btn-primary-tint-top));
    --accent-surface: var(--accent-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
    --accent-surface-hover: var(--accent-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
    --success-fill: linear-gradient(to top, var(--success-tint-bottom), var(--success-tint-top));
    --success-surface: var(--success-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
    --success-surface-hover: var(--success-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Effort bars (finish workout): bright enough to read as a scale on white; words in readable shades. */
  --effort-easy: #5FB57A;
  --effort-mid: #D9B26A;
  --effort-hard: #E0707C;
  --effort-easy-text: #2F7A4A;
  --effort-mid-text: #856633;
  --effort-hard-text: #B3404F;
  color-scheme: light;
  }
}
[data-theme="light"] {
  /* LIGHT MODE (F71; refined 24 Oct): soft limestone page, white cards, Graphite text, quiet borders, no beige panels
     or decorative gradients. Gold is kept for Phoenix smart features only. Contrast checked in brand.test.js. */
  --color-bg: #F2F1ED;
  --color-surface: #FFFFFF;
  --color-text: #2B3032;
  --color-champagne: #2B3032;
  --color-gold: #856633;
  --color-text-muted: #626866;
  --color-border: #DEDFD9;
  --color-border-strong: #C5C8C2;
  --color-divider: #DEDFD9;
  --color-overlay: rgba(43, 48, 50, 0.40);
  --btn-primary-tint-top: rgba(43, 48, 50, 0.02);
  --btn-primary-tint-bottom: rgba(43, 48, 50, 0.08);
  --accent-fill-hover: linear-gradient(to top, rgba(43, 48, 50, 0.12), rgba(43, 48, 50, 0.04));
  --accent-edge: linear-gradient(to top, rgba(43, 48, 50, 0.85), rgba(43, 48, 50, 0.40));
  --accent-mark: rgba(43, 48, 50, 0.90);
  --accent-bar: linear-gradient(to top, rgba(43, 48, 50, 0.90), rgba(43, 48, 50, 0.45));
  --color-error: #B3404F;
  --color-success: #2F7A4A;
  --success-tint-top: rgba(47, 122, 74, 0.03);
  --success-tint-bottom: rgba(47, 122, 74, 0.16);
  --success-fill-hover: linear-gradient(to top, rgba(47, 122, 74, 0.24), rgba(47, 122, 74, 0.06));
  --success-edge: linear-gradient(to top, rgba(47, 122, 74, 0.85), rgba(47, 122, 74, 0.25));
  --success-bar: linear-gradient(to top, rgba(47, 122, 74, 0.95), rgba(47, 122, 74, 0.60));
  --success-progress: rgba(47, 122, 74, 0.14);
  --ob-glow: rgba(184, 154, 103, 0.20);   /* Pair 3: the warm glow at the top of sign-up and set-up (antique gold) */
  --ob-mark: 0.06;
  --mark-fill: rgba(43, 48, 50, 0.04);
  --mark-edge: rgba(255, 255, 255, 0.95);
  --mark-shadow: rgba(43, 48, 50, 0.16);
  --surface-shadow: none;
  --tab-active-bg: transparent;
  --tab-icon-idle: #8A8F8C;
  --logo-tile: #2B3032;
  --switch-knob: #FFFFFF;
  /* Light: solid Graphite for the main action and the chosen day (crisp on white, no tinted gradients). */
  --btn-primary-bg: #2B3032;
  --btn-primary-bg-hover: #3A4043;
  --btn-primary-text: #FFFFFF;
  --day-bg: #FFFFFF;
  --day-border: transparent;
  /* Derived roles, re-declared so a block can theme any element (e.g. a preview), not only the page. */
  --color-input-bg: var(--color-bg);
  --accent-base: var(--color-bg);
  --color-focus: var(--color-champagne);
  --accent-fill: linear-gradient(to top, var(--btn-primary-tint-bottom), var(--btn-primary-tint-top));
  --accent-surface: var(--accent-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
  --accent-surface-hover: var(--accent-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
  --success-fill: linear-gradient(to top, var(--success-tint-bottom), var(--success-tint-top));
  --success-surface: var(--success-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
  --success-surface-hover: var(--success-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
  background-color: var(--color-bg);
  color: var(--color-text);
  /* Effort bars (finish workout): bright enough to read as a scale on white; words in readable shades. */
  --effort-easy: #5FB57A;
  --effort-mid: #D9B26A;
  --effort-hard: #E0707C;
  --effort-easy-text: #2F7A4A;
  --effort-mid-text: #856633;
  --effort-hard-text: #B3404F;
  color-scheme: light;
}
[data-theme="dark"] {
  /* DARK (today's look), so any element can be shown dark, e.g. the trainer's previews (F74). */
  --color-bg: #2B3032;
  --color-surface: #373D3F;
  --color-text: #F4EEE3;
  --color-champagne: #D8C6A3;
  --color-gold: #B89A67;
  --color-text-muted: rgba(244, 238, 227, 0.72);
  --color-border: rgba(142, 137, 130, 0.35);
  --color-border-strong: rgba(142, 137, 130, 0.7);
  --color-divider: rgba(142, 137, 130, 0.22);
  --color-overlay: rgba(43, 48, 50, 0.85);
  --btn-primary-tint-top: rgba(216, 198, 163, 0.03);
  --btn-primary-tint-bottom: rgba(216, 198, 163, 0.30);
  --accent-fill-hover: linear-gradient(to top, rgba(216, 198, 163, 0.38), rgba(216, 198, 163, 0.06));
  --accent-edge: linear-gradient(to top, rgba(216, 198, 163, 0.90), rgba(216, 198, 163, 0.15));
  --accent-mark: rgba(216, 198, 163, 0.95);
  --accent-bar: linear-gradient(to top, rgba(216, 198, 163, 0.95), rgba(216, 198, 163, 0.40));
  --color-error: #F2A9B0;
  --color-success: #A8D5B0;
  --success-tint-top: rgba(168, 213, 176, 0.04);
  --success-tint-bottom: rgba(168, 213, 176, 0.30);
  --success-fill-hover: linear-gradient(to top, rgba(168, 213, 176, 0.38), rgba(168, 213, 176, 0.07));
  --success-edge: linear-gradient(to top, rgba(168, 213, 176, 0.90), rgba(168, 213, 176, 0.18));
  --success-bar: linear-gradient(to top, rgba(168, 213, 176, 0.95), rgba(168, 213, 176, 0.55));
  --success-progress: rgba(168, 213, 176, 0.26);
  --ob-glow: rgba(216, 198, 163, 0.16);   /* Pair 3: the warm glow at the top of sign-up and set-up (champagne) */
  --ob-mark: 0.05;
  /* The embossed Abode mark behind Abode-look screens (Matt, 29 Oct: F3) */
  --mark-fill: rgba(244, 238, 227, 0.035);
  --mark-edge: rgba(255, 255, 255, 0.22);
  --mark-shadow: rgba(0, 0, 0, 0.7);
  --surface-shadow: none;
  --tab-active-bg: var(--accent-fill);
  --tab-icon-idle: var(--color-text-muted);
  --logo-tile: transparent;
  --switch-knob: var(--color-text);
  /* Main button, dark mode (Pair 6, Matt 28 Oct: option A): a stronger champagne fade with a full edge, still soft. */
  --btn-primary-strong-top: rgba(216, 198, 163, 0.22);
  --btn-primary-strong-bottom: rgba(216, 198, 163, 0.55);
  --btn-primary-edge: rgba(216, 198, 163, 0.95);
  --btn-primary-bg: linear-gradient(to top, var(--btn-primary-strong-bottom), var(--btn-primary-strong-top)) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, linear-gradient(var(--btn-primary-edge), var(--btn-primary-edge)) border-box;
  --btn-primary-bg-hover: linear-gradient(to top, rgba(216, 198, 163, 0.65), rgba(216, 198, 163, 0.30)) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, linear-gradient(var(--btn-primary-edge), var(--btn-primary-edge)) border-box;
  --btn-primary-text: var(--color-text);
  --day-bg: transparent;
  --day-border: var(--color-border);
  /* Derived roles, re-declared so a block can theme any element (e.g. a preview), not only the page. */
  --color-input-bg: var(--color-bg);
  --accent-base: var(--color-bg);
  --color-focus: var(--color-champagne);
  --accent-fill: linear-gradient(to top, var(--btn-primary-tint-bottom), var(--btn-primary-tint-top));
  --accent-surface: var(--accent-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
  --accent-surface-hover: var(--accent-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--accent-edge) border-box;
  --success-fill: linear-gradient(to top, var(--success-tint-bottom), var(--success-tint-top));
  --success-surface: var(--success-fill) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
  --success-surface-hover: var(--success-fill-hover) padding-box, linear-gradient(var(--accent-base), var(--accent-base)) padding-box, var(--success-edge) border-box;
  background-color: var(--color-bg);
  color: var(--color-text);
  --effort-easy: #A8D5B0;
  --effort-mid: #D8C6A3;
  --effort-hard: #F2A9B0;
  --effort-easy-text: #A8D5B0;
  --effort-mid-text: #D8C6A3;
  --effort-hard-text: #F2A9B0;
  color-scheme: dark;
}