/*
 * FoodFlow Next · design system runtime (I1)
 * Source of values: Claude outputs/FOODFLOW_DESIGN_SYSTEM.md. Direction: D1 Mise en Place.
 *
 * Contract
 *   Guest       [data-public-theme="next"]      mode: LIGHT ONLY (product decision, I8.2 · 2026-09-27):
 *               no prefers-color-scheme, no dark data-color-mode, no mode selector.
 *   Operations  [data-operations-theme="next"]  mode: Filament's .dark class on the same element
 *   An Operations subtree may force a mode with data-color-mode="light|dark" (e.g. Cocina in I6).
 *   Density: data-density="operational|touch|distance" (comfortable is the base).
 *   Base element styling applies only inside [data-next-root]; everything else is inert tokens
 *   or opt-in .ff-* classes, so Classic markup under these scopes is never restyled.
 *
 * Layers: primitives (--_*, private) → semantic (public) → component (.ff-*, only where justified).
 * Nothing here is declared on :root. Salón physical tokens (--plate, --table-*) belong to I4, scoped to .salon.
 * Brand roles come from the server (App\Support\NextTheme\BrandRoles) as --restaurant-brand* inputs;
 * the fallbacks below are FoodFlow's approved values, so a missing input is still accessible.
 */

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/schibsted-grotesk/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/schibsted-grotesk/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Primitives · private ramps. Step = round(1000 − 10·L*). Never used by components. ─── */

/* @primitives */
[data-public-theme="next"],
[data-operations-theme="next"] {
    --_warm-000: #FFFFFF;
    --_warm-047: #F5F1EA;
    --_warm-048: #F4F1EB;
    --_warm-055: #F2EFE9;
    --_warm-058: #F1EEE8;
    --_warm-067: #F0EBE4;
    --_warm-078: #EDE8E0;
    --_warm-083: #EBE7DF;
    --_warm-090: #E9E5DC;
    --_warm-107: #E5E0D7;
    --_warm-163: #D6D0C6;
    --_warm-237: #C3BBB1;
    --_warm-337: #A8A096;
    /* I1.1 Accessibility Lock: three DS values failed the DS's own thresholds; see docs/themes/NEXT_FOUNDATION_RUNTIME.md §5. */
    --_warm-414: #938C83; /* faint dark (DS #8A8278) */
    --_warm-426: #968872; /* line-strong light (DS #C2BAAD) */
    --_warm-528: #7B6E60; /* line-strong dark (DS #4A423A) */
    --_warm-563: #6E665D;
    --_warm-576: #6B635A;
    --_warm-711: #4A433B;
    --_warm-807: #332E29;
    --_warm-840: #2C2723;
    --_warm-844: #2B2623;
    --_warm-864: #262220;
    --_warm-900: #1E1B19;
    --_warm-905: #1D1A17;
    --_warm-920: #1A1714;
    --_warm-930: #181513;
    --_warm-931: #171513;
    --_warm-944: #141210;
    --_warm-959: #100E0D;

    --_orange-037: #FBF3EC;
    --_orange-269: #F0A268;
    --_orange-436: #D9661F;
    --_orange-544: #B0500F;
    --_orange-872: #2A1F16;
    --_orange-948: #1A0F06;

    --_green-054: #E9F2EA;
    --_green-131: #CADFCE;
    --_green-247: #8CC79A;
    --_green-341: #6FAE7E;
    --_green-537: #3F7A4A;
    --_green-659: #2A5A34;
    --_green-737: #2E4335;
    --_green-852: #1C2820;

    --_blue-061: #E9EEF5;
    --_blue-146: #C9D7E8;
    --_blue-251: #8FBDE8;
    --_blue-380: #5A9BD4;
    --_blue-602: #2C6096;
    --_blue-691: #1F4A7A;
    --_blue-776: #26374A;
    --_blue-881: #17202C;

    --_olive-056: #F1EFE7;
    --_olive-140: #DCD7C6;
    --_olive-228: #B6C49E;
    --_olive-366: #8CA079;
    --_olive-566: #5E6B4F;
    --_olive-701: #3F4A34;
    --_olive-760: #3A3A2A;
    --_olive-871: #222218;

    --_amber-048: #FAF0E1;
    --_amber-126: #EBD9BC;
    --_amber-232: #F0B25E;
    --_amber-310: #DE9B45;
    --_amber-416: #C77B1A;
    --_amber-639: #7A4A0E;
    --_amber-757: #46372A;
    --_amber-862: #2A2218;

    --_red-061: #FAEAE9;
    --_red-146: #EFCECB;
    --_red-317: #F08A83;
    --_red-410: #E06A62;
    --_red-563: #C0322B;
    --_red-583: #B3352C;
    --_red-682: #8F211C;
    --_red-689: #8F1B15;
    --_red-795: #482926;
    --_red-878: #2C1C1A;
}

