:root,
html[data-theme="byt-light"] {
    color-scheme: light;
    --bg: var(--pui-color-surface-page);
    --surface: var(--pui-color-surface-card);
    --surface_alt: var(--pui-color-surface-muted);
    --text: var(--pui-color-text-primary);
    --text_muted: var(--pui-color-text-muted);
    --border: var(--pui-color-border-default);
    --accent: var(--pui-color-action-primary);
    --accent_text: var(--pui-color-text-on-accent);
    --shadow: var(--pui-shadow-soft);
    --focus: var(--pui-focus-outline-color);

    /* ── Layout ──────────────────────────────────────────────── */
    /* Single site width knob. Change this one value to resize every page shell. */
    --site-shell-max-width: 1440px;
    --page-max-width: var(--site-shell-max-width);
    --page-gutter-x: 1.25rem;
    --content-max-width: var(--site-shell-max-width);

    /* ── Spacing scale ───────────────────────────────────────── */
    --space-1: var(--pui-space-2);
    --space-2: var(--pui-space-3);
    --space-3: var(--pui-space-4);
    --space-4: var(--pui-space-5);
    --space-5: var(--pui-space-6);
    --space-6: var(--pui-space-7);
    --space-7: var(--pui-space-9);

    /* ── Links ───────────────────────────────────────────────── */
    --link-colour: var(--pui-color-link);
    --link-hover-colour: var(--pui-color-link-hover);
    --focus-ring-colour: var(--pui-focus-color);

    /* ── Buttons ─────────────────────────────────────────────── */
    --button-primary-bg: var(--accent);
    --button-primary-text: var(--accent_text);
    --button-secondary-text: var(--text);

    --success: var(--pui-color-success);
    --success_text: var(--pui-color-text-on-accent);
    --warning: var(--pui-color-warning);
    --warning_text: var(--pui-color-text-primary);
    --danger: var(--pui-color-danger);
    --danger_text: var(--pui-color-text-on-accent);
    --state_selected_bg: var(--pui-color-accent-soft);
    --state_selected_text: var(--pui-color-text-primary);
    --state_hover_bg: var(--pui-color-surface-muted);
    --state_disabled_opacity: var(--pui-disabled-opacity);
    --state_disabled_bg: var(--pui-color-surface-muted);
    --state_disabled_text: #94a3b8;
    --mud-palette-primary: var(--accent);
    --mud-palette-primary-hover: var(--pui-color-action-primary-hover);
    --mud-palette-background: var(--bg);
    --mud-palette-surface: var(--surface);
    --mud-palette-text-primary: var(--text);
    --mud-palette-text-secondary: var(--text_muted);
    --mud-palette-lines-inputs: var(--border);
    --mud-palette-divider: var(--border);
    --mud-palette-action-default: var(--text);
    --mud-palette-action-disabled: var(--state_disabled_text);
    --mud-palette-action-disabled-background: var(--state_disabled_bg);

    /* ── BeforeYouTrade approved design palette (light) ──────────
       Light counterparts for the `--byt-*` surface language below.
       These map onto the registered Platform tokens so the same
       markup stays readable when the shell is switched to
       `byt-light`. The dark block holds the approved values. */
    --byt-page-bg: var(--pui-color-surface-page);
    --byt-surface: var(--pui-color-surface-card);
    --byt-surface-inset: var(--pui-color-surface-muted);
    --byt-surface-footer: var(--pui-color-surface-muted);
    --byt-surface-hover: var(--pui-color-surface-hover);
    --byt-surface-tag: var(--pui-color-surface-strong);
    --byt-surface-segment: var(--pui-color-surface-muted);
    --byt-surface-segment-selected: var(--pui-color-surface-selected);

    --byt-border: var(--pui-color-border-default);
    --byt-border-hover: var(--pui-color-border-hover);
    --byt-border-selected: var(--pui-color-border-strong);
    --byt-border-control: var(--pui-color-border-default);
    --byt-hairline: var(--pui-color-border-subtle);
    --byt-hairline-soft: var(--pui-color-border-subtle);

    --byt-text: var(--pui-color-text-primary);
    --byt-text-secondary: var(--pui-color-text-secondary);
    --byt-text-muted: var(--pui-color-text-muted);
    --byt-text-label: var(--pui-color-text-muted);
    --byt-text-faint: var(--pui-color-text-disabled);
    --byt-text-tag: var(--pui-color-text-secondary);

    --byt-on-accent: var(--pui-color-text-on-accent);
    --byt-accent: var(--pui-color-action-primary);
    --byt-accent-hover: var(--pui-color-action-primary-hover);
    --byt-accent-active: var(--pui-color-action-primary-hover);
    --byt-accent-soft: var(--pui-color-accent-soft);
    --byt-accent-soft-strong: var(--pui-color-surface-selected);
    --byt-link: var(--pui-color-link);
    --byt-link-hover: var(--pui-color-link-hover);

    --byt-positive-fill: var(--pui-color-success-soft);
    --byt-positive-text: var(--pui-color-success);
    --byt-caution-fill: var(--pui-color-warning-soft);
    --byt-caution-text: var(--pui-color-warning);
    --byt-neutral-fill: var(--pui-color-surface-strong);
    --byt-neutral-text: var(--pui-color-text-muted);
}

