/* ==========================================================================
   PrintiBeaver -- Design System tokens (Mission 72, workstream ds)
   Source of truth: PB-MASTER-UI-R3200 = V3/V3.1 geometry + R3101 semantic
   Light / Dark (docs/MISSION72/V12_SPEC/UI: DESIGN_SYSTEM_HE.md,
   BASE_DESIGN_TOKENS_V3.json, GEOMETRY_REFERENCE_V3_1.json, THEME_TOKENS.json,
   pb-theme-r3200.css). THE ONLY FILE THAT MAY CARRY A LITERAL COLOUR
   (tests/PrintiBeaver.Tests/Mission72DesignSystemTests.cs scans the rest).
   Loaded by _Layout BEFORE site.css. Layers:
     1. raw V3 tokens (brand, light palette, typography, spacing, geometry, motion, shadow)
     2. R3101 semantic theme tokens: light (:root / html[data-theme=light]),
        system (prefers-color-scheme: dark, no explicit choice) and dark (html[data-theme=dark])
     3. the component-facing aliases (--pb-color-*) and the LEGACY names the 400 views and
        the r920 stylesheets read (--pb-brand, --accent, --surface-2, --radius-sm ...), so the
        whole product re-skins in both themes through the cascade.
   Theme resolution: the server writes data-theme="light|dark" on <html> from the user's
   explicit choice (user record for a signed-in account, else the pb_prefs cookie which holds
   no identity); "system" writes no attribute and the OS media query decides -- resolved
   before first paint, no flash. Design approved by the owner 2026-10-19; runtime verification
   is this workstream's evidence; production release stays blocked until that evidence.
   ========================================================================== */

