/**
 * PHASE Runtime Design Tokens
 *
 * Runtime authority:
 * wordpress/themes/phase/assets/css/tokens.css
 *
 * Layer order:
 * 1. Primitive
 * 2. Semantic
 * 3. Component
 *
 * Do not define PHASE token values in any other runtime file.
 */

:root {
    /* =========================================================
     * 1. PRIMITIVE TOKENS
     * Raw values approved by the design specification.
     * ====================================================== */

    /* Font families */
    --font-system:
        "Geist Sans",
        "Inter",
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --font-mutation:
        "Instrument Serif",
        "Iowan Old Style",
        "Palatino Linotype",
        Palatino,
        "Times New Roman",
        serif;

    --font-technical:
        "Geist Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --phase-font-family-sans:
        var(--font-system);

    --phase-font-family-serif:
        var(--font-mutation);

    --phase-font-family-mono:
        var(--font-technical);

    /* Font weights */
    --phase-font-weight-regular: 400;
    --phase-font-weight-medium: 500;
    --phase-font-weight-semibold: 600;

    /* =========================================================
     * MOTION DURATION PRIMITIVES
     * ====================================================== */

    /* System */
    --phase-duration-system-90: 90ms;
    --phase-duration-system-140: 140ms;
    --phase-duration-system-180: 180ms;
    --phase-duration-system-240: 240ms;

    /* Mutation */
    --phase-duration-mutation-420: 420ms;
    --phase-duration-mutation-680: 680ms;
    --phase-duration-mutation-960: 960ms;

    /* Accessibility reduction only */
    --phase-duration-reduced-instant: 1ms;
    --phase-duration-reduced-essential: 90ms;
    --phase-duration-reduced-delay: 0ms;
    --phase-motion-reduced-iteration-count: 1;
    --phase-motion-reduced-distance: 0px;
    --phase-scale-reduced-identity: 1;

    /* =========================================================
     * MOTION EASING PRIMITIVES
     * ====================================================== */

    --phase-ease-system-exit:
        cubic-bezier(0.16, 1, 0.3, 1);

    --phase-ease-system-in:
        cubic-bezier(0.7, 0, 0.84, 0);

    --phase-ease-system-standard:
        cubic-bezier(0.4, 0, 0.2, 1);

    --phase-ease-mutation-viscous:
        cubic-bezier(0.65, 0, 0.35, 1);

    --phase-ease-mutation-out:
        cubic-bezier(0.22, 0.8, 0.22, 1);

    --phase-ease-mutation-in-out:
        cubic-bezier(0.65, 0, 0.2, 1);

    --phase-ease-mutation-return:
        cubic-bezier(0.34, 0.1, 0.2, 1);

    --phase-ease-reduced:
        linear;

    /* =========================================================
     * STEP 4B.4 SPACING PRIMITIVES
     * ====================================================== */

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Minimum practical interactive target */
    --size-control-target: 2.75rem;

    /* =========================================================
     * STEP 4B.4 COLOR PRIMITIVES
     * ====================================================== */

    --color-void: #09090b;
    --color-graphite: #18181d;
    --color-mineral: #a7a8af;
    --color-lab-white: #f2f0ea;
    --color-white: #ffffff;
    --color-signal-violet: #6f4eff;
    --color-ion-violet: #7b5cff;
    --color-bio-acid: #c7ff4a;
    --color-resin-cyan: #a8edff;

    /* =========================================================
     * STEP 4B.4 BORDER, RADIUS, LAYER, AND EFFECT PRIMITIVES
     * ====================================================== */

    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-focus: 2px;

    /*
     * Canonical ownership aliases use rem units. The locked
     * compatibility tokens below retain their original px contract.
     */
    --radius-structural: 0;
    --radius-control: 0.25rem;
    --radius-container: 0.5rem;
    --radius-media: 0.75rem;

    --layer-base: 0;
    --layer-raised: 10;
    --layer-sticky: 100;
    --layer-dropdown: 200;
    --layer-overlay: 300;
    --layer-modal: 400;
    --layer-toast: 500;
    --layer-emergency: 1000;

    --shadow-overlay:
        0 1rem 3rem rgb(9 9 11 / 0.18);

    --opacity-muted: 0.72;
    --opacity-disabled: 0.48;
    --opacity-decoration: 0.36;

    /* Locked Step 4B.1 Radius compatibility primitives */
    --phase-radius-structural: 0;
    --phase-radius-control: 4px;
    --phase-radius-container: 8px;
    --phase-radius-media: 12px;

    /* =========================================================
     * FOCUS PRIMITIVES
     * ====================================================== */

    --phase-focus-width-2: 2px;
    --phase-focus-offset-3: 3px;
    --phase-focus-contrast-width-1: 1px;

    --phase-color-focus-canvas:
        Canvas;

    --phase-color-focus-text:
        CanvasText;

    --phase-color-focus-highlight:
        Highlight;

    /* =========================================================
     * FORCED COLORS PRIMITIVES
     * ====================================================== */

    /*
     * Canvas, CanvasText and Highlight reuse the system-color
     * primitives established by the Focus-visible baseline.
     */
    --phase-color-forced-canvas:
        var(--phase-color-focus-canvas);

    --phase-color-forced-text:
        var(--phase-color-focus-text);

    --phase-color-forced-link:
        LinkText;

    --phase-color-forced-visited-link:
        VisitedText;

    --phase-color-forced-button-face:
        ButtonFace;

    --phase-color-forced-button-text:
        ButtonText;

    --phase-color-forced-field:
        Field;

    --phase-color-forced-field-text:
        FieldText;

    --phase-color-forced-disabled:
        GrayText;

    --phase-color-forced-highlight:
        var(--phase-color-focus-highlight);

    --phase-color-forced-highlight-text:
        HighlightText;

    /* Forced-colors geometry */
    --phase-forced-border-width-1:
        1px;

    --phase-forced-state-width-3:
        3px;

    --phase-forced-link-underline-thickness:
        0.1em;

    --phase-forced-link-underline-offset:
        0.18em;

    /* =========================================================
     * PRINT PRIMITIVES
     * ====================================================== */

    --phase-print-color-text-black:
        #000000;

    --phase-print-color-surface-white:
        #ffffff;

    --phase-print-font-size-body-11:
        11pt;

    --phase-print-font-size-meta-9:
        9pt;

    --phase-print-line-height-body-145:
        1.45;

    --phase-print-rule-width-05:
        0.5pt;

    /* =========================================================
     * TYPOGRAPHY PRIMITIVES
     * ====================================================== */

    /* Fixed size boundaries */
    --phase-size-11: 0.6875rem;
    --phase-size-12: 0.75rem;
    --phase-size-13: 0.8125rem;
    --phase-size-14: 0.875rem;
    --phase-size-15: 0.9375rem;
    --phase-size-16: 1rem;
    --phase-size-17: 1.0625rem;
    --phase-size-18: 1.125rem;
    --phase-size-24: 1.5rem;
    --phase-size-32: 2rem;
    --phase-size-40: 2.5rem;
    --phase-size-48: 3rem;
    --phase-size-64: 4rem;
    --phase-size-88: 5.5rem;
    --phase-size-120: 7.5rem;

    /* Fluid preferred values: approximately 320px–1440px */
    --phase-fluid-display: calc(1.714rem + 6.429vw);
    --phase-fluid-h1: calc(1.643rem + 4.286vw);
    --phase-fluid-h2: calc(1.429rem + 2.857vw);
    --phase-fluid-h3: calc(1.214rem + 1.429vw);
    --phase-fluid-body: calc(0.964rem + 0.179vw);
    --phase-fluid-lead: calc(1.018rem + 0.536vw);
    --phase-fluid-supporting: calc(0.902rem + 0.179vw);
    --phase-fluid-caption: calc(0.732rem + 0.089vw);
    --phase-fluid-metadata: calc(0.670rem + 0.089vw);
    --phase-fluid-technical: calc(0.714rem + 0.179vw);
    --phase-fluid-navigation: calc(0.777rem + 0.179vw);
    --phase-fluid-control: calc(0.714rem + 0.179vw);

    /* Unitless line-height primitives */
    --phase-leading-090: 0.9;
    --phase-leading-095: 0.95;
    --phase-leading-100: 1;
    --phase-leading-108: 1.08;
    --phase-leading-120: 1.2;
    --phase-leading-130: 1.3;
    --phase-leading-140: 1.4;
    --phase-leading-145: 1.45;
    --phase-leading-150: 1.5;
    --phase-leading-155: 1.55;
    --phase-leading-160: 1.6;

    /* Letter-spacing primitives */
    --phase-tracking-n040: -0.04em;
    --phase-tracking-n035: -0.035em;
    --phase-tracking-n025: -0.025em;
    --phase-tracking-n015: -0.015em;
    --phase-tracking-n010: -0.01em;
    --phase-tracking-000: 0;
    --phase-tracking-p010: 0.01em;
    --phase-tracking-p020: 0.02em;
    --phase-tracking-p040: 0.04em;
    --phase-tracking-p060: 0.06em;

    /* Text-measure primitives */
    --phase-measure-12: 12ch;
    --phase-measure-16: 16ch;
    --phase-measure-24: 24ch;
    --phase-measure-32: 32ch;
    --phase-measure-40: 40ch;
    --phase-measure-48: 48ch;
    --phase-measure-52: 52ch;
    --phase-measure-54: 54ch;
    --phase-measure-62: 62ch;
    --phase-measure-68: 68ch;
    --phase-measure-80: 80ch;

    /* Column counts */
    --phase-grid-columns-4: 4;
    --phase-grid-columns-8: 8;
    --phase-grid-columns-12: 12;

    /* Column gaps */
    --phase-grid-gap-16: 1rem;
    --phase-grid-gap-20: 1.25rem;
    --phase-grid-gap-24: 1.5rem;
    --phase-grid-gap-32: 2rem;

    /* Row gaps */
    --phase-grid-row-gap-24: 1.5rem;
    --phase-grid-row-gap-32: 2rem;
    --phase-grid-row-gap-40: 2.5rem;

    /* Edge spacing */
    --phase-grid-edge-16: 1rem;
    --phase-grid-edge-20: 1.25rem;
    --phase-grid-edge-24: 1.5rem;
    --phase-grid-edge-32: 2rem;
    --phase-grid-edge-40: 2.5rem;

    /* Grid content limit */
    --phase-grid-content-max-1600: 100rem;

    /* =========================================================
     * LAYOUT PRIMITIVES
     * ====================================================== */

    /* Step 4B.3 canonical viewport protection */
    --viewport-min: 20rem;

    /* Step 4B.3 canonical page gutters */
    --gutter-inline: clamp(1rem, 3vw, 2rem);
    --gutter-inline-wide: clamp(1.25rem, 4vw, 4rem);

    /* Step 4B.3 canonical container roles */
    --container-page: 120rem;
    --container-wide: 100rem;
    --container-content: 80rem;
    --container-editorial: 72rem;
    --container-narrow: 52rem;

    /* Step 4B.3 canonical responsive grid */
    --grid-columns: 4;
    --grid-gap: clamp(0.75rem, 2vw, 1.25rem);

    /* Step 4B.3 canonical section rhythm */
    --section-space-xs: clamp(2rem, 4vw, 3rem);
    --section-space-sm: clamp(3rem, 6vw, 5rem);
    --section-space-md: clamp(4.5rem, 8vw, 8rem);
    --section-space-lg: clamp(6rem, 11vw, 11rem);
    --section-space-xl: clamp(8rem, 14vw, 16rem);

    /* Step 4B.3 canonical content rhythm */
    --flow-space-xs: 0.5rem;
    --flow-space-sm: 0.875rem;
    --flow-space-md: 1.5rem;
    --flow-space-lg: 2.5rem;
    --flow-space-xl: 4rem;

    /* Step 4B.3 controlled optical offsets */
    --offset-sm: clamp(1rem, 3vw, 3rem);
    --offset-md: clamp(2rem, 6vw, 7rem);
    --offset-lg: clamp(3rem, 10vw, 12rem);

    /*
     * Legacy Step 4B.1 layout primitives remain below for the
     * compatibility-prefixed .phase-* API. New runtime layout
     * work consumes the canonical tokens above.
     */

    /* Container maximum widths */
    --phase-container-max-fluid: 100%;
    --phase-container-max-720: 45rem;
    --phase-container-max-960: 60rem;
    --phase-container-max-1136: 71rem;
    --phase-container-max-1600: 100rem;

    /* Compact section spacing */
    --phase-section-compact-40: 2.5rem;
    --phase-section-compact-48: 3rem;
    --phase-section-compact-64: 4rem;
    --phase-section-compact-72: 4.5rem;
    --phase-section-compact-80: 5rem;
    --phase-section-compact-96: 6rem;

    /* Standard section spacing */
    --phase-section-standard-64: 4rem;
    --phase-section-standard-72: 4.5rem;
    --phase-section-standard-96: 6rem;
    --phase-section-standard-112: 7rem;
    --phase-section-standard-128: 8rem;
    --phase-section-standard-144: 9rem;

    /* Expanded section spacing */
    --phase-section-expanded-96: 6rem;
    --phase-section-expanded-104: 6.5rem;
    --phase-section-expanded-144: 9rem;
    --phase-section-expanded-168: 10.5rem;
    --phase-section-expanded-192: 12rem;
    --phase-section-expanded-216: 13.5rem;

    /* Navigation-safe space */
    --phase-navigation-safe-64: 4rem;
    --phase-navigation-safe-72: 4.5rem;
    --phase-navigation-safe-80: 5rem;
    --phase-navigation-safe-88: 5.5rem;

    /* Media ratios */
    --phase-media-ratio-4-3: 4 / 3;
    --phase-media-ratio-3-2: 3 / 2;
    --phase-media-ratio-16-9: 16 / 9;

    /* =========================================================
    * CONTAINER PRIMITIVES
    * ====================================================== */

    /* Responsive Page Container limits */
    --phase-container-page-fluid: 100%;
    --phase-container-page-720: 45rem;
    --phase-container-page-960: 60rem;
    --phase-container-page-1136: 71rem;
    --phase-container-page-1600: 100rem;

    /* Specialized container limits */
    --phase-container-reading: 68ch;
    --phase-container-wide: 120rem;
    --phase-container-technical: 90rem;
    --phase-container-full: none;

    /* =========================================================
     * SECTION RHYTHM PRIMITIVES
     * ====================================================== */

    /* Compact, Standard, Expanded (Assuming previously existing, if not, add here too) */

    /* Hero */
    --phase-section-hero-112: 7rem;
    --phase-section-hero-128: 8rem;
    --phase-section-hero-176: 11rem;
    --phase-section-hero-208: 13rem;
    --phase-section-hero-240: 15rem;
    --phase-section-hero-288: 18rem;

    /* Closing */
    --phase-section-closing-80: 5rem;
    --phase-section-closing-96: 6rem;
    --phase-section-closing-128: 8rem;
    --phase-section-closing-152: 9.5rem;
    --phase-section-closing-176: 11rem;
    --phase-section-closing-208: 13rem;

    /* =========================================================
     * 2. SEMANTIC TOKENS
     * Usage aliases. These must reference Primitive tokens.
     * ====================================================== */

    /* =========================================================
     * STEP 4B.4 SEMANTIC SPACING
     * ====================================================== */

    /* Inline relationships */
    --space-inline-xs: var(--space-1);
    --space-inline-sm: var(--space-2);
    --space-inline-md: var(--space-3);
    --space-inline-lg: var(--space-4);

    /* Vertical stacks */
    --space-stack-xs: var(--space-2);
    --space-stack-sm: var(--space-3);
    --space-stack-md: var(--space-4);
    --space-stack-lg: var(--space-6);
    --space-stack-xl: var(--space-8);

    /* Interactive controls */
    --space-control-inline: var(--space-4);
    --space-control-block: var(--space-3);
    --space-control-gap: var(--space-2);
    --space-control-inline-compact: var(--space-3);
    --space-control-block-compact: var(--space-2);
    --space-control-inline-text: var(--space-0);
    --space-action-group: var(--space-4);
    --space-link-underline-offset: var(--space-1);
    --space-link-underline-offset-hover: var(--space-2);

    /* Component internals */
    --space-component-xs: var(--space-3);
    --space-component-sm: var(--space-4);
    --space-component-md: var(--space-6);
    --space-component-lg: var(--space-8);

    /* Content relationships */
    --space-heading-to-copy: var(--space-4);
    --space-copy-to-action: var(--space-6);
    --space-label-to-control: var(--space-2);
    --space-help-to-control: var(--space-2);
    --space-error-to-control: var(--space-2);
    --space-caption-to-media: var(--space-3);
    --space-card-section-gap: var(--space-4);
    --space-card-media-gap: var(--space-3);
    --space-panel-section-gap: var(--space-4);
    --space-disclosure-content-gap: var(--space-2);
    --space-status-gap: var(--space-2);
    --space-status-inset: var(--space-4);
    --space-metadata-gap: var(--space-4);
    --space-metadata-pair-gap: var(--space-1);
    --space-section-header-gap: var(--space-4);
    --space-boundary-gap: var(--space-3);
    --space-quote-gap: var(--space-4);
    --space-evidence-tag-inline: var(--space-2);
    --space-evidence-tag-block: var(--space-1);
    --space-utility-section-gap: var(--space-8);
    --space-utility-content-gap: var(--space-6);
    --space-utility-action-gap: var(--space-4);
    --space-utility-table-cell: var(--space-3);

    /* Structural component roles */
    --space-card: var(--space-6);
    --space-panel: var(--space-8);
    --space-disclosure: var(--space-5);

    /* =========================================================
     * STEP 4B.4 TEXT, SURFACE, BORDER, AND FOCUS ROLES
     * ====================================================== */

    --text-primary: var(--color-void);
    --text-secondary: var(--color-graphite);
    --text-inverse: var(--color-lab-white);
    --text-on-signal: var(--color-white);

    --surface-page: var(--color-lab-white);
    --surface-page-inverse: var(--color-void);
    --surface-primary: var(--color-lab-white);
    --surface-secondary: var(--color-white);
    --surface-dark: var(--color-void);
    --surface-dark-secondary: var(--color-graphite);
    --surface-panel: var(--color-white);
    --surface-panel-dark: var(--color-graphite);
    --surface-signal: var(--color-signal-violet);
    --surface-signal-transition: var(--color-bio-acid);
    --surface-transparent: transparent;

    --border-subtle: var(--color-mineral);
    --border-default: var(--color-graphite);
    --border-strong: var(--color-void);
    --border-inverse: var(--color-mineral);
    --border-signal: var(--color-signal-violet);

    /*
     * Status-color authority is not yet active. These roles deliberately
     * reference the future semantic status tokens and fail safely to a
     * strong monochrome boundary until that authority is installed.
     */
    --border-error:
        var(--color-error, var(--border-strong));
    --border-success:
        var(--color-success, var(--border-strong));
    --border-warning:
        var(--color-warning, var(--border-strong));

    /*
     * Step 4B.5 public focus roles. The locked --phase-* compatibility
     * tokens below remain available to the earlier focus validator.
     */
    --focus-color: var(--color-signal-violet);
    --focus-color-inverse: var(--color-bio-acid);
    --focus-width: var(--border-width-focus);
    --focus-offset: var(--phase-focus-offset-3);
    --focus-contrast-color:
        var(--phase-focus-ring-contrast-color);

    --control-target-min: var(--size-control-target);
    --interaction-press-offset: var(--border-width-1);
    --state-boundary-width: var(--border-width-2);
    --anchor-offset-safe:
        calc(
            var(
                --header-height-current,
                var(--header-height-standard)
            )
            + var(--space-inline-lg)
        );
    --media-failure-min-block: var(--space-0);

    /* =========================================================
     * SEMANTIC GUTTER TOKENS
     * ====================================================== */
    --phase-gutter-mobile: var(--phase-grid-edge-16);
    --phase-gutter-mobile-wide: var(--phase-grid-edge-20);
    --phase-gutter-tablet: var(--phase-grid-edge-24);
    --phase-gutter-desktop: var(--phase-grid-edge-32);
    --phase-gutter-wide: var(--phase-grid-edge-40);

    /* Font Roles */
    --phase-font-system:
        var(--phase-font-family-sans);

    --phase-font-body:
        var(--phase-font-family-sans);

    --phase-font-editorial:
        var(--phase-font-family-serif);

    --phase-font-technical:
        var(--phase-font-family-mono);

    --phase-font-weight-body:
        var(--phase-font-weight-regular);

    --phase-font-weight-ui:
        var(--phase-font-weight-medium);

    --phase-font-weight-emphasis:
        var(--phase-font-weight-semibold);

    /* =========================================================
     * SEMANTIC SYSTEM MOTION
     * ====================================================== */

    --phase-motion-system-instant:
        var(--phase-duration-system-90);

    --phase-motion-system-fast:
        var(--phase-duration-system-140);

    --phase-motion-system-standard:
        var(--phase-duration-system-180);

    --phase-motion-system-deliberate:
        var(--phase-duration-system-240);

    --phase-ease-system:
        var(--phase-ease-system-exit);

    /* Step 4B.6 public system-motion roles */
    --motion-system-instant:
        var(--phase-motion-system-instant);

    --motion-system-fast:
        var(--phase-motion-system-fast);

    --motion-system-standard:
        var(--phase-motion-system-standard);

    --motion-system-slow:
        var(--phase-motion-system-deliberate);

    --ease-system-out:
        var(--phase-ease-system-exit);

    --ease-system-in:
        var(--phase-ease-system-in);

    --ease-system-standard:
        var(--phase-ease-system-standard);

    /* =========================================================
     * SEMANTIC MUTATION MOTION
     * ====================================================== */

    --phase-motion-mutation-fast:
        var(--phase-duration-mutation-420);

    --phase-motion-mutation-standard:
        var(--phase-duration-mutation-680);

    --phase-motion-mutation-deliberate:
        var(--phase-duration-mutation-960);

    --phase-ease-mutation:
        var(--phase-ease-mutation-viscous);

    /* Step 4B.6 public mutation-motion roles */
    --motion-mutation-fast:
        var(--phase-motion-mutation-fast);

    --motion-mutation-standard:
        var(--phase-motion-mutation-standard);

    --motion-mutation-slow:
        var(--phase-motion-mutation-deliberate);

    --ease-mutation-out:
        var(--phase-ease-mutation-out);

    --ease-mutation-in-out:
        var(--phase-ease-mutation-in-out);

    --ease-mutation-return:
        var(--phase-ease-mutation-return);

    /* Registered global component bindings */
    --motion-button-duration:
        var(--motion-system-fast);

    --motion-nav-duration:
        var(--motion-system-standard);

    --motion-disclosure-duration:
        var(--motion-system-standard);

    --motion-mobile-panel-duration:
        var(--motion-system-slow);

    --motion-media-duration:
        var(--motion-mutation-fast);

    --motion-observer-duration:
        var(--motion-mutation-standard);

    /* =========================================================
     * REDUCED-MOTION SEMANTICS
     * ====================================================== */

    --phase-motion-reduced-duration:
        var(--phase-duration-reduced-instant);

    --phase-motion-reduced-essential-duration:
        var(--phase-duration-reduced-essential);

    --phase-motion-reduced-delay:
        var(--phase-duration-reduced-delay);

    --phase-motion-reduced-easing:
        var(--phase-ease-reduced);

    --phase-motion-reduced-iteration:
        var(--phase-motion-reduced-iteration-count);

    --phase-motion-reduced-translate:
        var(--phase-motion-reduced-distance);

    --phase-motion-reduced-scale:
        var(--phase-scale-reduced-identity);

    /* Radius */
    --phase-radius-structure:
        var(--phase-radius-structural);

    --phase-radius-interactive:
        var(--phase-radius-control);

    --phase-radius-surface:
        var(--phase-radius-container);

    --phase-radius-image:
        var(--phase-radius-media);

    /* =========================================================
     * SEMANTIC FOCUS TOKENS
     * ====================================================== */

    --phase-focus-ring-width:
        var(--phase-focus-width-2);

    --phase-focus-ring-offset:
        var(--phase-focus-offset-3);

    --phase-focus-ring-contrast-width:
        var(--phase-focus-contrast-width-1);

    --phase-focus-ring-color:
        var(--phase-color-focus-text);

    --phase-focus-ring-contrast-color:
        var(--phase-color-focus-canvas);

    --phase-focus-ring-forced-color:
        var(--phase-color-focus-highlight);

    /* =========================================================
     * SEMANTIC FORCED COLORS TOKENS
     * ====================================================== */

    --phase-forced-surface:
        var(--phase-color-forced-canvas);

    --phase-forced-text:
        var(--phase-color-forced-text);

    --phase-forced-link:
        var(--phase-color-forced-link);

    --phase-forced-link-visited:
        var(--phase-color-forced-visited-link);

    --phase-forced-control-surface:
        var(--phase-color-forced-button-face);

    --phase-forced-control-text:
        var(--phase-color-forced-button-text);

    --phase-forced-field-surface:
        var(--phase-color-forced-field);

    --phase-forced-field-text:
        var(--phase-color-forced-field-text);

    --phase-forced-disabled:
        var(--phase-color-forced-disabled);

    --phase-forced-state:
        var(--phase-color-forced-highlight);

    --phase-forced-state-text:
        var(--phase-color-forced-highlight-text);

    --phase-forced-control-border-width:
        var(--phase-forced-border-width-1);

    --phase-forced-state-border-width:
        var(--phase-forced-state-width-3);

    --phase-forced-link-decoration-thickness:
        var(--phase-forced-link-underline-thickness);

    --phase-forced-link-decoration-offset:
        var(--phase-forced-link-underline-offset);

    /* =========================================================
     * SEMANTIC PRINT TOKENS
     * ====================================================== */

    --phase-print-text:
        var(--phase-print-color-text-black);

    --phase-print-surface:
        var(--phase-print-color-surface-white);

    --phase-print-body-size:
        var(--phase-print-font-size-body-11);

    --phase-print-meta-size:
        var(--phase-print-font-size-meta-9);

    --phase-print-body-leading:
        var(--phase-print-line-height-body-145);

    --phase-print-rule:
        var(--phase-print-rule-width-05);

    /* =========================================================
     * SEMANTIC GRID TOKENS
     * ====================================================== */

    /*
     * Grid Shell maximum content width remains independent from
     * breakpoint-responsive container aliases.
     */
    --phase-grid-content-max:
        var(--phase-grid-content-max-1600);

    /* =========================================================
     * SEMANTIC TEXT MEASURES
     * ====================================================== */

    --phase-measure-body:
        var(--phase-measure-68);

    --phase-measure-lead:
        var(--phase-measure-54);

    --phase-measure-supporting:
        var(--phase-measure-62);

    --phase-measure-editorial:
        var(--phase-measure-52);

    --phase-measure-technical:
        var(--phase-measure-80);

    /* =========================================================
     * SEMANTIC TYPOGRAPHY ROLES — STEP 4B.2.2 AUTHORITY
     * ====================================================== */

    --type-route-size: clamp(3rem, 8vw, 8rem);
    --type-route-line: 0.9;
    --type-route-tracking: -0.055em;
    --type-route-weight: 500;

    --type-section-size: clamp(2.25rem, 5vw, 5.5rem);
    --type-section-line: 0.96;
    --type-section-tracking: -0.045em;
    --type-section-weight: 500;

    --type-subsection-size: clamp(1.5rem, 2.4vw, 2.5rem);
    --type-subsection-line: 1.05;
    --type-subsection-tracking: -0.025em;
    --type-subsection-weight: 500;

    --type-lead-size: clamp(1.125rem, 1.5vw, 1.5rem);
    --type-lead-line: 1.4;
    --type-lead-tracking: -0.012em;
    --type-lead-weight: 400;

    --type-body-size:
        clamp(1rem, 0.25vw + 0.94rem, 1.125rem);
    --type-body-line: 1.6;
    --type-body-tracking: -0.005em;
    --type-body-weight: 400;

    --type-supporting-size:
        clamp(0.9375rem, 0.18vw + 0.9rem, 1rem);
    --type-supporting-line: 1.55;
    --type-supporting-tracking: 0;
    --type-supporting-weight: 400;

    --type-label-size: 0.875rem;
    --type-label-line: 1.25;
    --type-label-tracking: 0.01em;
    --type-label-weight: 500;

    --type-technical-size:
        clamp(0.6875rem, 0.14vw + 0.66rem, 0.75rem);
    --type-technical-line: 1.35;
    --type-technical-tracking: 0.08em;
    --type-technical-weight: 400;

    --type-action-size: 0.9375rem;
    --type-action-line: 1.2;
    --type-action-tracking: -0.01em;
    --type-action-weight: 500;

    --type-navigation-size:
        clamp(0.8125rem, 0.18vw + 0.78rem, 0.9375rem);
    --type-navigation-line: 1.2;
    --type-navigation-tracking: 0.02em;
    --type-navigation-weight: 400;

    --type-caption-size: 0.8125rem;
    --type-caption-line: 1.45;
    --type-caption-tracking: 0;
    --type-caption-weight: 400;

    /*
     * Legacy Step 4B.1 compatibility tokens below remain temporarily
     * available for the unconsumed .phase-type-* utility layer.
     * New runtime work must use the canonical --type-* roles above.
     */

    /* Display */
    --phase-type-display-size-min:
        var(--phase-size-48);
    --phase-type-display-size-fluid:
        var(--phase-fluid-display);
    --phase-type-display-size-max:
        var(--phase-size-120);
    --phase-type-display-size:
        clamp(
            var(--phase-type-display-size-min),
            var(--phase-type-display-size-fluid),
            var(--phase-type-display-size-max)
        );
    --phase-type-display-line-height:
        var(--phase-leading-090);
    --phase-type-display-letter-spacing:
        var(--phase-tracking-n040);
    --phase-type-display-measure:
        var(--phase-measure-12);

    /* H1–H3 */
    --phase-type-h1-size-min:
        var(--phase-size-40);
    --phase-type-h1-size-fluid:
        var(--phase-fluid-h1);
    --phase-type-h1-size-max:
        var(--phase-size-88);
    --phase-type-h1-size:
        clamp(
            var(--phase-type-h1-size-min),
            var(--phase-type-h1-size-fluid),
            var(--phase-type-h1-size-max)
        );
    --phase-type-h1-line-height:
        var(--phase-leading-095);
    --phase-type-h1-letter-spacing:
        var(--phase-tracking-n035);
    --phase-type-h1-measure:
        var(--phase-measure-16);

    --phase-type-h2-size-min:
        var(--phase-size-32);
    --phase-type-h2-size-fluid:
        var(--phase-fluid-h2);
    --phase-type-h2-size-max:
        var(--phase-size-64);
    --phase-type-h2-size:
        clamp(
            var(--phase-type-h2-size-min),
            var(--phase-type-h2-size-fluid),
            var(--phase-type-h2-size-max)
        );
    --phase-type-h2-line-height:
        var(--phase-leading-100);
    --phase-type-h2-letter-spacing:
        var(--phase-tracking-n025);
    --phase-type-h2-measure:
        var(--phase-measure-24);

    --phase-type-h3-size-min:
        var(--phase-size-24);
    --phase-type-h3-size-fluid:
        var(--phase-fluid-h3);
    --phase-type-h3-size-max:
        var(--phase-size-40);
    --phase-type-h3-size:
        clamp(
            var(--phase-type-h3-size-min),
            var(--phase-type-h3-size-fluid),
            var(--phase-type-h3-size-max)
        );
    --phase-type-h3-line-height:
        var(--phase-leading-108);
    --phase-type-h3-letter-spacing:
        var(--phase-tracking-n015);
    --phase-type-h3-measure:
        var(--phase-measure-32);

    /* Body, Lead, Supporting */
    --phase-type-body-size-min:
        var(--phase-size-16);
    --phase-type-body-size-fluid:
        var(--phase-fluid-body);
    --phase-type-body-size-max:
        var(--phase-size-18);
    --phase-type-body-size:
        clamp(
            var(--phase-type-body-size-min),
            var(--phase-type-body-size-fluid),
            var(--phase-type-body-size-max)
        );
    --phase-type-body-line-height:
        var(--phase-leading-160);
    --phase-type-body-letter-spacing:
        var(--phase-tracking-000);
    --phase-type-body-measure:
        var(--phase-measure-body);

    --phase-type-lead-size-min:
        var(--phase-size-18);
    --phase-type-lead-size-fluid:
        var(--phase-fluid-lead);
    --phase-type-lead-size-max:
        var(--phase-size-24);
    --phase-type-lead-size:
        clamp(
            var(--phase-type-lead-size-min),
            var(--phase-type-lead-size-fluid),
            var(--phase-type-lead-size-max)
        );
    --phase-type-lead-line-height:
        var(--phase-leading-145);
    --phase-type-lead-letter-spacing:
        var(--phase-tracking-n010);
    --phase-type-lead-measure:
        var(--phase-measure-lead);

    --phase-type-supporting-size-min:
        var(--phase-size-15);
    --phase-type-supporting-size-fluid:
        var(--phase-fluid-supporting);
    --phase-type-supporting-size-max:
        var(--phase-size-17);
    --phase-type-supporting-size:
        clamp(
            var(--phase-type-supporting-size-min),
            var(--phase-type-supporting-size-fluid),
            var(--phase-type-supporting-size-max)
        );
    --phase-type-supporting-line-height:
        var(--phase-leading-155);
    --phase-type-supporting-letter-spacing:
        var(--phase-tracking-000);
    --phase-type-supporting-measure:
        var(--phase-measure-supporting);

    /* Caption, Metadata, Technical */
    --phase-type-caption-size-min:
        var(--phase-size-12);
    --phase-type-caption-size-fluid:
        var(--phase-fluid-caption);
    --phase-type-caption-size-max:
        var(--phase-size-13);
    --phase-type-caption-size:
        clamp(
            var(--phase-type-caption-size-min),
            var(--phase-type-caption-size-fluid),
            var(--phase-type-caption-size-max)
        );
    --phase-type-caption-line-height:
        var(--phase-leading-140);
    --phase-type-caption-letter-spacing:
        var(--phase-tracking-p010);
    --phase-type-caption-measure:
        var(--phase-measure-48);

    --phase-type-metadata-size-min:
        var(--phase-size-11);
    --phase-type-metadata-size-fluid:
        var(--phase-fluid-metadata);
    --phase-type-metadata-size-max:
        var(--phase-size-12);
    --phase-type-metadata-size:
        clamp(
            var(--phase-type-metadata-size-min),
            var(--phase-type-metadata-size-fluid),
            var(--phase-type-metadata-size-max)
        );
    --phase-type-metadata-line-height:
        var(--phase-leading-130);
    --phase-type-metadata-letter-spacing:
        var(--phase-tracking-p060);
    --phase-type-metadata-measure:
        var(--phase-measure-40);

    --phase-type-technical-size-min:
        var(--phase-size-12);
    --phase-type-technical-size-fluid:
        var(--phase-fluid-technical);
    --phase-type-technical-size-max:
        var(--phase-size-14);
    --phase-type-technical-size:
        clamp(
            var(--phase-type-technical-size-min),
            var(--phase-type-technical-size-fluid),
            var(--phase-type-technical-size-max)
        );
    --phase-type-technical-line-height:
        var(--phase-leading-150);
    --phase-type-technical-letter-spacing:
        var(--phase-tracking-p010);
    --phase-type-technical-measure:
        var(--phase-measure-technical);

    /* Navigation & Control Label */
    --phase-type-navigation-size-min:
        var(--phase-size-13);
    --phase-type-navigation-size-fluid:
        var(--phase-fluid-navigation);
    --phase-type-navigation-size-max:
        var(--phase-size-15);
    --phase-type-navigation-size:
        clamp(
            var(--phase-type-navigation-size-min),
            var(--phase-type-navigation-size-fluid),
            var(--phase-type-navigation-size-max)
        );
    --phase-type-navigation-line-height:
        var(--phase-leading-120);
    --phase-type-navigation-letter-spacing:
        var(--phase-tracking-p020);
    --phase-type-navigation-measure:
        var(--phase-measure-24);

    --phase-type-control-size-min:
        var(--phase-size-12);
    --phase-type-control-size-fluid:
        var(--phase-fluid-control);
    --phase-type-control-size-max:
        var(--phase-size-14);
    --phase-type-control-size:
        clamp(
            var(--phase-type-control-size-min),
            var(--phase-type-control-size-fluid),
            var(--phase-type-control-size-max)
        );
    --phase-type-control-line-height:
        var(--phase-leading-120);
    --phase-type-control-letter-spacing:
        var(--phase-tracking-p040);
    --phase-type-control-measure:
        var(--phase-measure-24);

    /* =========================================================
     * 3. COMPONENT TOKENS
     * Add only for components that already exist.
     * Every value must reference a Semantic token.
     * ====================================================== */
    --header-height-compact: 4rem;
    --header-height-standard: 4.5rem;
    --header-height-expanded: 5rem;
    --header-height-current: var(--header-height-compact);
}

