:root {

    /* Brand colours (theme.json with fallbacks) */

    --brand-primary:
        var(--wp--preset--color--primary,#f58220);

    --brand-secondary:
        var(--wp--preset--color--secondary,#2c3a47);

    --brand-accent:
        var(--wp--preset--color--accent,var(--brand-primary));

    --background:
        var(--wp--preset--color--background,#ffffff);

    --foreground:
        var(--wp--preset--color--foreground,#1f2933);

    /* Typography */

    --font-body:
        var(--wp--preset--font-family--body,
        system-ui,sans-serif);

    --font-heading:
        var(--wp--preset--font-family--heading,
        var(--font-body));

    /* Layout: spacing scale (em, so it scales with each element's own font-size) */

    --space-3xs: 0.25em;
    --space-2xs: 0.375em;
    --space-xs: 0.5em;
    --space-sm: 0.75em;
    --space-md: 1em;
    --space-lg: 1.5em;
    --space-xl: 2em;
    --space-2xl: 2.5em;
    --space-3xl: 3.5em;

    /* Layout: radius scale */

    --radius-sm: 0.25em;
    --radius-md: 0.375em;
    --radius-lg: 0.625em;
    --radius-full: 99em;

    /* Layout: container widths (theme.json contentSize/wideSize, with fallbacks) */

    --container-content:
        var(--wp--style--global--content-size,50em);

    --container-wide:
        var(--wp--style--global--wide-size,75em);

    /* Layout: breakpoints (reference only — var() isn't valid inside
       @media conditions; keep any @media rules in sync with these) */

    --bp-sm: 30em;
    --bp-md: 48em;
    --bp-lg: 64em;
    --bp-xl: 80em;

    /* Layout: z-index scale */

    --z-base: 1;
    --z-dropdown: 9999;
    --z-toolbar: 99999;

    /* Semantic colours */

    --admin-bg: var(--background);
    --admin-surface: #ffffff;
    --admin-panel: var(--brand-secondary);

    --admin-text: var(--foreground);
    --admin-text-light: #6b7280;
    --admin-text-inverse: #ffffff;

    --admin-border: #dcdcde;

    --admin-link: var(--brand-primary);
    --admin-link-hover: color-mix(in srgb, var(--brand-primary) 85%, black);

    /* Navigation */

    --nav-bg: var(--brand-secondary);
    --nav-text: rgba(255,255,255,.82);
    --nav-text-hover: #ffffff;
    --nav-current-bg: var(--brand-primary);
    --nav-current-text: #ffffff;

    /* Admin Bar */

    --toolbar-bg: var(--brand-secondary);
    --toolbar-text: #ffffff;

    /* Buttons */

    --button-primary-bg: var(--brand-primary);
    --button-primary-text: #ffffff;
    --button-primary-hover:
        color-mix(in srgb, var(--brand-primary) 90%, black);

    /* Inputs */

    --input-bg: #ffffff;
    --input-border: #c3c4c7;
    --input-focus: var(--brand-primary);

    /* Cards */

    --card-bg: #ffffff;
    --card-border: #dcdcde;
    --card-shadow: 0 0.0625em 0.1875em rgba(0,0,0,.08);

    /* Notices */

    --success: #46b450;
    --warning: #dba617;
    --error: #d63638;
    --info: var(--brand-primary);

    /* Misc */

    --focus-ring: var(--brand-primary);

    --radius: var(--radius-md);

}