/* ---- 1. Raw V3 tokens (light palette, never theme-switched) ---- */
:root {
    --pb-brand-orange: #FCA71E;
    --pb-brand-coral: #F66A46;
    --pb-brand-rose: #F33D63;
    --pb-brand-magenta: #EC008C;
    --pb-brand-gradient: linear-gradient(100deg, #FCA71E 0%, #F66A46 42%, #F33D63 70%, #EC008C 100%); /* decorative: logo / hero only, never under body text or an untested CTA */
    --pb-gradient-brand: var(--pb-brand-gradient);

    --pb-v3-action: #BD006E;
    --pb-v3-action-hover: #A50061;
    --pb-v3-action-pressed: #880050;
    --pb-v3-action-soft: #FFF0F7;
    --pb-v3-primary-text: #171A1F;
    --pb-v3-secondary-text: #667085;
    --pb-v3-tertiary-text: #475467;
    --pb-v3-inverse-text: #FFFFFF;
    --pb-v3-canvas: #FAFAFA;
    --pb-v3-white: #FFFFFF;
    --pb-v3-surface-muted: #F7F7F7;
    --pb-v3-surface-subtle: #F2F4F7;
    --pb-v3-border: #E5E7EB;
    --pb-v3-control-border: #667085;
    --pb-v3-dark-shell: #171A1F;
    --pb-v3-dark-hover: #23272F;
    --pb-v3-focus: #026AA2;
    --pb-v3-focus-dark: #62C9FF;
    --pb-v3-success: #067647;
    --pb-v3-success-bg: #ECFDF3;
    --pb-v3-warning: #93370D;
    --pb-v3-warning-bg: #FFFAEB;
    --pb-v3-danger: #B42318;
    --pb-v3-danger-bg: #FEF3F2;
    --pb-v3-info: #026AA2;
    --pb-v3-info-bg: #EFF8FF;
    --pb-v3-neutral-status: #475467;
    --pb-v3-neutral-status-bg: #F2F4F7;
    --pb-black: #000000;

    /* typography (V3): mobile value first, the desktop block below raises display / h1 / h2 */
    --pb-font-he: "Heebo", Arial, sans-serif;
    --pb-font-en: "Inter", Arial, sans-serif;
    --pb-font-family: var(--pb-font-he);
    --pb-font-mono: ui-monospace, Consolas, "Courier New", monospace;
    --pb-weight-regular: 400;
    --pb-weight-medium: 500;
    --pb-weight-semibold: 600;
    --pb-weight-bold: 700;
    --pb-text-display: 32px;  --pb-lh-display: 40px;  --pb-weight-display: 700;
    --pb-text-h1: 28px;       --pb-lh-h1: 36px;       --pb-weight-h1: 700;
    --pb-text-h2: 22px;       --pb-lh-h2: 30px;       --pb-weight-h2: 600;
    --pb-text-h3: 20px;       --pb-lh-h3: 28px;       --pb-weight-h3: 600;
    --pb-text-h4: 18px;       --pb-lh-h4: 26px;       --pb-weight-h4: 600;
    --pb-text-body-l: 18px;   --pb-lh-body-l: 28px;
    --pb-text-body: 16px;     --pb-lh-body: 24px;
    --pb-text-compact: 14px;  --pb-lh-compact: 22px;
    --pb-text-body-s: 14px;   --pb-lh-body-s: 22px;   /* = compact */
    --pb-text-label: 14px;    --pb-lh-label: 20px;    --pb-weight-label: 600;
    --pb-text-helper: 13px;   --pb-lh-helper: 19px;
    --pb-text-caption: 12px;  --pb-lh-caption: 18px;  /* non-essential metadata only */
    --pb-text-money: 24px;    --pb-lh-money: 32px;    --pb-weight-money: 700;
    --pb-text-button: 16px;   --pb-lh-button: 24px;   --pb-weight-button: 600;
    --pb-text-button-s: 14px;

    /* spacing scale 2 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 (name = value / 4) */
    --pb-space-half: 2px;
    --pb-space-1: 4px;
    --pb-space-2: 8px;
    --pb-space-3: 12px;
    --pb-space-4: 16px;
    --pb-space-5: 20px;
    --pb-space-6: 24px;
    --pb-space-8: 32px;
    --pb-space-10: 40px;
    --pb-space-12: 48px;
    --pb-space-16: 64px;
    --pb-space-20: 80px;   /* section gap, kept from the v2 document (V3 is silent above 64) */

    /* geometry (V3): small 6 / control 10 / card 14 / media 16 / dialog 18 / pill */
    --pb-radius-xs: 6px;
    --pb-radius-small: 6px;
    --pb-radius-control: 10px;
    --pb-radius-card: 16px;              /* V25-W1-02: card 16 (V25 design system); effective value re-stated below */
    --pb-radius-media: 16px;
    --pb-radius-dialog: 18px;
    --pb-radius-modal: 18px;
    --pb-radius-pill: 9999px;
    --pb-container-max: 1440px;          /* ops / admin */
    --pb-container-public: 1280px;       /* public content */
    --pb-content-reading: 720px;
    --pb-sidebar-expanded: 248px;
    --pb-sidebar-collapsed: 72px;
    --pb-gutter: 16px;                   /* mobile 16 / tablet 24 / desktop 32 */
    --pb-grid-gap: 16px;
    --pb-section-gap: 48px;

    /* control heights (V3 + R3200-F012: Primary 48 minimum in both themes, Secondary 44) */
    --pb-h-button-sm: 40px;
    --pb-h-button-md: 48px;               /* V25: secondary/medium buttons 48 (was 44) */
    --pb-h-button-lg: 52px;
    --pb-h-button-primary: 48px;
    --pb-h-icon-button: 48px;
    --pb-h-input-sm: 40px;
    --pb-h-input: 48px;
    --pb-h-input-lg: 52px;
    --pb-h-textarea-min: 112px;
    --pb-h-search: 56px;                 /* 64 on desktop (v2 document; V3 is silent on the search bar) */
    --pb-h-chip: 24px;                   /* status chip; a filter chip keeps a 44px hit area */
    --pb-h-filter-chip: 48px;            /* V25-W1-03: touch target 48 */
    --pb-h-switch: 24px; --pb-w-switch: 44px;
    --pb-h-header: 64px;                 /* public header 64 mobile / 72 desktop (V18) */
    --pb-h-topbar: 56px;                 /* ops top bar 56 mobile / 64 desktop */
    --pb-h-bottomnav: 60px;
    --pb-touch-target: 48px;             /* V25-W1-03 (V24): minimum touch target 48 (was 44) */

    /* motion (V3): hover 150 / state 200 / overlay 240; reduced motion = no directional motion */
    --pb-motion-fast: 150ms;
    --pb-motion-base: 200ms;
    --pb-motion-slow: 240ms;
    --pb-ease: cubic-bezier(.2, .8, .2, 1);

    /* elevation (V3) */
    --pb-shadow-none: none;
    --pb-shadow-card: 0 1px 2px rgba(23, 26, 31, .06);
    --pb-shadow-dropdown: 0 8px 24px rgba(23, 26, 31, .12);
    --pb-shadow-modal: 0 24px 64px rgba(23, 26, 31, .20);
    --pb-shadow-overlay: var(--pb-shadow-dropdown);

    /* z-index */
    --pb-z-header: 40;
    --pb-z-menu: 45;
    --pb-z-bottomnav: 50;
    --pb-z-skip: 100;
    --pb-z-overlay: 200;
    --pb-z-toast: 300;
    --pb-z-tooltip: 400;
}

/* ---- 2. R3101 semantic theme tokens: LIGHT (default and the explicit choice) ---- */
:root, html[data-theme="light"], [data-pb-theme-scope="light"] {
    color-scheme: light;
    --pb-canvas: #FAFAFA;
    --pb-shell: #FFFFFF;
    --pb-surface: #FFFFFF;
    --pb-surface-raised: #F7F7F7;
    --pb-surface-hover: #F2F4F7;
    --pb-surface-inset: #FFFFFF;
    --pb-surface-selected: #FFF0F7;
    --pb-divider: #E5E7EB;
    --pb-control-border: #667085;
    --pb-text-primary: #171A1F;
    --pb-text-secondary: #667085;
    --pb-text-muted: #667085;
    --pb-text-disabled: #667085;
    --pb-text-inverse: #FFFFFF;
    --pb-action-primary: #BD006E;
    --pb-action-hover: #A50061;
    --pb-action-pressed: #880050;
    --pb-action-border: #BD006E;
    --pb-action-hover-border: #A50061;
    --pb-action-soft-bg: #FFF0F7;
    --pb-action-soft-text: #880050;
    --pb-action-text: #BD006E;          /* derived: the action colour used AS TEXT (links styled as CTA, active nav, step numbers) = actionPrimary in light */
    --pb-link: #BD006E;
    --pb-focus: #026AA2;
    --pb-selection-border: #BD006E;
    --pb-placeholder: #667085;
    --pb-disabled-surface: #F2F4F7;
    --pb-disabled-text: #667085;
    --pb-success-text: #067647;
    --pb-success-surface: #ECFDF3;
    --pb-warning-text: #93370D;
    --pb-warning-surface: #FFFAEB;
    --pb-danger-text: #B42318;
    --pb-danger-surface: #FEF3F2;
    --pb-info-text: #026AA2;
    --pb-info-surface: #EFF8FF;
    --pb-neutral-text: #475467;
    --pb-neutral-surface: #F2F4F7;
    --pb-chart-grid: #E5E7EB;
    --pb-skeleton: #E5E7EB;
    --pb-skeleton-highlight: #F2F4F7;
    --pb-header-edge: #E5E7EB;
    --pb-backdrop: rgba(0, 0, 0, .55);
    --pb-shadow-card-theme: var(--pb-shadow-card);
    --pb-chart-1: #026AA2;
    --pb-chart-2: #AD4700;
    --pb-chart-3: #7F56D9;
    --pb-chart-4: #067647;
    --pb-chart-5: #BD006E;
    --pb-chart-6: #946200;
    /* image policy (component_contracts.media): photos keep their colours; a transparent render sits on a neutral matte */
    --pb-media-matte: #F7F7F7;
}

/* SYSTEM: no explicit choice (no data-theme) and the OS prefers dark */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="black"]), html[data-theme="system"] {
        color-scheme: dark;
        --pb-canvas: #101418;
        --pb-shell: #171A1F;
        --pb-surface: #1B222A;
        --pb-surface-raised: #242B38;
        --pb-surface-hover: #303947;
        --pb-surface-inset: #151B25;
        --pb-surface-selected: #352333;
        --pb-divider: #475467;
        --pb-control-border: #98A2B3;
        --pb-text-primary: #F5F7FA;
        --pb-text-secondary: #B8C2D1;
        --pb-text-muted: #9AA8BE;
        --pb-text-disabled: #9AA8BE;
        --pb-text-inverse: #FFFFFF;
        --pb-action-primary: #BD006E;
        --pb-action-hover: #A50061;
        --pb-action-pressed: #880050;
        --pb-action-border: #BD006E;
        --pb-action-hover-border: #8E9CB3;
        --pb-action-soft-bg: #352333;
        --pb-action-soft-text: #FFB2D8;
    --pb-action-text: #FFB2D8;          /* dark: actionPrimary #BD006E is a FILL (3.45:1 as text on surface) -> text uses actionSoftText */
        --pb-link: #FF73BE;
        --pb-focus: #62C9FF;
        --pb-selection-border: #FF9DCC;
        --pb-placeholder: #9AA8BE;
        --pb-disabled-surface: #303947;
        --pb-disabled-text: #9AA8BE;
        --pb-success-text: #75E0A7;
        --pb-success-surface: #17392E;
        --pb-warning-text: #FFD166;
        --pb-warning-surface: #453619;
        --pb-danger-text: #FDA29B;
        --pb-danger-surface: #46272E;
        --pb-info-text: #62C9FF;
        --pb-info-surface: #19384E;
        --pb-neutral-text: #CBD5E1;
        --pb-neutral-surface: #303947;
        --pb-chart-grid: #556477;
        --pb-skeleton: #303947;
        --pb-skeleton-highlight: #3B4555;
        --pb-header-edge: #364152;
        --pb-backdrop: rgba(0, 0, 0, .68);
        --pb-shadow-card-theme: 0 12px 32px rgba(0, 0, 0, .20);
        --pb-chart-1: #62C9FF;
        --pb-chart-2: #FFB86B;
        --pb-chart-3: #DCA0FF;
        --pb-chart-4: #6CE9A6;
        --pb-chart-5: #F9A8D4;
        --pb-chart-6: #FFD166;
        --pb-media-matte: #242B38;
    }
}