/*
 * Progressive surface and border enhancement. Every mixed value has a
 * static registered fallback above and is not used to bypass text contrast.
 */
@supports (
    background: color-mix(in srgb, white 50%, black)
) {
    :root {
        --surface-panel:
            color-mix(
                in srgb,
                var(--color-white) 86%,
                var(--color-lab-white)
            );

        --surface-panel-dark:
            color-mix(
                in srgb,
                var(--color-graphite) 88%,
                var(--color-void)
            );

        --border-subtle:
            color-mix(
                in srgb,
                var(--color-void) 14%,
                transparent
            );

        --border-default:
            color-mix(
                in srgb,
                var(--color-void) 28%,
                transparent
            );

        --border-inverse:
            color-mix(
                in srgb,
                var(--color-white) 42%,
                transparent
            );
    }
}

/* PHASE BREAKPOINT ALIASES:START */

:root {
    --phase-breakpoint-current: B0;
    --phase-grid-columns-current: var(--grid-columns);
    --phase-grid-column-gap-current: var(--grid-gap);
    --phase-grid-row-gap-current: var(--grid-gap);
    --phase-gutter-current: var(--gutter-inline);
    --phase-grid-edge-current: var(--gutter-inline);
    --phase-container-max-current: var(--container-page);
    --phase-section-compact-current: var(--section-space-sm);
    --phase-section-standard-current: var(--section-space-md);
    --phase-section-expanded-current: var(--section-space-lg);
    --phase-section-hero-current: var(--section-space-lg);
    --phase-section-closing-current: var(--section-space-xl);
    --phase-navigation-safe-current: var(--phase-navigation-safe-64);
    --phase-media-ratio-current: var(--phase-media-ratio-4-3);
    --phase-layout-offset-columns-current: 0;
}