/* ─── Foundation · mode-independent scales ─── */

/* @foundation */
[data-public-theme="next"],
[data-operations-theme="next"] {
    /* Spacing · Foundation Lock. Anything else is a named component exception. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --hairline: 1px;
    --radius-chip: 5px;
    --radius-control: 8px;
    --radius-panel: 10px;
    --radius-round: 50%;
    --radius-pill: 999px;

    --focus-width: 3px;
    --focus-offset: 2px;
    --target-min: 44px;

    --motion-enter: 220ms;
    --motion-exit: 160ms;
    --motion-expand: 180ms;
    --motion-state: 120ms;
    --motion-fade: 100ms;
    --ease-enter: ease-out;
    --ease-exit: ease-in;

    /* Typography · one family, eleven roles. Sizes below are the comfortable density. */
    --font-sans: var(--theme-font-body, 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-body: 1.45;
    --tracking-name: -0.015em;

    --type-display-size: 38px;
    --type-display-tracking: -0.03em;
    --type-page-title-size: 30px;
    --type-page-title-tracking: -0.03em;
    --type-section-size: 21px;
    --type-section-weight: 700;
    --type-section-tracking: -0.02em;
    --type-metric-size: 30px;
    --type-metric-weight: 800;
    --type-metric-tracking: -0.02em;
    --type-body-size: 14.5px;
    --type-body-weight: 500;
    --type-body-strong-size: 14.5px;
    --type-body-strong-weight: 700;
    --type-label-size: 12.5px;
    --type-label-weight: 600;
    --type-eyebrow-size: 11px;
    --type-eyebrow-weight: 700;
    --type-eyebrow-tracking: 0.1em;
    --type-chip-size: 11.5px;
    --type-chip-weight: 700;
    --type-numeric-size: 15px;
    --type-numeric-weight: 700;
    --type-control-size: 14.5px;
    --type-control-weight: 700;

    /* Named exceptions to the spacing scale (DS §1.4 · §4.1). */
    --gutter: 24px;
    --control-h: 44px;
    --field-h: 44px;
    --icon-button: 34px;
    --row-h: 52px;
}

/* @density-operational */
[data-public-theme="next"][data-density="operational"],
[data-public-theme="next"] [data-density="operational"],
[data-operations-theme="next"][data-density="operational"],
[data-operations-theme="next"] [data-density="operational"] {
    --type-display-size: 30px;
    --type-page-title-size: 27px;
    --type-section-size: 19px;
    --type-metric-size: 28px;
    --type-body-size: 13.5px;
    --type-body-strong-size: 13.5px;
    --type-label-size: 12px;
    --type-chip-size: 11.5px;
    --type-numeric-size: 14px;
    --type-control-size: 13.5px;
    --gutter: 20px;
    --control-h: 38px;
    --field-h: 40px;
    --icon-button: 32px;
    --row-h: 52px;
}

/* @density-touch */
[data-public-theme="next"][data-density="touch"],
[data-public-theme="next"] [data-density="touch"],
[data-operations-theme="next"][data-density="touch"],
[data-operations-theme="next"] [data-density="touch"] {
    --type-display-size: 28px;
    --type-page-title-size: 24px;
    --type-section-size: 18px;
    --type-metric-size: 25px;
    --type-body-size: 15px;
    --type-body-strong-size: 15px;
    --type-label-size: 13px;
    --type-chip-size: 14px;
    --type-numeric-size: 16px;
    --type-control-size: 16px;
    --gutter: 16px;
    --control-h: 54px;
    --field-h: 48px;
    --icon-button: 44px;
    --row-h: 60px;
}

/* ─── Semantic · the public layer. Light and dark are two deliberate expressions, not an inversion. ─── */

/* @semantic-light */
[data-public-theme="next"],
[data-operations-theme="next"],
[data-public-theme="next"] [data-color-mode="light"],
[data-operations-theme="next"] [data-color-mode="light"] {
    color-scheme: light;

    --canvas: var(--_warm-055);
    --surface: var(--_warm-000);
    --raised: var(--_warm-000);
    --inset: var(--_warm-083);
    --floating: var(--_warm-000);
    --field: var(--_warm-000);
    --line: var(--_warm-163);
    --line-2: var(--_warm-107);
    --line-strong: var(--_warm-426);
    --text: var(--_warm-920);
    --label: var(--_warm-711);
    --sub: var(--_warm-576);
    --faint: var(--_warm-576);

    --status-success-bg: var(--_green-054);
    --status-success-fg: var(--_green-659);
    --status-success-border: var(--_green-131);
    --status-success-icon: var(--_green-537);
    --status-info-bg: var(--_blue-061);
    --status-info-fg: var(--_blue-691);
    --status-info-border: var(--_blue-146);
    --status-info-icon: var(--_blue-602);
    --status-pending-bg: var(--_olive-056);
    --status-pending-fg: var(--_olive-701);
    --status-pending-border: var(--_olive-140);
    --status-pending-icon: var(--_olive-566);
    --status-warning-bg: var(--_amber-048);
    --status-warning-fg: var(--_amber-639);
    --status-warning-border: var(--_amber-126);
    --status-warning-icon: var(--_amber-416);
    --status-danger-bg: var(--_red-061);
    --status-danger-fg: var(--_red-682);
    --status-danger-border: var(--_red-146);
    --status-danger-icon: var(--_red-563);
    --status-critical-bg: var(--_red-689);
    --status-critical-fg: var(--_warm-000);
    --status-critical-border: var(--_red-689);
    --status-critical-icon: var(--_warm-000);
    --status-neutral-bg: var(--_warm-058);
    --status-neutral-fg: var(--_warm-576);
    --status-neutral-border: var(--_warm-163);
    --status-neutral-icon: var(--_warm-337);
    --critical: var(--_red-689);
    --critical-on: var(--_warm-000);

    --shadow-card: 0 1px 3px rgb(26 23 20 / 0.07);
    --shadow-floating-side: -14px 0 36px rgb(26 23 20 / 0.16);
    --shadow-floating-bottom: 0 -16px 50px rgb(26 23 20 / 0.16);

    --type-display-weight: 800;
    --type-page-title-weight: 800;
}

/* Operations only: Guest Next is light-only (I8.2). */
/* @semantic-dark */
[data-operations-theme="next"].dark,
[data-operations-theme="next"][data-color-mode="dark"],
[data-operations-theme="next"] [data-color-mode="dark"] {
    color-scheme: dark;

    --canvas: var(--_warm-944);
    --surface: var(--_warm-905);
    --raised: var(--_warm-864);
    --inset: var(--_warm-931);
    --floating: var(--_warm-844);
    --field: var(--_warm-931);
    --line: var(--_warm-807);
    --line-2: var(--_warm-840);
    --line-strong: var(--_warm-528);
    --text: var(--_warm-067);
    --label: var(--_warm-237);
    --sub: var(--_warm-337);
    --faint: var(--_warm-414);

    --status-success-bg: var(--_green-852);
    --status-success-fg: var(--_green-247);
    --status-success-border: var(--_green-737);
    --status-success-icon: var(--_green-341);
    --status-info-bg: var(--_blue-881);
    --status-info-fg: var(--_blue-251);
    --status-info-border: var(--_blue-776);
    --status-info-icon: var(--_blue-380);
    --status-pending-bg: var(--_olive-871);
    --status-pending-fg: var(--_olive-228);
    --status-pending-border: var(--_olive-760);
    --status-pending-icon: var(--_olive-366);
    --status-warning-bg: var(--_amber-862);
    --status-warning-fg: var(--_amber-232);
    --status-warning-border: var(--_amber-757);
    --status-warning-icon: var(--_amber-310);
    --status-danger-bg: var(--_red-878);
    --status-danger-fg: var(--_red-317);
    --status-danger-border: var(--_red-795);
    --status-danger-icon: var(--_red-410);
    --status-critical-bg: var(--_red-583);
    --status-critical-fg: var(--_warm-000);
    --status-critical-border: var(--_red-583);
    --status-critical-icon: var(--_warm-000);
    --status-neutral-bg: var(--_warm-900);
    --status-neutral-fg: var(--_warm-337);
    --status-neutral-border: var(--_warm-807);
    --status-neutral-icon: var(--_warm-563);
    --critical: var(--_red-583);
    --critical-on: var(--_warm-000);

    /* Dark elevation is a lighter surface, not a shadow. Only the floating layer keeps one. */
    --shadow-card: none;
    --shadow-floating-side: -14px 0 36px rgb(0 0 0 / 0.55);
    --shadow-floating-bottom: 0 -16px 50px rgb(0 0 0 / 0.55);

    /* Display weights drop from 800 to 700 in dark (DS §1.2). */
    --type-display-weight: 700;
    --type-page-title-weight: 700;
}

/* ─── Brand · four roles plus the ink. Inputs come from the server; fallbacks are FoodFlow's. ─── */

/* @brand-light */
[data-public-theme="next"],
[data-operations-theme="next"],
[data-public-theme="next"] [data-color-mode="light"],
[data-operations-theme="next"] [data-color-mode="light"] {
    --brand: var(--restaurant-brand, var(--_orange-436));
    --brand-on: var(--restaurant-brand-on, var(--_orange-948));
    --brand-text: var(--restaurant-brand-text, var(--_orange-544));
    --brand-soft: var(--restaurant-brand-soft, var(--_orange-037));
    --brand-ring: var(--restaurant-brand-ring, var(--_orange-436));
}

/* Operations only: Guest Next is light-only (I8.2). */
/* @brand-dark */
[data-operations-theme="next"].dark,
[data-operations-theme="next"][data-color-mode="dark"],
[data-operations-theme="next"] [data-color-mode="dark"] {
    --brand: var(--restaurant-brand, var(--_orange-436));
    --brand-on: var(--restaurant-brand-on, var(--_orange-948));
    --brand-text: var(--restaurant-brand-text-dark, var(--_orange-269));
    --brand-soft: var(--restaurant-brand-soft-dark, var(--_orange-872));
    --brand-ring: var(--restaurant-brand-ring-dark, var(--_orange-436));
}

/* ─── Guest-only (DS §2.4). Operations never declares these. ─── */

/* @guest-foundation */
[data-public-theme="next"] {
    --radius-panel: 12px;
    --radius-tracking: 13px;
    /* Hero scrim over #141008. The base never goes below 62 % (DS §5.3); text lives in the lower third. */
    --scrim-hero-strength: 0.62;
    --scrim-hero: linear-gradient(to top, rgb(20 16 8 / var(--scrim-hero-strength)) 0%, rgb(20 16 8 / var(--scrim-hero-strength)) 33.333%, rgb(20 16 8 / 0) 100%);
}

/* @guest-light */
[data-public-theme="next"],
[data-public-theme="next"] [data-color-mode="light"] {
    --surface-commercial: var(--_warm-047);
}

/* ─── Operations-only (handoff §4.4). Guest never declares these. ─── */

/* @ops-foundation */
[data-operations-theme="next"] {
    /* Urgency edge as one scale: table row · on time · new · closing soon · late · overdue. */
    --edge-row: 3px;
    --edge-on-time: 4px;
    --edge-new: 5px;
    --edge-due-soon: 6px;
    --edge-late: 8px;
    --edge-overdue: 10px;
}

/* @ops-light */
[data-operations-theme="next"],
[data-operations-theme="next"] [data-color-mode="light"] {
    --workspace: var(--_warm-090);
    --bar-bg: var(--_warm-048);
    --rail-bg: var(--_warm-078);
}

/* @ops-dark */
[data-operations-theme="next"].dark,
[data-operations-theme="next"][data-color-mode="dark"],
[data-operations-theme="next"] [data-color-mode="dark"] {
    --workspace: var(--_warm-959);
    --bar-bg: var(--_warm-920);
    --rail-bg: var(--_warm-930);
}

/*
 * ─── Salón physical materials (I4). Scoped to the floor root only — never :root, never the
 * rest of Operations (handoff §5.6). Plate and wood edge are DESIGN_SYSTEM §5.2 values; the
 * other materials are I4 implementation values (docs/themes/NEXT_OPERATIONS_FLOOR.md).
 */

/* @floor-light */
[data-operations-theme="next"] .ff-floor {
    --plate: #FBF7F0;
    --table-edge: #7A4F2A;
    --table-fill: #D8B993;
    --table-shadow: 0 2px 5px rgb(60 38 18 / 0.22);
    --chair-fill: #BE9B72;
    --chair-edge: #8C6A48;
    --floor-salon: var(--workspace);
    --floor-zone: #F3EEE5;
    --floor-zone-line: #D9D1C3;
    --floor-grid: rgb(26 23 20 / 0.12);
}

/* @floor-dark */
[data-operations-theme="next"].dark .ff-floor,
[data-operations-theme="next"] [data-color-mode="dark"] .ff-floor {
    --plate: #0E0B08;
    --table-edge: #9B7A5C;
    --table-fill: #4A3526;
    --table-shadow: 0 2px 6px rgb(0 0 0 / 0.55);
    --chair-fill: #3A2A1E;
    --chair-edge: #6E5440;
    --floor-salon: var(--workspace);
    --floor-zone: #1A1613;
    --floor-zone-line: #2E2823;
    --floor-grid: rgb(240 235 228 / 0.10);
}

/* @density-distance · KDS only. Reference 43" 1080p at 2 m; other screens scale --distance-scale (DS §5.4). */
[data-operations-theme="next"][data-density="distance"],
[data-operations-theme="next"] [data-density="distance"] {
    --type-metric-size: calc(32px * var(--distance-scale, 1));
    --type-body-size: calc(21px * var(--distance-scale, 1));
    --type-body-weight: 600;
    --type-body-strong-size: calc(21px * var(--distance-scale, 1));
    --type-chip-size: calc(12px * var(--distance-scale, 1));
    --type-numeric-size: calc(20px * var(--distance-scale, 1));
    --type-numeric-weight: 800;
    --type-control-size: calc(16.5px * var(--distance-scale, 1));
    --control-h: 54px;
    --icon-button: 44px;
}

/* @reduced-motion must stay the last token block: it overrides the motion scale. */
@media (prefers-reduced-motion: reduce) {
    /* @reduced-motion */
    [data-public-theme="next"],
    [data-operations-theme="next"] {
        --motion-enter: 0ms;
        --motion-exit: 0ms;
        --motion-expand: 0ms;
        --motion-state: 0ms;
        --motion-fade: 100ms;
    }
}

/* ─── Base · only inside a Next presentation root. ─── */

[data-public-theme="next"][data-next-root],
[data-public-theme="next"] [data-next-root],
[data-operations-theme="next"][data-next-root],
[data-operations-theme="next"] [data-next-root] {
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--leading-body);
    color: var(--text);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* A subtree that switches mode must repaint its own ink: inherited `color` was resolved above it. */
[data-public-theme="next"] [data-color-mode],
[data-operations-theme="next"] [data-color-mode] {
    color: var(--text);
}

/* One focus style: brand-ring outside the element, on the page ground, so it also shows on brand and critical fills. */
:is([data-public-theme="next"], [data-operations-theme="next"]) [data-next-root] :focus-visible,
:is([data-public-theme="next"], [data-operations-theme="next"])[data-next-root] :focus-visible,
:is([data-public-theme="next"], [data-operations-theme="next"]) :is(.ff-button, .ff-input):focus-visible {
    outline: var(--focus-width) solid var(--brand-ring);
    outline-offset: var(--focus-offset);
}

/* ─── Typography roles ─── */

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-display {
    font-size: var(--type-display-size);
    font-weight: var(--type-display-weight);
    letter-spacing: var(--type-display-tracking);
    line-height: var(--leading-tight);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-page-title {
    font-size: var(--type-page-title-size);
    font-weight: var(--type-page-title-weight);
    letter-spacing: var(--type-page-title-tracking);
    line-height: var(--leading-tight);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-section {
    font-size: var(--type-section-size);
    font-weight: var(--type-section-weight);
    letter-spacing: var(--type-section-tracking);
    line-height: var(--leading-snug);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-metric {
    font-size: var(--type-metric-size);
    font-weight: var(--type-metric-weight);
    letter-spacing: var(--type-metric-tracking);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-body {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--leading-body);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-body-strong {
    font-size: var(--type-body-strong-size);
    font-weight: var(--type-body-strong-weight);
    line-height: var(--leading-body);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-label {
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--leading-snug);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-eyebrow {
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-tracking);
    line-height: var(--leading-snug);
    text-transform: uppercase;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-chip {
    font-size: var(--type-chip-size);
    font-weight: var(--type-chip-weight);
    line-height: var(--leading-snug);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-numeric {
    font-size: var(--type-numeric-size);
    font-weight: var(--type-numeric-weight);
    line-height: var(--leading-snug);
    font-variant-numeric: tabular-nums;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-type-control {
    font-size: var(--type-control-size);
    font-weight: var(--type-control-weight);
    line-height: var(--leading-snug);
}

/* Money, times, quantities, codes, counters: always tabular. */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-num {
    font-variant-numeric: tabular-nums;
}

/* ─── numeric-row · figures in one row, hairline separators, no cards (DS §4.1). ─── */

/*
 * Every cell carries its leading hairline and gutter; the row is shifted left by exactly that
 * amount and clipped back, so whichever cell starts a line (first cell, or the first after a wrap)
 * shows neither. No :first-child rule, so wrapping into two rows stays clean.
 */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-numeric-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-4);
    margin: 0 0 0 calc(-1 * (var(--space-5) + var(--hairline)));
    clip-path: inset(0 0 0 calc(var(--space-5) + var(--hairline)));
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-numeric-row__cell {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0 var(--space-5);
    border-left: var(--hairline) solid var(--line);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-numeric-row__label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--sub);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-numeric-row__value {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--type-metric-size);
    font-weight: var(--type-metric-weight);
    letter-spacing: var(--type-metric-tracking);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-numeric-row__delta {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--sub);
}

/* ─── Buttons · three variants, one primary per screen (DS §4.1). ─── */

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--label);
    font: inherit;
    font-size: var(--type-control-size);
    font-weight: var(--type-control-weight);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-state) linear, border-color var(--motion-state) linear, box-shadow var(--motion-state) linear;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button:hover {
    border-color: var(--line-strong);
    background: var(--inset);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button--primary {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--brand-on);
}

/* Hover never changes the fill behind the ink: the brand-on contrast stays as measured. */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button--primary:hover {
    border-color: var(--brand);
    background: var(--brand);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-on) 28%, transparent);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--sub);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button--quiet:hover {
    border-color: transparent;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Destructive is secondary with danger ink and edge; never a solid fill. */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button--destructive {
    border-color: var(--status-danger-icon);
    color: var(--status-danger-fg);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button--destructive:hover {
    border-color: var(--status-danger-icon);
    background: var(--status-danger-bg);
}

/* Disabled stays visible: inset ground, faint ink, default cursor. */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-button:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--line);
    background: var(--inset);
    color: var(--faint);
    box-shadow: none;
    text-decoration: none;
    cursor: default;
}

/* ─── Fields (DS §4.1 · §7). Every input has a real <label>; requirement in words. ─── */

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-field__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--leading-snug);
    color: var(--label);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-field__requirement {
    font-weight: 500;
    color: var(--sub);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--field-h);
    padding: 0 var(--space-3);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-control);
    background: var(--field);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-input::placeholder {
    color: var(--faint);
    opacity: 1;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-input:focus-visible {
    border-color: var(--brand);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-input[aria-invalid="true"] {
    border-color: var(--status-danger-icon);
    box-shadow: 0 0 0 3px var(--status-danger-border);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-input:disabled {
    background: var(--inset);
    color: var(--faint);
    cursor: default;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-field__hint {
    margin: 0;
    font-size: var(--type-label-size);
    color: var(--sub);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-field__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--type-label-size);
    font-weight: 600;
    color: var(--status-danger-fg);
}

/* ─── Status chip · one component, seven states. Shape + word, never colour alone (DS §3). ─── */

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status {
    --_tone-bg: var(--status-neutral-bg);
    --_tone-fg: var(--status-neutral-fg);
    --_tone-border: var(--status-neutral-border);
    --_tone-icon: var(--status-neutral-icon);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: var(--hairline) solid var(--_tone-border);
    border-radius: var(--radius-chip);
    background: var(--_tone-bg);
    color: var(--_tone-fg);
    font-size: var(--type-chip-size);
    font-weight: var(--type-chip-weight);
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--motion-state) linear, color var(--motion-state) linear;
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--_tone-icon);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--success {
    --_tone-bg: var(--status-success-bg);
    --_tone-fg: var(--status-success-fg);
    --_tone-border: var(--status-success-border);
    --_tone-icon: var(--status-success-icon);
}

/* success is the only round mark. */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--success .ff-status__dot {
    border-radius: var(--radius-round);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--info {
    --_tone-bg: var(--status-info-bg);
    --_tone-fg: var(--status-info-fg);
    --_tone-border: var(--status-info-border);
    --_tone-icon: var(--status-info-icon);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--pending {
    --_tone-bg: var(--status-pending-bg);
    --_tone-fg: var(--status-pending-fg);
    --_tone-border: var(--status-pending-border);
    --_tone-icon: var(--status-pending-icon);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--warning {
    --_tone-bg: var(--status-warning-bg);
    --_tone-fg: var(--status-warning-fg);
    --_tone-border: var(--status-warning-border);
    --_tone-icon: var(--status-warning-icon);
}

:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--danger {
    --_tone-bg: var(--status-danger-bg);
    --_tone-fg: var(--status-danger-fg);
    --_tone-border: var(--status-danger-border);
    --_tone-icon: var(--status-danger-icon);
}

/* critical is the only solid fill; its cost is high on purpose. */
:is([data-public-theme="next"], [data-operations-theme="next"]) .ff-status--critical {
    --_tone-bg: var(--status-critical-bg);
    --_tone-fg: var(--status-critical-fg);
    --_tone-border: var(--status-critical-border);
    --_tone-icon: var(--status-critical-icon);
}