html[data-theme="dark"],
html[data-theme="byt-dark"] {
    color-scheme: dark;
    --bg: var(--pui-color-surface-page);
    --surface: var(--pui-color-surface-card);
    --surface_alt: var(--pui-color-surface-muted);
    --text: var(--pui-color-text-primary);
    --text_muted: var(--pui-color-text-muted);
    --border: var(--pui-color-border-default);
    --accent: var(--pui-color-action-primary);
    --accent_text: var(--pui-color-text-on-accent);
    --shadow: var(--pui-shadow-soft);
    --focus: var(--pui-focus-outline-color);

    --success: var(--pui-color-success);
    --success_text: var(--pui-color-text-on-accent);
    --warning: var(--pui-color-warning);
    --warning_text: var(--pui-color-text-primary);
    --danger: var(--pui-color-danger);
    --danger_text: var(--pui-color-text-on-accent);
    --state_selected_bg: var(--pui-color-surface-selected);
    --state_selected_text: var(--pui-color-text-primary);
    --state_hover_bg: var(--pui-color-surface-hover);
    --state_disabled_opacity: var(--pui-disabled-opacity);
    --state_disabled_bg: var(--pui-color-surface-muted);
    --state_disabled_text: var(--pui-color-text-disabled);
    --mud-palette-primary: var(--accent);
    --mud-palette-primary-hover: var(--pui-color-action-primary-hover);
    --mud-palette-background: var(--bg);
    --mud-palette-surface: var(--surface);
    --mud-palette-text-primary: var(--text);
    --mud-palette-text-secondary: var(--text_muted);
    --mud-palette-lines-inputs: var(--border);
    --mud-palette-divider: var(--border);
    --mud-palette-action-default: var(--text);
    --mud-palette-action-disabled: var(--state_disabled_text);
    --mud-palette-action-disabled-background: var(--state_disabled_bg);

    /* ── BeforeYouTrade approved design palette (dark) ───────────
       Authoritative declaration of the approved BeforeYouTrade
       surface language. Every consuming stylesheet must reference
       these `--byt-*` tokens rather than repeating the raw values. */
    --byt-page-bg: #080f1c;
    --byt-surface: #0d1729;
    --byt-surface-inset: #0b1626;
    --byt-surface-footer: #0a1220;
    --byt-surface-hover: #101c30;
    --byt-surface-tag: #16243c;
    --byt-surface-segment: #0c1626;
    --byt-surface-segment-selected: #1c3563;

    --byt-border: #1e2c44;
    --byt-border-hover: #2b3d5c;
    --byt-border-selected: #2f5395;
    --byt-border-control: #22314a;
    --byt-hairline: #1a2740;
    --byt-hairline-soft: #16233a;

    --byt-text: #e8eef8;
    --byt-text-secondary: #a7b6cc;
    --byt-text-muted: #7c8ca6;
    --byt-text-label: #7c8ca6;
    --byt-text-faint: #5c6b82;
    --byt-text-tag: #b6c6dd;

    --byt-on-accent: #ffffff;
    --byt-accent: #3b76f0;
    --byt-accent-hover: #2f66db;
    --byt-accent-active: #2857bd;
    --byt-accent-soft: rgba(59, 118, 240, 0.12);
    --byt-accent-soft-strong: rgba(59, 118, 240, 0.18);
    --byt-link: #5b8ef7;
    --byt-link-hover: #93b6fb;

    --byt-positive-fill: rgba(16, 185, 129, 0.13);
    --byt-positive-text: #6ee7a0;
    --byt-caution-fill: rgba(234, 179, 8, 0.13);
    --byt-caution-text: #e8c15c;
    --byt-neutral-fill: rgba(148, 163, 184, 0.13);
    --byt-neutral-text: #a7b6cc;
}

/* ── BeforeYouTrade design scale (theme independent) ─────────────
   Radii, type ramp and page grid from the approved design. Values
   are declared once here and consumed through `var(--byt-*)`. */
:root {
    --byt-radius-control: 8px;
    --byt-radius-inset: 10px;
    --byt-radius-card: 12px;
    --byt-radius-dialog: 14px;
    --byt-radius-pill: 999px;

    --byt-font-body: 15px;
    --byt-line-body: 1.55;
    --byt-font-h1: 44px;
    --byt-font-h2: 26px;
    --byt-font-card-title: 21px;
    --byt-font-card-title-sm: 18px;
    --byt-font-label: 11px;
    --byt-letter-spacing-label: 0.07em;
    --byt-heading-tracking: -0.01em;

    --byt-page-max-width: 1400px;
    --byt-page-gutter: 40px;
    --byt-grid-gap: 20px;

    --byt-control-min-height: 40px;
    --byt-focus-ring: 2px solid var(--byt-link);
    --byt-focus-offset: 2px;
}