/* 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;
  --btn-primary-bg: var(--accent-surface);
  --btn-primary-bg-hover: var(--accent-surface-hover);
  --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;

  /* 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) */
  --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-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Shape & sizing */
  --radius-sm: 4px;
  --radius-md: 6px;
  --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);
  --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;
    --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;
  --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;
  --surface-shadow: none;
  --tab-active-bg: var(--accent-fill);
  --tab-icon-idle: var(--color-text-muted);
  --logo-tile: transparent;
  --switch-knob: var(--color-text);
  --btn-primary-bg: var(--accent-surface);
  --btn-primary-bg-hover: var(--accent-surface-hover);
  --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;
}