/* B1 — 480px; four-column mobile-wide band. */
@media (min-width: 30rem) {
    :root {
        --phase-breakpoint-current: B1;
        --phase-navigation-safe-current: var(--phase-navigation-safe-64);
        --phase-media-ratio-current: var(--phase-media-ratio-4-3);
    }
}

/* B2 — 768px; eight-column tablet foundation. */
@media (min-width: 48rem) {
    :root {
        --grid-columns: 8;
        --grid-gap: clamp(1rem, 2vw, 1.5rem);
        --phase-breakpoint-current: B2;
        --phase-grid-columns-current: var(--grid-columns);
        --phase-grid-column-gap-current: var(--grid-gap);
        --phase-grid-row-gap-current: var(--grid-gap);
        --phase-navigation-safe-current: var(--phase-navigation-safe-72);
        --phase-media-ratio-current: var(--phase-media-ratio-3-2);
        --phase-layout-offset-columns-current: 1;
        --header-height-current: var(--header-height-standard);
    }
}

/* B3 — 1024px; remains an eight-column intermediate state. */
@media (min-width: 64rem) {
    :root {
        --phase-breakpoint-current: B3;
        --phase-navigation-safe-current: var(--phase-navigation-safe-80);
        --phase-media-ratio-current: var(--phase-media-ratio-16-9);
    }
}