/* DARK: the explicit choice (same values as the system block -- kept literal on purpose: a theme block must be complete) */
html[data-theme="dark"], [data-pb-theme-scope="dark"] {
    color-scheme: dark;
    --pb-canvas: #101418;
    --pb-shell: #171A1F;
    --pb-surface: #1B222A;
    --pb-surface-raised: #242B38;
    --pb-surface-hover: #303947;
    --pb-surface-inset: #151B25;
    --pb-surface-selected: #352333;
    --pb-divider: #475467;
    --pb-control-border: #98A2B3;
    --pb-text-primary: #F5F7FA;
    --pb-text-secondary: #B8C2D1;
    --pb-text-muted: #9AA8BE;
    --pb-text-disabled: #9AA8BE;
    --pb-text-inverse: #FFFFFF;
    --pb-action-primary: #BD006E;
    --pb-action-hover: #A50061;
    --pb-action-pressed: #880050;
    --pb-action-border: #BD006E;
    --pb-action-hover-border: #8E9CB3;
    --pb-action-soft-bg: #352333;
    --pb-action-soft-text: #FFB2D8;
    --pb-action-text: #FFB2D8;          /* dark: actionPrimary #BD006E is a FILL (3.45:1 as text on surface) -> text uses actionSoftText */
    --pb-link: #FF73BE;
    --pb-focus: #62C9FF;
    --pb-selection-border: #FF9DCC;
    --pb-placeholder: #9AA8BE;
    --pb-disabled-surface: #303947;
    --pb-disabled-text: #9AA8BE;
    --pb-success-text: #75E0A7;
    --pb-success-surface: #17392E;
    --pb-warning-text: #FFD166;
    --pb-warning-surface: #453619;
    --pb-danger-text: #FDA29B;
    --pb-danger-surface: #46272E;
    --pb-info-text: #62C9FF;
    --pb-info-surface: #19384E;
    --pb-neutral-text: #CBD5E1;
    --pb-neutral-surface: #303947;
    --pb-chart-grid: #556477;
    --pb-skeleton: #303947;
    --pb-skeleton-highlight: #3B4555;
    --pb-header-edge: #364152;
    --pb-backdrop: rgba(0, 0, 0, .68);
    --pb-shadow-card-theme: 0 12px 32px rgba(0, 0, 0, .20);
    --pb-chart-1: #62C9FF;
    --pb-chart-2: #FFB86B;
    --pb-chart-3: #DCA0FF;
    --pb-chart-4: #6CE9A6;
    --pb-chart-5: #F9A8D4;
    --pb-chart-6: #FFD166;
    --pb-media-matte: #242B38;
}

