/* tokens.css — CSS custom properties
 * Gyro Suite design tokens, spec 28.5 / 28.6 / 28.10. Task P0-080.
 *
 * ORIGINATED from tools/build-tokens.mjs, and NO LONGER A COPY OF ITS OUTPUT.
 * The header used to say "GENERATED ... DO NOT EDIT BY HAND", and copying the
 * build over this file has since been the cause of two shipped defects, so the
 * header now says what is actually true. THIS is the file the browser loads —
 * AdminPanelProvider's panels::head.end hook links asset('css/tokens.css') —
 * while build-tokens.mjs writes to resources/design-tokens/out/, which is
 * gitignored and never deployed. tests/Feature/Accessibility/DeployedTokensTest
 * exists because of exactly that gap.
 *
 * THREE DELIBERATE HAND EDITS THE GENERATOR DOES NOT PRODUCE. Copying out/
 * over this file reverts all three:
 *
 *   1. the dark palette is gated on `.dark` so the OS preference alone cannot
 *      flip it out from under Filament's own mode switch;
 *   2. it is keyed to `html.dark`, which IS that switch;
 *   3. sprint 55: three dark values changed to close the row-state contrast
 *      shortfalls that the product's first inline table editors made live —
 *      bg.selected, ramp.neutral.600 and border.strong, each annotated below
 *      with what it was and what it measured.
 *
 * Built see git.
 */