/* B4 — 1200px; twelve-column desktop foundation. */
@media (min-width: 75rem) {
    :root {
        --grid-columns: 12;
        --grid-gap: clamp(1rem, 1.5vw, 2rem);
        --phase-breakpoint-current: B4;
        --phase-grid-columns-current: var(--grid-columns);
        --phase-grid-column-gap-current: var(--grid-gap);
        --phase-grid-row-gap-current: var(--grid-gap);
        --phase-layout-offset-columns-current: 2;
        --header-height-current: var(--header-height-expanded);
    }
}

/* B5 — 1440px; contained twelve-column wide-desktop band. */
@media (min-width: 90rem) {
    :root {
        --phase-breakpoint-current: B5;
        --phase-gutter-current: var(--gutter-inline-wide);
        --phase-grid-edge-current: var(--gutter-inline-wide);
        --phase-navigation-safe-current: var(--phase-navigation-safe-88);
    }
}

/* PHASE BREAKPOINT ALIASES:END */

/* =========================================================
 * REDUCED-MOTION TOKEN OVERRIDES
 * ====================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --phase-motion-system-instant:
            var(--phase-motion-reduced-essential-duration);
        --phase-motion-system-fast:
            var(--phase-motion-reduced-essential-duration);
        --phase-motion-system-standard:
            var(--phase-motion-reduced-essential-duration);
        --phase-motion-system-deliberate:
            var(--phase-motion-reduced-essential-duration);

        --phase-motion-mutation-fast:
            var(--phase-motion-reduced-duration);
        --phase-motion-mutation-standard:
            var(--phase-motion-reduced-duration);
        --phase-motion-mutation-deliberate:
            var(--phase-motion-reduced-duration);

        --phase-ease-system:
            var(--phase-motion-reduced-easing);
        --phase-ease-mutation:
            var(--phase-motion-reduced-easing);

        --ease-system-out:
            var(--phase-motion-reduced-easing);
        --ease-system-in:
            var(--phase-motion-reduced-easing);
        --ease-system-standard:
            var(--phase-motion-reduced-easing);

        --ease-mutation-out:
            var(--phase-motion-reduced-easing);
        --ease-mutation-in-out:
            var(--phase-motion-reduced-easing);
        --ease-mutation-return:
            var(--phase-motion-reduced-easing);
    }
}