/* BLACK (V19 W2): true-black canvas. Same brand colours and the SAME illustration files as light/dark --
   never a filter/invert on the character. Text tokens keep >= 4.5:1 (V19ResponsiveThemeTests). */
html[data-theme="black"], [data-pb-theme-scope="black"] {
    color-scheme: dark;
    --pb-canvas: #000000;
    --pb-shell: #000000;
    --pb-surface: #0A0A0A;
    --pb-surface-raised: #141414;
    --pb-surface-hover: #1F1F1F;
    --pb-surface-inset: #050505;
    --pb-surface-selected: #2E1A28;
    --pb-divider: #2A2A2A;
    --pb-control-border: #8E9CB3;
    --pb-text-primary: #F8FAFC;
    --pb-text-secondary: #CBD5E1;
    --pb-text-muted: #9AA8BE;
    --pb-text-disabled: #9AA8BE;
    --pb-text-inverse: #FFFFFF;
    --pb-action-primary: #BD006E;
    --pb-action-hover: #A50061;
    --pb-action-pressed: #880050;
    --pb-action-border: #BD006E;
    --pb-action-hover-border: #8E9CB3;
    --pb-action-soft-bg: #2E1A28;
    --pb-action-soft-text: #FFB2D8;
    --pb-action-text: #FFB2D8;          /* dark: actionPrimary #BD006E is a FILL (3.45:1 as text on surface) -> text uses actionSoftText */
    --pb-link: #FF73BE;
    --pb-focus: #62C9FF;
    --pb-selection-border: #FF9DCC;
    --pb-placeholder: #9AA8BE;
    --pb-disabled-surface: #1F1F1F;
    --pb-disabled-text: #9AA8BE;
    --pb-success-text: #6CE9A6;
    --pb-success-surface: #0E2A20;
    --pb-warning-text: #FFD166;
    --pb-warning-surface: #2E2410;
    --pb-danger-text: #FDA29B;
    --pb-danger-surface: #33181D;
    --pb-info-text: #62C9FF;
    --pb-info-surface: #0F2738;
    --pb-neutral-text: #CBD5E1;
    --pb-neutral-surface: #1F1F1F;
    --pb-chart-grid: #556477;
    --pb-skeleton: #1F1F1F;
    --pb-skeleton-highlight: #2A2A2A;
    --pb-header-edge: #2A2A2A;
    --pb-backdrop: rgba(0, 0, 0, .68);
    --pb-shadow-card-theme: 0 12px 32px rgba(0, 0, 0, .20);
    --pb-chart-1: #62C9FF;
    --pb-chart-2: #FFB86B;
    --pb-chart-3: #DCA0FF;
    --pb-chart-4: #6CE9A6;
    --pb-chart-5: #F9A8D4;
    --pb-chart-6: #FFD166;
    --pb-media-matte: #141414;
}