:root {
  --color-ramp-neutral-50: #f7f7f8; /* Ramp step 50 (index of least prominence in each mode's ordering). Light: literal lightest grey, used for color.bg.page. Dark: literal darkest neutral, used for color.bg.page and color.bg.sunken — page is the darkest surface in dark mode, per spec 28.6. */
  --color-ramp-neutral-100: #eef0f1; /* Light: one step below page, used for color.bg.sunken / color.bg.hover / color.bg.disabled. Dark: reserved — part of the mandated 9-step ramp (spec 28.5), not yet aliased by a semantic token; held for a future light-toned dark-mode need (e.g. inverse chip fill) rather than invented on demand. */
  --color-ramp-neutral-200: #e2e4e6; /* Light: hairline grey, used for color.border.hairline and color.bg.selected. Dark: used for color.text.secondary — see the tension note in _meta on why dark-mode index-to-role mapping mirrors rather than repeats light mode's. */
  --color-ramp-neutral-300: #c9cdd1; /* Light: reserved — part of the mandated 9-step ramp, not yet aliased; held for a future divider/gridline need rather than invented on demand. Dark: used for color.text.muted AND (since sprint 55) color.border.strong — one grey serving both roles, exactly as ramp.neutral.500 already does in light mode, and for the same reason: a single value clears 3:1 on every ground either role lands on, so two near-identical greys would be a distinction with no measurement behind it. */
  --color-ramp-neutral-400: #9aa0a7; /* Light: used for color.text.disabled (disabled/read-only content is exempt from WCAG contrast minimums). Dark: RESERVED as of sprint 55 — it was color.border.strong, and at #75787d that boundary measured 2.86:1 on bg.hover and 2.11:1 on bg.selected, both under the 3:1 WCAG 1.4.11 requires of a control's edge. Harmless while the product shipped no inline table editors and a live failure the moment it shipped one, so border.strong moved up to ramp.neutral.300. The step is kept because the 9-step ramp is mandated by spec 28.5, not because anything aliases it. */
  --color-ramp-neutral-500: #767b82; /* Light: used for color.text.muted (claiming the 3:1 large/secondary-text allowance) AND color.border.strong — the same mid grey clears 3:1 against both white surface and page, so one value serves both roles honestly rather than forcing two near-identical greys to exist. Dark: used for color.text.disabled (exempt from contrast minimums). */
  --color-ramp-neutral-600: #565a61; /* Light: used for color.text.secondary. Dark: used for color.bg.selected — one step brighter than color.bg.hover so multi-select state remains distinguishable from row hover in a dense table, without introducing colour (see _meta on the 'nothing else is coloured' constraint). Sprint 55 moved the dark value from #454749 to #3d3e40: at #454749 the selected row was one step too light for every foreground that lands on it, and the change also made the two row-state steps EQUAL (surface -> hover 1.18:1, hover -> selected 1.18:1, where they were 1.17 and 1.35), so selection reads as one more step rather than a jump. */
  --color-ramp-neutral-700: #40444a; /* Light: reserved — part of the mandated 9-step ramp, not yet aliased; held for a future heading/icon-default need. Dark: used for color.border.hairline AND color.bg.hover — deliberately low-contrast against bg.surface; see the hairline contrast tension documented in _meta. */
  --color-ramp-neutral-800: #2c2f34; /* Light: reserved — part of the mandated 9-step ramp, not yet aliased. Dark: used for color.bg.surface — lighter than bg.page so cards/panels lift by lightness only, never by shadow, per spec 28.6. True neutral (R≈G≈B), no slate/zinc blue cast. */
  --color-ramp-neutral-900: #1a1d21; /* Light: used for color.text.primary — the ink colour. Dark: used for color.text.primary — near-white ink for dark mode, true neutral with no blue cast (explicitly not a slate/zinc hue). */
  --color-bg-page: #f7f7f8; /* App chrome background, the lightest grey in light mode. In dark mode this is the darkest surface — dark mode lifts by lightness from here, it never adds shadow. Mirrors ramp.neutral.50. */
  --color-bg-scrim: rgba(15, 23, 32, 0.45); /* The dimming layer behind a modal, drawer or command palette. DARK IN BOTH THEMES - that is the whole reason it exists rather than a color-mix over text.primary, which is what the command palette used until sprint 49 and which looked right in light mode and inverted in dark. A scrim pushes the page back so the panel comes forward; white over a dark UI does the opposite. Only its STRENGTH changes with the theme. */
  --color-bg-surface: #ffffff; /* Cards, table bodies, form panels, kanban cards. Pure white in light mode per spec 28.5/28.10 — deliberately NOT a ramp step, since white is the canvas colour, not a grey; this is the one semantic token whose literal isn't drawn from ramp.neutral (see _meta judgement call). In dark mode it is ramp.neutral.800, lighter than bg.page, so the panel lifts by lightness only. */
  --color-bg-sunken: #eef0f1; /* Recessed regions inside a surface: input wells, code/pre blocks, kanban column backgrounds, disabled sections. Mirrors ramp.neutral.100 in light mode. In dark mode it deliberately equals bg.page (ramp.neutral.50/dark) rather than adding a fourth dark tone — the recessed floor and the app floor read as the same near-black, which is how dark UIs typically signal 'this is a well, not a card'. */
  --color-bg-hover: #eef0f1; /* Row/item hover state for list view and kanban cards. Neutral only — hover is not one of the four accent uses, so no colour tint is applied. Mirrors ramp.neutral.100 (light) / ramp.neutral.700 (dark). */
  --color-bg-selected: #e2e4e6; /* Row/item selection state (e.g. list-view checkbox multi-select), one visible step past hover. Deliberately neutral, not accent-tinted: spec 28.5 reserves the single accent for the primary button, active nav item, focus ring and links — 'nothing else is coloured' — so bulk row selection is signalled by a stronger neutral fill plus (per 28.10) the row's own text/icons, never colour alone. Mirrors ramp.neutral.200 (light) / ramp.neutral.600 (dark). The DARK value is #3d3e40 as of sprint 55, down from #454749; see ramp.neutral.600 for the measurements and TokenContrastTest for the assertions that now cover this ground outright instead of recording it as debt. */
  --color-bg-disabled: #eef0f1; /* Judgement call, not in the required list: fill for read-only/locked form fields. ERPNext-style suites live and die by submitted-document lock state (a document becomes fully read-only after submit) — every canonical form view needs this. Not required to meet AA (disabled controls are exempt); reuses ramp.neutral.100/50 rather than inventing new raw colour. */
  --color-border-hairline: #e2e4e6; /* 1px structural divider for table rows/cells, panel seams, list separators — density's primary structural device in place of shadow. Measured at 1.27:1 (light) / 1.18:1 (dark) against bg.surface, well under the 3:1 UI-boundary target. This is an intentional trade, not an oversight — see _meta 'tensions'. It is decorative/structural rather than a WCAG 1.4.11 'boundary of a required UI component', so 3:1 is not the correct target for it; color.border.strong exists precisely for boundaries that do need 3:1. */
  --color-border-strong: #767b82; /* The AA-compliant boundary colour (≥3:1 against EVERY ground it can land on, which since sprint 55 explicitly includes the hovered and selected row) for anything WCAG 1.4.11 actually governs: input/select/textarea outlines, button outlines, checkbox/radio boundaries, the switch track of an inline ToggleColumn, the outer frame of a table or panel. Use this, not border.hairline, wherever a control's edge must be perceivable without colour or shape cues alone. Light is unchanged at ramp.neutral.500; DARK moved from ramp.neutral.400 (#75787d) to ramp.neutral.300 (#8d9198), taking the two row-state measurements from 2.86/2.11 to 4.00/3.38 and improving every other ground it sits on as well (3.37 -> 4.72 on bg.surface). */
  --color-text-primary: #1a1d21; /* Default body/label ink. Mirrors ramp.neutral.900. */
  --color-text-secondary: #565a61; /* Lower-emphasis body text: field helper copy, secondary metadata in list rows, timestamps. Full 4.5:1 body-text target, not the relaxed muted allowance. Mirrors ramp.neutral.600 (light) / ramp.neutral.200 (dark). */
  --color-text-muted: #767b82; /* Lowest-emphasis text: placeholder copy, empty-state captions, column sub-labels — always used at large size or as secondary/decorative annotation, never as the sole carrier of essential body copy. Claims the 3:1 large-text/secondary-use allowance, not 4.5:1. Mirrors ramp.neutral.500 (light) / ramp.neutral.300 (dark). */
  --color-text-disabled: #9aa0a7; /* Judgement call, not in the required list: label/value colour inside a locked field (pairs with color.bg.disabled). Exempt from AA minimums per WCAG's inactive-control exception. Mirrors ramp.neutral.400 (light) / ramp.neutral.500 (dark). */
  --color-text-inverse: #ffffff; /* Text/icon colour for content pinned to the opposite tone from the current theme — dark-filled elements in light mode (e.g. a dark tooltip, an ink-coloured badge) and light-filled elements in dark mode. Verified at 16.91:1 against ramp.neutral.900/light and 15.20:1 against ramp.neutral.50/dark, the fills such elements typically use. */
  --color-text-link: #0a5cc4; /* Identical value to color.accent.base in both modes — links are explicitly one of the single accent's four sanctioned uses (spec 28.5), not a separate colour. */
  --color-accent-base: #0a5cc4; /* The one accent. Used only for: primary button fill, active nav item, focus ring, and link text — spec 28.5's exhaustive list. Shifts to a lighter tint in dark mode (per 28.6) so it keeps working as light-on-dark text/fill rather than needing separate light/dark logic per use. */
  --color-accent-hover: #094fb0; /* Primary button hover. Light mode deepens toward ink (typical raised-button hover); dark mode brightens further, since the base is already a light tint and darkening it would move it toward the mid-grey ramp and read as 'disabled' instead of 'hovered'. */
  --color-accent-active: #084494; /* Primary button pressed state, one step past hover in the same direction. */
  --color-accent-subtle: #e6f0fc; /* Tint background for accent-coloured chips/pills and the active-nav-item background wash. Kept a distinct hue from color.status.info (teal, not blue) specifically so an accent tag is never mistaken for an info status chip, or vice versa — see _meta judgement call. */
  --color-accent-on: #ffffff; /* Text/icon colour used ON accent.base (the primary button label). 6.29:1 (light) / 6.28:1 (dark) against accent.base — both clear 4.5:1 with margin for bold small-caps button labels. */
  --color-accent-ring: #0a5cc4; /* Focus ring colour, same value as accent.base — one accent, one meaning. 5.87:1 (light) / 5.83:1 (dark) against bg.page, clearing the 3:1 non-text/UI-indicator target for focus visibility (WCAG 2.4.11) with room to spare. */
  --color-status-success-text: #0f6b3a; /* Success chip/inline text. Never a filled page region — appears only as chip text or inline status text, per spec 28.10. */
  --color-status-success-bg: #e3f5e9; /* Success chip background. 5.81:1 (light) / 8.02:1 (dark) text-on-bg. */
  --color-status-success-border: #b7e2c6; /* Chip border — definition without shadow, consistent with the hairline/border-not-shadow language throughout this system. */
  --color-status-warning-text: #8a5300; /* Warning chip/inline text. */
  --color-status-warning-bg: #fdf0d5; /* Warning chip background. 5.61:1 (light) / 8.43:1 (dark) text-on-bg. */
  --color-status-warning-border: #f0d59a; /* Chip border. */
  --color-status-danger-text: #b3261e; /* Danger/error chip and inline validation text. */
  --color-status-danger-bg: #fbe6e5; /* Danger chip background. 5.46:1 (light) / 8.07:1 (dark) text-on-bg. */
  --color-status-danger-border: #f0b8b4; /* Chip border. */
  --color-status-info-text: #0f6a72; /* Info chip/inline text. Deliberately teal, not the accent blue — see _meta judgement call on why status.info must not share the accent's hue. */
  --color-status-info-bg: #dff3f5; /* Info chip background. 5.50:1 (light) / 8.32:1 (dark) text-on-bg. */
  --color-status-info-border: #a9dde1; /* Chip border. */
  --focus-ring-color: #0a5cc4; /* Same hue as the interactive accent colour (color.accent.base), duplicated here as a literal per SCHEMA's JSON-not-CSS rule (this file cannot reference color.json's token; mPDF and the Tailwind theme both need a resolved value, not a cross-file pointer). Build step should assert this stays equal to color.accent.base. Reusing the accent hue means the ring visually says 'this is the interactive layer', consistent everywhere focus lands. Must independently meet a11y.contrast.ui (3:1) against every background/adjacent colour it can appear on, per WCAG 1.4.11 / 2.4.11 -- it is checked as a UI-boundary colour, not exempted for being 'just focus'. [derived from color.accent.ring at build time — focus ring is the accent by definition (spec 28.5)] */
  --motion-duration-instant: 120ms;
  --motion-duration-fast: 140ms;
  --motion-duration-base: 160ms;
  --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-reduced-duration: 80ms;
  --motion-reduced-easing: linear;
  --motion-reduced-transform-policy: opacity-and-color-only;
  --motion-allowed-hover-and-focus-state: background-color, border-color, color, outline-color;
  --motion-allowed-input-validation-state: background-color, border-color;
  --motion-allowed-disclosure: max-height, opacity;
  --motion-allowed-overlay-entry-exit: opacity, transform: translateY(<=8px);
  --motion-allowed-row-feedback: background-color;
  --motion-allowed-tab-panel-switch: opacity;
  --motion-allowed-skeleton-to-content: opacity;
  --motion-allowed-toast-notification: opacity, transform: translateY(<=4px);
  --motion-forbidden-page-load-entrance: forbidden;
  --motion-forbidden-chart-animation: forbidden;
  --motion-forbidden-carousel: forbidden;
  --motion-forbidden-skeleton-shimmer: forbidden;
  --motion-forbidden-decorative-micro-interaction: forbidden;
  --motion-forbidden-parallax-and-autoplay: forbidden;
  --motion-forbidden-outside-band: forbidden;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: solid;
  --focus-ring-css: outline: 2px solid var(--focus-ring-color); outline-offset: 2px;;
  --focus-ring-dense: outline: 2px solid var(--focus-ring-color); outline-offset: -1px;;
  --focus-visible-policy: focus-visible-default-with-forced-exceptions;
  --focus-visible-forced-cases: roving-tabindex-grid-cell, first-invalid-field-after-validation, modal-or-drawer-initial-focus, skip-to-content-target;
  --focus-lint-forbid-pattern: outline:\s*(none|0)\b;
  --a11y-contrast-body: 4.5;
  --a11y-contrast-large: 3;
  --a11y-contrast-ui: 3;
  --a11y-target-min: 24px;
  --a11y-target-row-action: 24px;
  --a11y-target-overflow-exception: equivalent-target;
  --a11y-rules-color-only: forbidden;
  --a11y-rules-loading: skeleton-not-spinner;
  --a11y-rules-label-association: required;
  --a11y-rules-error-announce-field: aria-live=polite;
  --a11y-rules-error-announce-submit: aria-live=assertive;
  --a11y-rules-grid-keyboard: roving-tabindex;
  --type-family-ui: -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;
  --type-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --type-family-numeric: -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;
  --type-numeric-variant: tabular-nums lining-nums;
  --type-numeric-feature-settings: 'tnum' 1, 'lnum' 1;
  --type-size-micro: 11px;
  --type-size-small: 12px;
  --type-size-base: 13.5px;
  --type-size-medium: 15px;
  --type-size-large: 18px;
  --type-size-display: 22px;
  --type-line-micro: 16px;
  --type-line-small: 16px;
  --type-line-base: 20px;
  --type-line-medium: 20px;
  --type-line-large: 24px;
  --type-line-display: 28px;
  --type-weight-normal: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --size-row-field: 32px;
  --size-row-table: 34px;
  --size-gap-section: 24px;
  --size-control-input: 32px;
  --size-control-button: 32px;
  --size-control-button-compact: 24px;
  --size-control-icon-button: 20px;
  --size-control-chip: 18px;
  --size-control-avatar: 24px;
  --size-control-avatar-compact: 20px;
  --size-pad-cell-y: 7px;
  --size-pad-cell-x: 8px;
  --size-pad-input-y: 5px;
  --size-pad-input-x: 8px;
  --radius-control: 4px;
  --radius-cell: 0px;
  --radius-chip: 999px;
  --radius-none: 0px;
  --icon-list: 16px;
  --icon-toolbar: 20px;
  --icon-stroke: 1.5px;
  --elevation-none: none;
  --elevation-overlay: 0 4px 16px rgba(15, 23, 32, 0.16);
}