/* ---- 3. Component-facing aliases (--pb-color-*) and the LEGACY names.
   Every value is a var() of a semantic token above, so it follows the theme. A [data-pb-theme-scope]
   element (the dev-only showcase renders components in BOTH themes side by side) re-declares them so
   they resolve against the scoped semantic values. ---- */
:root, [data-pb-theme-scope] {
    --pb-color-text: var(--pb-text-primary);
    --pb-color-text-muted: var(--pb-text-secondary);
    --pb-color-text-tertiary: var(--pb-text-muted);
    --pb-color-text-on-action: var(--pb-text-inverse);
    --pb-color-text-on-dark: var(--pb-v3-inverse-text);
    --pb-color-text-disabled: var(--pb-disabled-text);
    --pb-color-bg: var(--pb-canvas);
    --pb-color-shell: var(--pb-shell);
    --pb-color-surface: var(--pb-surface);
    --pb-color-surface-subtle: var(--pb-surface-raised);
    --pb-color-surface-hover: var(--pb-surface-hover);
    --pb-color-surface-selected: var(--pb-surface-selected);
    --pb-color-surface-disabled: var(--pb-disabled-surface);
    --pb-color-border: var(--pb-divider);
    --pb-color-border-strong: var(--pb-control-border);
    --pb-color-border-muted: var(--pb-control-border);
    --pb-color-border-selected: var(--pb-selection-border);
    --pb-color-action: var(--pb-action-primary);
    --pb-color-action-hover: var(--pb-action-hover);
    --pb-color-action-pressed: var(--pb-action-pressed);
    --pb-color-action-border: var(--pb-action-border);
    --pb-color-action-hover-border: var(--pb-action-hover-border);
    --pb-color-action-soft: var(--pb-action-soft-bg);
    --pb-color-action-soft-text: var(--pb-action-soft-text);
    --pb-color-action-text: var(--pb-action-text);
    --pb-color-link: var(--pb-link);
    --pb-color-link-hover: color-mix(in srgb, var(--pb-link) 72%, var(--pb-text-primary));
    --pb-color-link-underline: color-mix(in srgb, currentColor 45%, transparent);
    --pb-color-focus: var(--pb-focus);
    --pb-color-secondary: var(--pb-surface-raised);
    --pb-color-secondary-hover: var(--pb-surface-hover);
    --pb-color-backdrop: var(--pb-backdrop);
    --pb-color-skeleton: var(--pb-skeleton);
    --pb-color-skeleton-highlight: var(--pb-skeleton-highlight);
    --pb-color-placeholder: var(--pb-placeholder);
    --pb-status-error: var(--pb-danger-text);
    --pb-status-error-soft: var(--pb-danger-surface);
    --pb-status-success: var(--pb-success-text);
    --pb-status-success-soft: var(--pb-success-surface);
    --pb-status-warning: var(--pb-warning-text);
    --pb-status-warning-soft: var(--pb-warning-surface);
    --pb-status-info: var(--pb-info-text);
    --pb-status-info-soft: var(--pb-info-surface);
    --pb-status-neutral: var(--pb-neutral-text);
    --pb-status-neutral-soft: var(--pb-neutral-surface);

    /* legacy --pb-* names (site.css, the r920 stylesheets, ~400 views) */
    --pb-bg: var(--pb-canvas);
    --pb-surface-subtle: var(--pb-surface-raised);
    --pb-surface-alt: var(--pb-surface-raised);
    --pb-surface-2: var(--pb-surface-raised);
    --pb-text: var(--pb-text-primary);
    --pb-muted: var(--pb-text-secondary);
    --muted: var(--pb-text-secondary);
    --pb-border: var(--pb-divider);
    --pb-brand: var(--pb-action-primary);
    --pb-brand-hover: var(--pb-action-hover);
    --pb-brand-soft: var(--pb-action-soft-bg);
    --pb-primary: var(--pb-action-primary);
    --pb-orange: var(--pb-action-primary);
    --pb-accent-soft: var(--pb-action-soft-bg);
    --pb-danger: var(--pb-danger-text);
    --pb-error: var(--pb-danger-text);
    --pb-error-bg: var(--pb-danger-surface);
    --pb-success: var(--pb-success-text);
    --pb-success-bg: var(--pb-success-surface);
    --pb-green: var(--pb-success-text);
    --pb-warning: var(--pb-warning-text);
    --pb-warn: var(--pb-warning-text);
    --pb-charcoal: var(--pb-text-primary);
    --pb-skeleton-a: var(--pb-skeleton);
    --pb-skeleton-b: var(--pb-skeleton-highlight);
    --pb-state-info-bg: var(--pb-info-surface);
    --pb-state-info-border: var(--pb-info-text);
    --pb-state-info-text: var(--pb-text-primary);
    --pb-state-warning-bg: var(--pb-warning-surface);
    --pb-state-warning-border: var(--pb-warning-text);
    --pb-state-warning-text: var(--pb-warning-text);
    --pb-state-success-bg: var(--pb-success-surface);
    --pb-state-success-border: var(--pb-success-text);
    --pb-state-success-text: var(--pb-success-text);

    /* legacy short names */
    --bg: var(--pb-canvas);
    --surface: var(--pb-surface);
    --surface-2: var(--pb-surface-raised);
    --surface-raised: var(--pb-surface-raised);
    --card-bg: var(--pb-surface);
    --text-primary: var(--pb-text-primary);
    --text-secondary: var(--pb-text-secondary);
    --text-tertiary: var(--pb-text-muted);
    --border-color: var(--pb-divider);
    --border: var(--pb-divider);
    --border-strong: var(--pb-control-border);
    --accent: var(--pb-action-primary);
    --accent-hover: var(--pb-action-hover);
    --accent-soft: var(--pb-action-soft-bg);
    --accent-color: var(--pb-action-primary);
    --focus-ring: var(--pb-focus);
    --danger: var(--pb-danger-text);
    --danger-color: var(--pb-danger-text);
    --danger-soft: var(--pb-danger-surface);
    --success: var(--pb-success-text);
    --success-soft: var(--pb-success-surface);
    --warning: var(--pb-warning-text);
    --warning-color: var(--pb-warning-text);
    --btn-contrast-text: var(--pb-text-inverse);

    --text-hero: var(--pb-text-display);
    --text-hero-mobile: var(--pb-text-display);
    --text-page-title: var(--pb-text-h1);
    --text-section-title: var(--pb-text-h2);
    --text-card-title: var(--pb-text-body);
    --text-body: var(--pb-text-body);
    --text-meta: var(--pb-text-compact);

    --space-1: var(--pb-space-1);   /* 4 */
    --space-2: var(--pb-space-2);   /* 8 */
    --space-3: var(--pb-space-3);   /* 12 */
    --space-4: var(--pb-space-4);   /* 16 */
    --space-5: var(--pb-space-6);   /* legacy "24" step */
    --space-6: var(--pb-space-8);   /* legacy "32" step */
    --space-7: var(--pb-space-12);  /* legacy "48" step */
    --space-8: var(--pb-space-16);  /* legacy "64" step */
    --grid: 8px;

    --radius-sm: var(--pb-radius-control);
    --radius-md: var(--pb-radius-card);
    --radius-lg: var(--pb-radius-card);
    --radius-menu: var(--pb-radius-card);
    --radius-image: var(--pb-radius-media);
    --radius-sheet: var(--pb-radius-dialog);
    --radius-pill: var(--pb-radius-pill);
    --radius-card: var(--pb-radius-card);
    --radius-control: var(--pb-radius-control);

    --shadow-sm: var(--pb-shadow-card);
    --shadow-md: var(--pb-shadow-dropdown);
    --shadow-lg: var(--pb-shadow-modal);
    --shadow-1: var(--pb-shadow-card);
    --shadow-2: var(--pb-shadow-dropdown);

    --control-h: var(--pb-h-input);
    --control-h-sm: var(--pb-h-button-sm);
    --control-height: var(--pb-h-button-sm);
    --container-max: var(--pb-container-public);
    --container-pad: 32px;
    --container-pad-tablet: 24px;
    --container-pad-mobile: 16px;

    --font-display: var(--pb-font-family);
    --font-body: var(--pb-font-family);

    --nav-h: var(--pb-h-header);
    --bottomnav-h: var(--pb-h-bottomnav);
}

/* English / LTR pages read Inter (loaded with display=swap in _Layout); Hebrew stays on Heebo. */
:root[dir="ltr"], :root[lang="en"], [lang="en"] { --pb-font-family: var(--pb-font-en); }
[lang="he"] { --pb-font-family: var(--pb-font-he); }

/* Breakpoints (V3): mobile < 768, tablet 768-1199, desktop >= 1200 */
@media (min-width: 768px) {
    :root {
        --pb-h-header: 72px;
        --pb-h-topbar: 64px;
        --pb-h-search: 64px;
        --pb-gutter: 24px;
        --pb-grid-gap: 24px;
        --pb-section-gap: 64px;
        --pb-text-display: 40px; --pb-lh-display: 48px;
        --pb-text-h1: 32px;      --pb-lh-h1: 40px;
        --pb-text-h2: 24px;      --pb-lh-h2: 32px;
    }
}
@media (min-width: 1200px) { :root { --pb-gutter: 32px; } }

/* Forced colours (Windows high contrast): controls keep a visible boundary, focus keeps the system highlight */
@media (forced-colors: active) {
    .pb-card, .pb-btn, .pb-input, .pb-select, .pb-textarea, .pb-modal, .pb-drawer, .pb-chip, .pb-search, .pb-search-bar { forced-color-adjust: auto; border: 1px solid ButtonText; }
    :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* a theme scope paints its own canvas (showcase side-by-side panels) */
[data-pb-theme-scope] { background: var(--pb-canvas); color: var(--pb-text-primary); }

/* V14 workstream D -- Brand R8 sizing tokens (R8 sections 16, 22-25, 1142). Colours stay the existing
   R8/V13 palette above (--pb-brand-* gradient, --pb-v3-action #BD006E / hover #A50061 / pressed #880050). */
:root {
    --pb-r8-mark-header: 32px;      /* header MARK desktop */
    --pb-r8-mark-header-sm: 28px;   /* header MARK mobile / collapsed sidebar */
    --pb-r8-mark-footer: 24px;      /* footer MARK 20-24px */
    --pb-r8-mark-gap: 8px;          /* MARK -> brand name */
    --pb-r8-target: 48px;           /* minimum touch target (V25: 48, was 44) */
    --pb-r8-illu-gap: 16px;         /* illustration -> content block (desktop) */
    --pb-r8-illu-gap-sm: 12px;      /* (mobile) */
}

/* V16-D -- V16 UI spec token names (PB_V16_UI_Screens_R1 §tokens) mapped onto the EXISTING R8 tokens above.
   No new values, no new theme: every alias resolves through the light / system / dark blocks. The profile "leaf"
   green maps to the existing semantic success token (SOURCE_AND_USAGE: no new palette). */
:root {
    --v16-action-primary: var(--pb-action-primary);
    --v16-action-hover: var(--pb-action-hover);
    --v16-action-pressed: var(--pb-action-pressed);
    --v16-action-soft: var(--pb-action-soft-bg);
    --v16-brand-orange: var(--pb-brand-orange);
    --v16-brand-coral: var(--pb-brand-coral);
    --v16-brand-rose: var(--pb-brand-rose);
    --v16-brand-magenta: var(--pb-brand-magenta);
    --v16-text-primary: var(--pb-text-primary);
    --v16-text-secondary: var(--pb-text-secondary);
    --v16-surface-canvas: var(--pb-canvas);
    --v16-surface-default: var(--pb-surface);
    --v16-border-decorative: var(--pb-divider);
    --v16-border-control: var(--pb-control-border);
    --v16-focus: var(--pb-focus);
    --v16-leaf: var(--pb-success-text);
}
.pb-v16-viewer { display: flex; flex-direction: column; gap: 8px; margin-block: 8px; max-width: 100%; }
.pb-v16-viewer canvas:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 2px; }