/* Spec 28.6: honour prefers-color-scheme on first load, then the per-user toggle wins. */
@media (prefers-color-scheme: dark) {
  /* Gated on .dark so the OS preference alone can no longer flip the palette.
   * Filament owns the mode (its "system" setting already resolves the OS
   * preference into this class); when these two disagreed, the shell rendered
   * dark while every Filament component rendered light. */
  :root.dark:not([data-theme="light"]) {
    --color-ramp-neutral-50: #1c1d1f;
    --color-ramp-neutral-100: #cfd1d3;
    --color-ramp-neutral-200: #b7bac0;
    --color-ramp-neutral-300: #8d9198;
    --color-ramp-neutral-400: #75787d;
    --color-ramp-neutral-500: #5a5d61;
    --color-ramp-neutral-600: #3d3e40;
    --color-ramp-neutral-700: #313336;
    --color-ramp-neutral-800: #262729;
    --color-ramp-neutral-900: #e9eaec;
    --color-bg-page: #1c1d1f;
    --color-bg-scrim: rgba(8, 10, 12, 0.60); /* Stronger than light mode: the page and the panel are already close in lightness here, so a weaker scrim leaves too little between them. */
    --color-bg-surface: #262729;
    --color-bg-sunken: #1c1d1f;
    --color-bg-hover: #313336;
    --color-bg-selected: #3d3e40;
    --color-bg-disabled: #1c1d1f;
    --color-border-hairline: #313336;
    --color-border-strong: #8d9198;
    --color-text-primary: #e9eaec;
    --color-text-secondary: #b7bac0;
    --color-text-muted: #8d9198;
    --color-text-disabled: #5a5d61;
    --color-text-inverse: #12151a;
    --color-text-link: #4d9bf0;
    --color-accent-base: #4d9bf0;
    --color-accent-hover: #6badf5;
    --color-accent-active: #3a8bdc;
    --color-accent-subtle: #16304d;
    --color-accent-on: #0f1621;
    --color-accent-ring: #4d9bf0;
    --color-status-success-text: #7fd9a4;
    --color-status-success-bg: #123424;
    --color-status-success-border: #1f5c3d;
    --color-status-warning-text: #f0c375;
    --color-status-warning-bg: #3a2a08;
    --color-status-warning-border: #6b4e13;
    --color-status-danger-text: #f4a19c;
    --color-status-danger-bg: #3d1210;
    --color-status-danger-border: #6b201c;
    --color-status-info-text: #6cd4d9;
    --color-status-info-bg: #0c2e30;
    --color-status-info-border: #1f5457;
    --focus-ring-color: #4d9bf0;
  }
}