/* V16-D -- compact admin list rows (M81 density: 44-52px), applied to the admin list items that were large cards.
   Same element/ids/data-* (no contract change); logical properties keep RTL/LTR; colours are theme tokens (dark ok).
   Phones keep wrapping so nothing scrolls horizontally. */
.pb-card.pb-admin-row { min-height: 44px; padding: 6px 12px; margin: 0; border-radius: 0; box-shadow: none; border: 0; border-block-end: 1px solid var(--pb-divider); background: var(--pb-surface); gap: 8px 12px; align-items: center; }
.pb-card.pb-admin-row:first-of-type { border-block-start: 1px solid var(--pb-divider); }
.pb-card.pb-admin-row:hover { background: var(--pb-surface-hover); }
.pb-card.pb-admin-row:focus-visible { outline: 3px solid var(--pb-focus); outline-offset: -3px; }
.pb-card.pb-admin-row > * { margin-block: 0; }
.pb-card.pb-admin-row img { max-height: 40px; width: auto; }

/* ===== V18 FINAL SUNDAY (W3) — UI system deltas. Source: SPEC/UI_TOKENS_SUNDAY.json. No new theme, no new colours:
   every value below is a size/space/font token; colours stay the V3 palette above.
   Fonts are loaded LOCALLY (OFL files already in the repo, Content/fonts/generators) — no Google Fonts request.
   One @font-face per family+weight band, here only (the layout links this file once), so nothing loads twice. ===== */
@font-face { font-family: "Heebo"; src: url("fonts/generators/Heebo-400.ttf") format("truetype"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("fonts/generators/Heebo-700.ttf") format("truetype"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/generators/Inter-400.ttf") format("truetype"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/generators/Inter-700.ttf") format("truetype"); font-weight: 600 800; font-style: normal; font-display: swap; }

:root {
    /* type scale (mobile first): hero 32/40, h1 28/36, h2 22/30, h3 18/26, body 16/24, label 14/22, meta 12/18 */
    --pb-text-h3: 18px;       --pb-lh-h3: 26px;
    --pb-lh-label: 22px;
    --pb-text-meta: 12px;     --pb-lh-meta: 18px;
    /* spacing scale 8/12/16/24/32/48 */
    --pb-v18-space-1: 8px; --pb-v18-space-2: 12px; --pb-v18-space-3: 16px; --pb-v18-space-4: 24px; --pb-v18-space-5: 32px; --pb-v18-space-6: 48px;
    /* components */
    --pb-radius-control: 8px;
    --pb-radius-card: 16px;              /* V25-W1-02: card radius 16 / control 8 */
    --pb-h-button-primary: 52px;         /* primary on mobile >= 52; desktop 48 below */
    --pb-h-button-secondary: 48px;       /* V25-W1-03: secondary 48 */
    --pb-h-field: 48px;
    --pb-focus-width: 2px;
    --pb-focus-offset: 2px;
    --pb-h-header: 64px;                 /* V18: header 64 mobile / 72 desktop */
    --pb-form-max: 640px;
    --pb-two-col-gap: 32px;
    --pb-two-col-min: 960px;
}
@media (min-width: 768px) {
    :root {
        --pb-h-header: 72px;
        --pb-text-h3: 20px;  --pb-lh-h3: 28px;
        --pb-h-button-primary: 48px;
    }
}

/* V23 (PB_V23_TUESDAY/APP/engineering/v23-tokens.css) names, prefixed --v23-* so they never shadow the legacy
   --accent/--bg/--surface/--muted/--border/--success tokens: aliases ONLY, values live in the theme blocks above (single source). */
:root {
    --v23-primary: var(--pb-action-primary); --v23-hover: var(--pb-action-hover); --v23-pressed: var(--pb-action-pressed);
    --v23-page: var(--pb-canvas); --v23-surface: var(--pb-surface); --v23-text: var(--pb-text-primary); --v23-muted: var(--pb-text-secondary);
    --v23-border: var(--pb-divider); --v23-control: var(--pb-control-border); --v23-soft: var(--pb-action-soft-bg);
    --v23-link: var(--pb-link); --v23-focus: var(--pb-focus); --v23-success: var(--pb-success-text); --v23-error: var(--pb-danger-text); --v23-header-h: 80px;
}