/* html.dark is Filament's switch. Keying the dark palette to it is what makes
 * BOTH modes correct: with the class, tokens and Filament components are dark
 * together; without it, both are light. */
[data-theme="dark"],
html.dark {
  --color-ramp-neutral-50: #1c1d1f;
  --color-ramp-neutral-100: #cfd1d3;
  --color-ramp-neutral-200: #b7bac0;
  --color-ramp-neutral-300: #8d9198;
  --color-ramp-neutral-400: #75787d;
  --color-ramp-neutral-500: #5a5d61;
  --color-ramp-neutral-600: #3d3e40;
  --color-ramp-neutral-700: #313336;
  --color-ramp-neutral-800: #262729;
  --color-ramp-neutral-900: #e9eaec;
  --color-bg-page: #1c1d1f;
  --color-bg-scrim: rgba(8, 10, 12, 0.60); /* Stronger than light mode: the page and the panel are already close in lightness here, so a weaker scrim leaves too little between them. */
  --color-bg-surface: #262729;
  --color-bg-sunken: #1c1d1f;
  --color-bg-hover: #313336;
  --color-bg-selected: #3d3e40;
  --color-bg-disabled: #1c1d1f;
  --color-border-hairline: #313336;
  --color-border-strong: #8d9198;
  --color-text-primary: #e9eaec;
  --color-text-secondary: #b7bac0;
  --color-text-muted: #8d9198;
  --color-text-disabled: #5a5d61;
  --color-text-inverse: #12151a;
  --color-text-link: #4d9bf0;
  --color-accent-base: #4d9bf0;
  --color-accent-hover: #6badf5;
  --color-accent-active: #3a8bdc;
  --color-accent-subtle: #16304d;
  --color-accent-on: #0f1621;
  --color-accent-ring: #4d9bf0;
  --color-status-success-text: #7fd9a4;
  --color-status-success-bg: #123424;
  --color-status-success-border: #1f5c3d;
  --color-status-warning-text: #f0c375;
  --color-status-warning-bg: #3a2a08;
  --color-status-warning-border: #6b4e13;
  --color-status-danger-text: #f4a19c;
  --color-status-danger-bg: #3d1210;
  --color-status-danger-border: #6b201c;
  --color-status-info-text: #6cd4d9;
  --color-status-info-bg: #0c2e30;
  --color-status-info-border: #1f5457;
  --focus-ring-color: #4d9bf0;
}

/* Spec 28.5: an always-visible 2px accent focus ring. `outline: none` is forbidden
 * and is enforced by tools/token-lint.mjs. Outline, not box-shadow: it survives an
 * ancestor overflow:hidden, it is honoured by forced-colors mode, and it does not
 * compete with the one permitted overlay shadow. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset, 2px);
}
/* Dense grids use a roving tabindex, so exactly one cell is focusable at a time; the
 * ring is drawn inside the cell so it does not merge with the gridlines. */
:where([role="grid"], [role="treegrid"]) :where(td, th, [role="gridcell"]):focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
  outline-offset: -1px;
}

/* Spec 28.10. Reduced motion is NOT 0s: a 0s transition is not reliably guaranteed to
 * fire transitionend, which hangs any component awaiting it, and an instant cut can be
 * harder to follow than a fast tween. Movement is what triggers vestibular symptoms, so
 * movement is what is removed — colour and opacity changes are kept, just shorter. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 80ms;
    --motion-easing: linear;
    --motion-transform-policy: opacity-and-color-only;
  }
  *, *::before, *::after {
    animation-duration: var(--motion-duration-base) !important;
    transition-duration: var(--motion-duration-base) !important;
    scroll-behavior: auto !important;
  }
}