/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --dinova-appbar-background: rgba(0, 0, 0, 0); /** Bar fill; the Android set binds the Surface/Brand semantic on every variant (previously the Apple/700 primitive), so it flips with dark mode. The reworked web Format set carries NO fill on either variant — the bar rides the page surface — so web overrides to transparent (verbatim; the dark logo text and green nav buttons confirm the unfilled bar is intentional) */
  --dinova-appbar-action-target: 48px; /** Leading/trailing action touch target */
  --dinova-appbar-action-state-layer: 40px; /** Visible circular state layer inside the action target */
  --dinova-appbar-action-icon: 24px; /** Leading/trailing action icon, centred in the state layer */
  --dinova-badge-radius: 100px; /** Fully-rounded pill / dot */
  --dinova-badge-border-width: 1px; /** Ring width; both Small and Large carry a 1px stroke in the current Android/web sets (was 2px in the retired overlay variants) */
  --dinova-badge-size-small-height: 6px;
  --dinova-badge-size-large-height: 16px;
  --dinova-button-radius: 100px; /** Fully-rounded pill (Android/web); iOS uses 24px */
  --dinova-button-border-width: 1px; /** Ghost/outlined and binary border */
  --dinova-button-disabled-opacity: 0.38; /** Content opacity applied to disabled buttons */
  --dinova-button-size-xsmall-height: 32px;
  --dinova-button-size-xsmall-target: 48px; /** Outer touch target; Android wraps the visible button in this */
  --dinova-button-size-xsmall-padding-y: 6px;
  --dinova-button-size-xsmall-icon: 20px;
  --dinova-button-size-small-height: 40px;
  --dinova-button-size-small-target: 48px; /** Outer touch target; Android wraps the visible button in this */
  --dinova-button-size-small-padding-y: 10px;
  --dinova-button-size-small-icon: 20px;
  --dinova-button-size-medium-height: 52px;
  --dinova-button-size-medium-target: 52px; /** Outer touch target; Android wraps the visible button in this (Medium's target equals its visible height) */
  --dinova-button-size-medium-icon: 24px;
  --dinova-button-focus-ring-width: 1px; /** Measured stroke weight; the Figma set description claims 3px — see sync report */
  --dinova-button-focus-ring-offset: 2px;
  --dinova-button-binary-height: 26px;
  --dinova-button-binary-padding-y: 3px;
  --dinova-button-binary-radius: 24px;
  --dinova-button-segmented-height: 32px;
  --dinova-button-segmented-radius: 100px;
  --dinova-button-segmented-segment-height: 28px;
  --dinova-button-segmented-segment-radius: 20px;
  --dinova-button-segmented-segment-padding-x: 6px;
  --dinova-button-segmented-segment-padding-y: 3px;
  --dinova-button-segmented-segment-border-width: 1px; /** Selected segment only */
  --dinova-segmentedbutton-radius: 100px; /** Pill radius on the group's OUTER corners only (first segment's left pair, last segment's right pair); middle segments and inner corners are square */
  --dinova-segmentedbutton-border-width: 1px;
  --dinova-segmentedbutton-padding-y: 10px; /** Off-scale */
  --dinova-segmentedbutton-icon: 18px; /** Selected-state check icon frame */
  --dinova-segmentedbutton-size-density-0-target: 48px;
  --dinova-segmentedbutton-size-density-0-height: 40px;
  --dinova-segmentedbutton-size-density-1-target: 44px;
  --dinova-segmentedbutton-size-density-1-height: 36px;
  --dinova-segmentedbutton-size-density-2-target: 40px;
  --dinova-segmentedbutton-size-density-2-height: 32px;
  --dinova-segmentedbutton-size-density-3-target: 36px;
  --dinova-segmentedbutton-size-density-3-height: 28px;
  --dinova-card-radius: 20px; /** Corner radius, identical on every Style/State variant */
  --dinova-card-border-width: 1px; /** Outlined style resting stroke weight */
  --dinova-card-border-focus-width: 2px;
  --dinova-checkbox-size: 18px; /** Visible checkbox container (Android 'container'); iOS draws the box at 24px with no touch-target wrapper */
  --dinova-checkbox-radius: 2px; /** Container corner radius; iOS uses a softer 6px */
  --dinova-checkbox-border-width: 2px; /** Container stroke weight, unselected and disabled states (same on both platforms) */
  --dinova-checkbox-target: 48px; /** Outer touch target; Android/web wrap the state layer in this. iOS has no wrapper — the 24px box is the whole component. */
  --dinova-checkbox-icon: 24px; /** Check / indeterminate-dash icon frame on Android/web. iOS draws a 14x10 stroked checkmark vector (2.5px) instead of an icon frame — structural difference, no override. */
  --dinova-checkbox-disabled-opacity: 0.38; /** Opacity applied to the whole disabled checkbox; iOS uses 0.40 */
  --dinova-checkbox-state-layer-size: 40px;
  --dinova-checkbox-state-layer-radius: 100px;
  --dinova-checkbox-state-layer-padding: 11px; /** Off-scale inset from the 40px state layer to the 18px container */
  --dinova-checkbox-focus-ring-width: 3px;
  --dinova-checkbox-focus-ring-offset: 2px; /** 44px indicator around the 40px state layer */
  --dinova-chip-height: 32px; /** Visible chip container height; the chip has no outer touch-target wrapper */
  --dinova-chip-radius: 10px; /** Container corner radius */
  --dinova-chip-border-width: 1px; /** Outlined container stroke; selected chips drop the stroke for a filled background */
  --dinova-chip-icon: 18px; /** Leading (checkmark) and trailing icon frame */
  --dinova-chip-padding-y: 6px; /** Off-scale vertical padding around the 20px label line */
  --dinova-chip-disabled-opacity: 0.38; /** Opacity applied to the label (and leading icon) of disabled chips; the container itself is not dimmed */
  --dinova-chip-focus-ring-width: 3px;
  --dinova-chip-focus-ring-offset: 2px;
  --dinova-colors-black: #000000;
  --dinova-colors-white: #ffffff;
  --dinova-colors-apple-25: #f3fbf4;
  --dinova-colors-apple-50: #e7f7e9;
  --dinova-colors-apple-100: #c5eac8;
  --dinova-colors-apple-200: #a0dca5;
  --dinova-colors-apple-300: #77cf80;
  --dinova-colors-apple-350: #66ca72;
  --dinova-colors-apple-400: #55c464;
  --dinova-colors-apple-500: #30b947;
  --dinova-colors-apple-600: #27a03d;
  --dinova-colors-apple-650: #248835;
  --dinova-colors-apple-700: #1f672a;
  --dinova-colors-apple-800: #14411c;
  --dinova-colors-cherry-25: #fef5f6;
  --dinova-colors-cherry-50: #fceaed;
  --dinova-colors-cherry-100: #f8d4da;
  --dinova-colors-cherry-200: #f1a9b5;
  --dinova-colors-cherry-250: #ee94a3;
  --dinova-colors-cherry-300: #eb7e90;
  --dinova-colors-cherry-400: #e4536b;
  --dinova-colors-cherry-500: #dd2846;
  --dinova-colors-cherry-600: #b12038;
  --dinova-colors-cherry-700: #841b2a;
  --dinova-colors-cherry-800: #5b101c;
  --dinova-colors-grain-25: #fffcf0;
  --dinova-colors-grain-50: #fff8e1;
  --dinova-colors-grain-100: #ffecb3;
  --dinova-colors-grain-200: #ffd54f;
  --dinova-colors-grain-300: #ffca28;
  --dinova-colors-grain-350: #ffc618;
  --dinova-colors-grain-400: #ffc107;
  --dinova-colors-grain-500: #ffb300;
  --dinova-colors-grain-600: #ff9500;
  --dinova-colors-grain-700: #f16c06;
  --dinova-colors-grain-800: #be5108;
  --dinova-colors-slate-25: #f8fafb;
  --dinova-colors-slate-50: #f1f4f7;
  --dinova-colors-slate-100: #e0e4e7;
  --dinova-colors-slate-150: #d1d7db;
  --dinova-colors-slate-200: #c1c9cf;
  --dinova-colors-slate-300: #a1adb6;
  --dinova-colors-slate-400: #82929e;
  --dinova-colors-slate-450: #8a9ba7;
  --dinova-colors-slate-500: #637786;
  --dinova-colors-slate-550: #5b6d7b;
  --dinova-colors-slate-600: #4f5f6b;
  --dinova-colors-slate-700: #3b4750;
  --dinova-colors-slate-800: #283036;
  --dinova-colors-slate-900: #16191b;
  --dinova-datepicker-modal-container-width: 360px; /** Dialog width (Day/Year types); Full-screen (range) spans the screen */
  --dinova-datepicker-modal-container-radius: 28px; /** Dialog corner radius (Day/Year types); Full-screen (range) is square-cornered */
  --dinova-datepicker-modal-header-divider-width: 1px;
  --dinova-datepicker-modal-weekday-size: 48px; /** Square weekday cell, matching the day-cell grid */
  --dinova-datepicker-modal-cell-size: 48px; /** Cell hit target */
  --dinova-datepicker-modal-cell-container: 40px; /** Visible day circle inside the 48px hit target */
  --dinova-datepicker-modal-cell-radius: 100px; /** Fully-rounded day circle */
  --dinova-datepicker-modal-cell-disabled-opacity: 0.38; /** Opacity applied to the whole disabled cell (matches the house 0.38 used by button/checkbox) */
  --dinova-datepicker-calendar-header-height: 40px;
  --dinova-datepicker-calendar-grid-row-gap: 7px; /** Off-scale vertical gap between week rows */
  --dinova-datepicker-calendar-day-size: 44px; /** Day cell and its selection circle */
  --dinova-datepicker-calendar-day-selected-background-opacity: 0.12;
  --dinova-datepicker-calendar-separator-width: 1px;
  --dinova-datepicker-calendar-compact-radius: 10px;
  --dinova-dialog-radius: 28px; /** Container corner radius; iOS uses a tighter 20px */
  --dinova-dialog-max-width: 312px; /** Dialog width in Figma (all Android variants); iOS draws at 320px */
  --dinova-dialog-icon-size: 24px;
  --dinova-dialog-divider-width: 1px;
  --dinova-grid-iphone-width: 390px; /** Reference viewport width */
  --dinova-grid-iphone-columns: 4;
  --dinova-grid-iphone-margin: 6px;
  --dinova-grid-iphone-gutter: 6px;
  --dinova-grid-ipad-width: 820px; /** Reference viewport width */
  --dinova-grid-ipad-columns: 8;
  --dinova-grid-ipad-margin: 24px;
  --dinova-grid-ipad-gutter: 20px;
  --dinova-grid-android-width: 360px; /** Reference viewport width */
  --dinova-grid-android-columns: 4;
  --dinova-grid-android-margin: 6px;
  --dinova-grid-android-gutter: 6px;
  --dinova-list-row-icon: 20px; /** Leading icon and trailing chevron frame; iOS draws both at 24px */
  --dinova-list-row-divider-width: 1px; /** Android draws it as a 1px bottom stroke on the row; iOS as a _Divider instance with a 1px top stroke — same weight and color */
  --dinova-list-row-image-radius: 5px; /** Image slot corner radius. The images themselves are content; only the slot is tokenized */
  --dinova-list-row-size-regular-height: 56px;
  --dinova-list-row-size-regular-image: 68px; /** Square image slot edge */
  --dinova-list-row-size-tall-height: 72px;
  --dinova-list-row-size-tall-image: 68px;
  --dinova-list-row-size-x-tall-height: 96px; /** Image variant; Android X Tall hugs 75-96px depending on enabled parts (see sync report) */
  --dinova-list-row-size-x-tall-padding-y: 14px; /** Image variant; non-image X Tall variants measure 15-16px — inconsistent in Figma, see sync report */
  --dinova-list-row-size-x-tall-image: 68px;
  --dinova-list-row-size-feature-height: 140px; /** 'Restaurant Feature' size */
  --dinova-list-row-size-feature-padding-y: 14px;
  --dinova-list-row-size-feature-image: 112px;
  --dinova-list-expanding-row-header-height: 56px; /** Single-line header row */
  --dinova-list-expanding-row-header-padding-y: 10px;
  --dinova-list-expanding-row-disclosure-size: 32px; /** Android renders a circular 32px-wide icon button; iOS a bare 24px chevron icon — anatomies differ, sizes map */
  --dinova-list-expanding-row-border-width: 1px;
  --dinova-list-expanding-row-view-all-height: 48px;
  --dinova-list-swipe-height-regular: 52px;
  --dinova-list-swipe-height-tall: 68px;
  --dinova-list-swipe-gap: 10px; /** Row-content-to-action spacing while swiped (also action-to-action) */
  --dinova-list-swipe-content-radius: 100px; /** Pill radius applied to the row content while swiped open */
  --dinova-list-swipe-action-size: 52px; /** Circular action button, Regular height; the Tall variant draws a 50px circle with a label above */
  --dinova-list-swipe-action-radius: 100px;
  --dinova-list-swipe-action-icon: 24px;
  --dinova-menu-min-width: 208px; /** Width of the composed Android 'Menu' set (all variants); treat as the menu's minimum/default width */
  --dinova-menu-radius: 16px; /** Outer container corner radius; the last item's bottom corners round to match it inside the clip */
  --dinova-menu-group-radius: 8px; /** Corner radius of each group section when the menu has multiple groups */
  --dinova-menu-item-target: 48px; /** Full row height including the row insets — the Android touch target */
  --dinova-menu-item-height: 44px; /** Visible content / state-layer height inside the 48px row */
  --dinova-menu-item-radius: 4px; /** Content / state-layer corner radius */
  --dinova-menu-item-icon-size: 20px; /** Leading/trailing element frame; the glyph vector inside draws at ~16.7px */
  --dinova-menu-label-height: 32px; /** Header content height, excluding the divider below it */
  --dinova-menu-label-padding-top: 6px; /** Off-scale top inset above the header text */
  --dinova-menu-divider-width: 1px; /** Line stroke weight */
  --dinova-motion-duration-fast: 100ms; /** Micro-interactions */
  --dinova-motion-duration-normal: 200ms; /** Standard transitions */
  --dinova-motion-duration-slow: 300ms; /** Page transitions */
  --dinova-motion-duration-xslow: 500ms; /** Complex animations */
  --dinova-motion-easing-standard: ease-in-out; /** Most UI motion */
  --dinova-motion-easing-decelerate: ease-out; /** Elements entering */
  --dinova-motion-easing-accelerate: ease-in; /** Elements leaving */
  --dinova-progressindicator-height: 12px; /** Bar component frame height around the 8px track (2px breathing room each side). The iOS comps sit the 6px track in a 44px touch-row frame — a layout concern, not a bar height, so no override. */
  --dinova-progressindicator-track-height: 8px; /** Track thickness; iOS draws a slimmer 6px track */
  --dinova-progressindicator-track-radius: 4px; /** Full-round pill for the 8px track; iOS 'Progress bar' uses 3px (pill for its 6px track) — the iOS labeled set's 4px disagrees, see sync report */
  --dinova-progressindicator-fill-height: 8px; /** Indicator thickness (Android segment stroke weight); iOS fill is 6px */
  --dinova-progressindicator-fill-radius: 4px; /** Full-round pill cap on the 8px indicator. The Android kit segment vectors carry inconsistent 24/4 corner radii (both clamp to this pill) — see sync report. iOS uses 3px (pill for 6px). */
  --dinova-progressindicator-stop-size: 4px;
  --dinova-radiobutton-size: 20px; /** Visible radio glyph (the ring) on Android/web — a 20px vector centered in the 24px icon frame; iOS draws the ring at 24px with no touch-target wrapper */
  --dinova-radiobutton-icon: 24px; /** Icon frame hosting the radio glyph on Android/web (inner bounds of the state layer). iOS's whole component is this size: a 24px circle with a 2px stroke ring and a 10px inner dot when selected — those two dimensions are baked into the Android vector glyph and only measurable on iOS, so they are not tokenized (see sync report). */
  --dinova-radiobutton-target: 48px; /** Outer touch target; Android/web wrap the state layer in this. iOS has no wrapper — the 24px circle is the whole component. */
  --dinova-radiobutton-disabled-opacity: 0.38; /** Opacity Android/web apply to the 24px icon instance in Disabled states (on top of the #a1adb6 glyph fill). iOS uses distinct disabled colors instead of opacity, so this ships to web and Android only. */
  --dinova-radiobutton-state-layer-size: 40px;
  --dinova-radiobutton-state-layer-radius: 100px;
  --dinova-radiobutton-focus-ring-width: 3px;
  --dinova-radiobutton-focus-ring-offset: 2px; /** 44px indicator around the 40px state layer */
  --dinova-sheet-radius: 28px; /** Top-corner radius only; bottom corners are square (the sheet is anchored to the bottom edge). iOS rounds softer at 38px. */
  --dinova-sheet-handle-width: 32px;
  --dinova-sheet-handle-height: 4px;
  --dinova-sheet-handle-radius: 100px; /** Fully-rounded pill on both platforms */
  --dinova-snackbar-radius: 4px;
  --dinova-snackbar-min-height: 48px; /** Single-line height; Two-line variants measure 68px and Two-line longer (action stacked on its own row) 112px — taller heights derive from content plus padding */
  --dinova-snackbar-padding-y: 14px; /** Off-scale vertical inset around the supporting text */
  --dinova-snackbar-action-height: 40px;
  --dinova-snackbar-action-radius: 100px;
  --dinova-snackbar-action-padding-y: 10px; /** Off-scale */
  --dinova-snackbar-close-target: 48px;
  --dinova-snackbar-close-size: 40px; /** Visible circular state-layer container */
  --dinova-snackbar-close-radius: 100px;
  --dinova-snackbar-close-icon: 24px; /** Icon frame (glyph vector draws at 18px inside it) */
  --dinova-snackbar-toast-height: 52px;
  --dinova-snackbar-toast-radius: 12px;
  --dinova-snackbar-toast-padding-x: 14px; /** Off-scale leading inset (measured; trailing measures 10px in the absolute-positioned source) */
  --dinova-snackbar-toast-gap: 6px; /** Off-scale icon-to-message spacing (measured; message-to-Dismiss measures 10px) */
  --dinova-snackbar-toast-icon: 24px; /** Type icon frame (glyph vector draws at 19.2px inside it) */
  --dinova-snackbar-banner-height: 64px;
  --dinova-snackbar-banner-accent-width: 4px; /** Leading accent bar, full component height */
  --dinova-snackbar-banner-icon: 24px; /** Leading type icon and trailing close icon frames (glyph vectors draw at 18-19.5px inside) */
  --dinova-spacing-0: 0px;
  --dinova-spacing-1: 2px;
  --dinova-spacing-2: 4px;
  --dinova-spacing-3: 8px;
  --dinova-spacing-4: 12px;
  --dinova-spacing-5: 16px;
  --dinova-spacing-6: 20px;
  --dinova-spacing-7: 24px;
  --dinova-spacing-8: 32px;
  --dinova-spacing-9: 40px;
  --dinova-spacing-10: 48px;
  --dinova-spacing-11: 56px;
  --dinova-spacing-12: 64px;
  --dinova-spacing-13: 80px;
  --dinova-spacing-14: 96px;
  --dinova-text-fonts-aptos-new: 'Aptos Display', sans-serif; /** Aptos (Display cut) — the brand-tier heading font on every platform. On web the 'Aptos Display' family is registered by the generated web/fonts.css @font-face; native apps bundle the ttf listed in their fonts/manifest.<platform>.json. */
  --dinova-text-fonts-inter: Inter, sans-serif; /** Inter — the web body font (Regular/Medium/SemiBold/Bold woff2 registered by the generated web/fonts.css, served alongside the tokens; the web face of every system-tier style via text.fonts.system_display/system_text). The Bold cut still ships natively as Inter-Bold.ttf, left over from when Figma built Display/Large + Headline/Large in Inter Bold — as of the 2026-08-14 sync those styles are Aptos on every platform, so no token references Inter natively any more. Dropping the native cut is a distribution change, pending design/eng sign-off. */
  --dinova-text-weights-regular: 400;
  --dinova-text-weights-medium: 500; /** SF Pro Medium / Roboto Medium / Inter Medium — label styles. */
  --dinova-text-weights-semibold: 600; /** 600 on iOS/web; the Android build transforms this to 500 (Roboto Medium — Roboto has no 600 cut). See fontWeight/android in build.mjs. */
  --dinova-text-weights-bold: 700;
  --dinova-text-weights-extrabold: 800; /** Aptos ExtraBold — DisplayXLarge only. The shipped cut is the Text optical size (Microsoft has no Display ExtraBold). iOS maps 800 to UIFont.Weight.heavy. */
  --dinova-textfield-height: 56px; /** The field box itself; supporting text sits below it */
  --dinova-textfield-radius: 10px; /** Outlined container radius; iOS rounds its track-filled box the same. The Filled style is square — see radius-filled. */
  --dinova-textfield-radius-filled: 0px;
  --dinova-textfield-border-width: 1px; /** Resting border (Outlined) and active indicator (Filled); Focused and Error double it — see border-width-active */
  --dinova-textfield-border-width-active: 2px;
  --dinova-textfield-floating-label-radius: 3px; /** Off-scale */
  --dinova-textfield-icon-target: 48px;
  --dinova-textfield-icon-state-layer: 40px;
  --dinova-textfield-icon-size: 20px;
  --dinova-textfield-disabled-opacity: 0.38; /** Applied to the disabled label text, trailing icon, active indicator and supporting text; iOS uses distinct disabled colors instead */
  --dinova-textfield-disabled-wash-opacity: 0.04; /** The 'disabled-state-color' overlay rectangle washing the whole field. Its paint binds Text/Disabled on the Filled variants but a 1px Semantic/Info/Border STROKE on the Outlined ones — the outlined binding is mockup-grade debris, flagged; only the wash opacity and the Filled fill are tokenized. */
  --dinova-toggleswitch-track-width: 52px; /** Track (switch body) width; iOS draws a wider 64px track */
  --dinova-toggleswitch-track-height: 32px; /** Track height; iOS uses a shorter 28px track */
  --dinova-toggleswitch-track-radius: 100px; /** Full-pill track corner radius (same on both platforms) */
  --dinova-toggleswitch-track-border-width: 2px; /** Track outline, unselected and unselected-disabled states only; iOS draws no track outline in any state */
  --dinova-toggleswitch-thumb-size: 24px; /** Selected-thumb diameter; also the iOS knob height */
  --dinova-toggleswitch-thumb-size-unselected: 16px; /** M3-style smaller unselected thumb (grows to 24px when an icon is shown — see size-with-icon); the iOS knob stays 24px tall in both positions */
  --dinova-toggleswitch-thumb-size-with-icon: 24px; /** Unselected thumb when the Icon variant is on — Android/web only (iOS has no in-thumb icon) */
  --dinova-toggleswitch-thumb-size-pressed: 28px; /** Thumb grows while pressed (both selected and unselected) on the Android/web set; iOS is touch-only with no Pressed variant, so it ships web/Android */
  --dinova-toggleswitch-thumb-radius: 24px; /** Fully-rounded thumb (radius >= half of every thumb size); iOS knob is drawn at radius 100 */
  --dinova-toggleswitch-target: 48px; /** Outer touch target wrapped around the thumb on Android/web ('Target' frame). iOS has no touch-target wrapper — the 64x28 track is the whole component. */
  --dinova-toggleswitch-icon-size: 16px;
  --dinova-toggleswitch-disabled-opacity: 0.38; /** Applied to the unselected disabled thumb and to disabled in-thumb icons — not to the whole component (the track and selected disabled thumb use disabled theme colors at full opacity). iOS shows no opacity dimming, so this ships web/Android. */
  --dinova-toggleswitch-state-layer-size: 40px;
  --dinova-toggleswitch-state-layer-radius: 100px;
  --dinova-toggleswitch-state-layer-opacity-hover: 0.08; /** Paint opacity on the hover state-layer fill */
  --dinova-toggleswitch-state-layer-opacity-focused: 0.1; /** Paint opacity on the focused state-layer fill */
  --dinova-toggleswitch-state-layer-opacity-pressed: 0.1; /** Paint opacity on the pressed state-layer fill */
  --dinova-toggleswitch-focus-ring-width: 3px;
  --dinova-toggleswitch-focus-ring-offset: 2px; /** 56x36 indicator around the 52x32 track */
  --dinova-theme-elevation-0: none; /** Flat · no shadow */
  --dinova-theme-elevation-1: 0px 2px 8px 1px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04); /** Cards, list items · subtle lift */
  --dinova-theme-elevation-2: 0px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 1px 1px 0px rgba(0, 0, 0, 0.04); /** Menus, Dropdowns, tooltips · medium lift */
  --dinova-theme-elevation-3: 0px 6px 24px 4px rgba(0, 0, 0, 0.18), 0px 2px 6px 2px rgba(0, 0, 0, 0.04); /** Bottom sheets, drawers  and action sheets· strong lift */
  --dinova-theme-elevation-4: 0px 16px 40px 16px rgba(0, 0, 0, 0.16), 0px 4px 12px 8px rgba(0, 0, 0, 0.08); /** Dialogs, modals · maximum lift */
  --dinova-appbar-title-padding-x: 24px; /** Web-only: horizontal padding of the text row (the logo + desktop nav buttons row) — 24 on both Format variants, and also the icons row's trailing edge */
  --dinova-appbar-row-gap: 8px; /** Web-only: vertical gap between the icons row and the text row — 8 on both Format variants */
  --dinova-appbar-padding-b: 12px; /** Web-only: the bar's own bottom padding beneath the text row — 12 on both Format variants (the rows carry no bottom padding of their own) */
  --dinova-appbar-padding-x: 8px; /** Horizontal edge padding of the bar (Android uses 4 on both the single-row roots and the two-row icon rows); the web Format set's icons row pads 8 on its leading edge (both variants) — its trailing edge is 24, aligning with title-padding-x */
  --dinova-appbar-padding-y: 8px; /** Top padding of the icons row (8 on the web Format set too; its bottom padding is 0 — the bar's padding-b carries the bottom inset) */
  --dinova-appbar-gap: 8px; /** Space between the leading action, the content and the trailing actions; the web Format set uses 8 between trailing actions and between the desktop nav buttons */
  --dinova-badge-size-small-padding-x: 2px;
  --dinova-badge-size-small-padding-y: 2px;
  --dinova-badge-size-large-padding-x: 4px;
  --dinova-badge-size-large-padding-y: 0px;
  --dinova-button-size-xsmall-padding-x: 12px;
  --dinova-button-size-xsmall-gap: 4px; /** Icon-to-label spacing */
  --dinova-button-size-small-padding-x: 16px;
  --dinova-button-size-small-gap: 8px; /** Icon-to-label spacing */
  --dinova-button-size-medium-padding-x: 24px;
  --dinova-button-size-medium-padding-y: 16px;
  --dinova-button-size-medium-gap: 8px; /** Icon-to-label spacing */
  --dinova-button-binary-padding-x: 16px;
  --dinova-button-segmented-padding: 2px; /** Track inset around the segments */
  --dinova-button-segmented-gap: 4px; /** Segment-to-segment spacing */
  --dinova-segmentedbutton-target-padding: 4px; /** Vertical inset from the touch target to the visible container (the segment instance pads 4px top/bottom) */
  --dinova-segmentedbutton-padding-x: 12px;
  --dinova-segmentedbutton-gap: 8px; /** Check-icon-to-label spacing inside a selected segment */
  --dinova-card-padding: 16px; /** Inset around the Content slot, uniform on all four sides (16px) */
  --dinova-card-gap: 4px; /** Vertical spacing between stacked items in the Content slot (4px) */
  --dinova-checkbox-target-padding: 4px; /** Inset from the 48px touch target to the 40px state layer */
  --dinova-chip-gap: 8px; /** Icon-to-label spacing */
  --dinova-chip-padding-x: 16px; /** Horizontal padding on a side with no adjacent icon */
  --dinova-chip-padding-x-icon: 8px; /** Horizontal padding on a side that ends in an icon (leading checkmark or trailing icon) */
  --dinova-datepicker-modal-header-padding-top: 16px;
  --dinova-datepicker-modal-header-padding-right: 12px; /** Tighter than the left edge because the trailing 48px icon-button touch target carries its own inset */
  --dinova-datepicker-modal-header-padding-bottom: 12px;
  --dinova-datepicker-modal-header-padding-left: 24px;
  --dinova-datepicker-modal-header-gap: 8px;
  --dinova-datepicker-modal-grid-padding-x: 12px; /** Calendar grid inset from the dialog edges */
  --dinova-datepicker-modal-actions-padding-x: 12px;
  --dinova-datepicker-modal-actions-padding-top: 4px;
  --dinova-datepicker-modal-actions-padding-bottom: 8px;
  --dinova-datepicker-modal-actions-gap: 8px;
  --dinova-datepicker-calendar-grid-padding-x: 16px; /** Week-row inset from the component edges */
  --dinova-dialog-padding: 24px; /** Content inset from the container edge (Android title/description block pads 24 on all sides; iOS insets its title bar and body text 24 horizontally with 24 top) */
  --dinova-dialog-content-gap: 16px; /** Vertical spacing between stacked content blocks (Android icon/headline/supporting text at 16); iOS stacks title bar, body, and actions at 24 */
  --dinova-dialog-actions-padding-x: 24px; /** Trailing inset governing the right-aligned row; Figma's leading padding is inconsistent across the Android sets (8 on Basic dialog, 16 on the list dialogs) — flagged, see sync report */
  --dinova-dialog-actions-padding-y: 20px; /** 20px above and below the row on Android; iOS pins its stacked buttons with a 32px bottom container inset (structural, reported not overridden) */
  --dinova-dialog-actions-gap: 8px; /** Button-to-button spacing — 8px on both platforms */
  --dinova-list-row-padding-x: 16px; /** Horizontal inset, both edges, both platforms */
  --dinova-list-row-gap: 12px; /** Element-to-element spacing inside the Android row. iOS spaces per element instead (16px after the leading control, 8px after the image) — structural, no override */
  --dinova-list-row-size-regular-padding-y: 12px;
  --dinova-list-row-size-tall-padding-y: 16px;
  --dinova-list-expanding-row-header-padding-x: 16px;
  --dinova-list-expanding-row-header-gap: 12px; /** Label-to-disclosure spacing */
  --dinova-list-expanding-row-content-padding-x: 16px;
  --dinova-list-expanding-row-content-padding-bottom: 16px;
  --dinova-list-expanding-row-view-all-padding-y: 12px;
  --dinova-list-subheading-padding-x: 16px;
  --dinova-list-subheading-padding-top: 32px; /** Default variation; drops to 24px when supporting text or a link is present */
  --dinova-list-subheading-padding-bottom: 16px; /** 12px on the link variation */
  --dinova-list-subheading-gap: 4px; /** Title-to-supporting-text spacing */
  --dinova-menu-group-gap: 2px; /** Vertical gap between group sections (2px) */
  --dinova-menu-group-padding-y: 2px; /** Top/bottom inset of each group's item list (2px) */
  --dinova-menu-item-target-padding-x: 4px; /** Horizontal inset from the row to the 44px content (4px) */
  --dinova-menu-item-target-padding-y: 2px; /** Vertical inset from the 48px row to the 44px content (2px) */
  --dinova-menu-item-padding: 12px; /** Uniform state-layer padding around the icon and label (12px) */
  --dinova-menu-item-gap: 8px; /** Leading-icon-to-label spacing (8px) */
  --dinova-menu-label-padding-x: 12px; /** Horizontal header padding (12px) */
  --dinova-menu-divider-padding-x: 8px; /** Horizontal inset of the line inside its wrapper (8px) */
  --dinova-menu-divider-padding-y: 2px; /** Vertical inset of the line inside its wrapper (2px) */
  --dinova-progressindicator-gap: 8px; /** M3-style 8px break between the active indicator and the remaining track, and between the track and the stop dot — Android/web only; the iOS fill overlays its track with no gap */
  --dinova-progressindicator-label-gap: 2px; /** Track-to-label spacing, above (top labels) and below (helper). iOS comps are absolute-positioned — no measurable counterpart, no override. */
  --dinova-radiobutton-target-padding: 4px; /** Inset from the 48px touch target to the 40px container/state layer */
  --dinova-radiobutton-state-layer-padding: 8px; /** Inset from the 40px state layer to the 24px icon frame */
  --dinova-sheet-header-padding: 16px; /** 16px on all four sides of the header frame */
  --dinova-sheet-header-gap: 12px; /** Header item spacing (12px); the header currently holds only the drag handle, so this applies when a title/content row is added */
  --dinova-sheet-content-padding: 0px; /** Content slot is edge-to-edge */
  --dinova-sheet-content-gap: 0px;
  --dinova-snackbar-padding-x: 16px; /** Leading text inset. The trailing inset drops to 8px beside an inline action and to 0 beside the 48px close touch target (their own paddings make up the difference). */
  --dinova-snackbar-gap: 4px; /** Supporting-text-to-action/close gap */
  --dinova-snackbar-action-padding-x: 12px;
  --dinova-snackbar-action-gap: 8px; /** Icon-to-label spacing inside the action (no icon is placed in any variant, but the instance defines it) */
  --dinova-snackbar-close-padding: 8px; /** Inset from the 40px state layer to the 24px icon */
  --dinova-snackbar-banner-padding-x: 12px; /** Leading icon inset (measured 12-14px across variants; trailing close-icon inset measures 10px) */
  --dinova-snackbar-banner-gap: 8px; /** Icon-to-text spacing (measured) */
  --dinova-text-fonts-system-display: Inter, sans-serif; /** System-tier family for large sizes (>= 20px): Inter on web, SF Pro Display on iOS, Roboto on Android. The native values are swapped in per platform by the fontFamily/*-system transforms in build.mjs. */
  --dinova-text-fonts-system-text: Inter, sans-serif; /** System-tier family for text sizes (< 20px): Inter on web, SF Pro Text on iOS, Roboto on Android. The native values are swapped in per platform by the fontFamily/*-system transforms in build.mjs. */
  --dinova-text-styles-display-large: 700 34px/41px 'Aptos Display', sans-serif; /** DisplayLarge — 34/41 bold, Aptos Display (brand tier) on every platform. Onboarding hero, splash, nav & page titles. */
  --dinova-text-styles-display-x-large: 800 60px/72px 'Aptos Display', sans-serif; /** DisplayXLarge — the largest display style. 60/72 extrabold, Aptos Display (brand tier) on every platform. Large point totals. */
  --dinova-text-styles-headline-large: 700 28px/34px 'Aptos Display', sans-serif; /** HeadlineLarge — 28/34 bold, Aptos Display (brand tier) on every platform. Marketing screens only. */
  --dinova-text-styles-headline-medium-bold: 700 23px/25px 'Aptos Display', sans-serif; /** HeadlineMediumBold — 23/25 bold, Aptos Display (brand tier) on every platform. Favorite card titles. */
  --dinova-textfield-padding-x: 16px; /** Left content inset; the right edge is flush against the 48px trailing-icon slot */
  --dinova-textfield-padding-y: 4px;
  --dinova-textfield-gap: 4px; /** Content-to-trailing-icon-slot spacing */
  --dinova-textfield-floating-label-padding-x: 4px;
  --dinova-textfield-supporting-padding-top: 4px;
  --dinova-textfield-supporting-padding-x: 16px;
  --dinova-toggleswitch-target-padding: 4px; /** Inset from the 48px touch target to the 40px state layer */
  --dinova-theme-brand-apple: var(--dinova-colors-apple-600);
  --dinova-theme-brand-cherry: var(--dinova-colors-cherry-500);
  --dinova-theme-brand-grain: var(--dinova-colors-grain-500);
  --dinova-theme-brand-orange: var(--dinova-colors-grain-700);
  --dinova-theme-semantic-success-default: var(--dinova-colors-apple-500);
  --dinova-theme-semantic-success-subtle: var(--dinova-colors-apple-50);
  --dinova-theme-semantic-success-text: var(--dinova-colors-apple-700);
  --dinova-theme-semantic-success-border: var(--dinova-colors-apple-200);
  --dinova-theme-semantic-error-default: var(--dinova-colors-cherry-600);
  --dinova-theme-semantic-error-subtle: var(--dinova-colors-cherry-50);
  --dinova-theme-semantic-error-text: var(--dinova-colors-cherry-700);
  --dinova-theme-semantic-error-border: var(--dinova-colors-cherry-200);
  --dinova-theme-semantic-warning-default: var(--dinova-colors-grain-700);
  --dinova-theme-semantic-warning-subtle: var(--dinova-colors-grain-50);
  --dinova-theme-semantic-warning-text: var(--dinova-colors-grain-800);
  --dinova-theme-semantic-warning-border: var(--dinova-colors-grain-100);
  --dinova-theme-semantic-caution-default: var(--dinova-colors-grain-400);
  --dinova-theme-semantic-caution-subtle: var(--dinova-colors-grain-50);
  --dinova-theme-semantic-caution-text: var(--dinova-colors-grain-800);
  --dinova-theme-semantic-caution-border: var(--dinova-colors-grain-100);
  --dinova-theme-semantic-info-default: var(--dinova-colors-slate-600);
  --dinova-theme-semantic-info-subtle: var(--dinova-colors-slate-50);
  --dinova-theme-semantic-info-text: var(--dinova-colors-slate-700);
  --dinova-theme-semantic-info-border: var(--dinova-colors-slate-200);
  --dinova-theme-surface-background: var(--dinova-colors-slate-25);
  --dinova-theme-surface-card: var(--dinova-colors-white);
  --dinova-theme-surface-elevated: var(--dinova-colors-slate-50);
  --dinova-theme-surface-overlay: var(--dinova-colors-white);
  --dinova-theme-surface-inverse: var(--dinova-colors-slate-800);
  --dinova-theme-surface-brand: var(--dinova-colors-apple-700);
  --dinova-theme-surface-onbrand: var(--dinova-colors-white);
  --dinova-theme-text-primary: var(--dinova-colors-slate-800);
  --dinova-theme-text-secondary: var(--dinova-colors-slate-600);
  --dinova-theme-text-tertiary: var(--dinova-colors-slate-500);
  --dinova-theme-text-disabled: var(--dinova-colors-slate-300);
  --dinova-theme-text-inverse: var(--dinova-colors-white);
  --dinova-theme-text-onbrand: var(--dinova-colors-white);
  --dinova-theme-text-onbrand-strong: var(--dinova-colors-white);
  --dinova-theme-text-onbrand-subtle: var(--dinova-colors-apple-100);
  --dinova-theme-border-default: var(--dinova-colors-slate-100);
  --dinova-theme-border-strong: var(--dinova-colors-slate-400);
  --dinova-theme-border-focus: var(--dinova-colors-apple-600);
  --dinova-theme-border-error: var(--dinova-colors-cherry-600);
  --dinova-theme-border-warning: var(--dinova-colors-grain-700);
  --dinova-theme-interactive-default: var(--dinova-colors-apple-650);
  --dinova-theme-interactive-hover: var(--dinova-colors-apple-700);
  --dinova-theme-interactive-pressed: var(--dinova-colors-apple-800);
  --dinova-theme-interactive-disabled: var(--dinova-colors-slate-200);
  --dinova-theme-interactive-focus: var(--dinova-colors-apple-600);
  --dinova-theme-interactive-subtle: var(--dinova-colors-apple-50);
  --dinova-theme-interactive-tint-hover: var(--dinova-colors-slate-100);
  --dinova-theme-interactive-tint-pressed: var(--dinova-colors-slate-150);
  --dinova-theme-interactive-text: var(--dinova-colors-apple-700);
  --dinova-theme-interactive-selected: var(--dinova-colors-apple-200);
  --dinova-theme-interactive-selected-disabled: var(--dinova-colors-apple-100);
  --dinova-theme-interactive-track: var(--dinova-colors-slate-100);
  --dinova-theme-interactive-destructive-default: var(--dinova-colors-cherry-600);
  --dinova-theme-interactive-destructive-hover: var(--dinova-colors-cherry-600);
  --dinova-theme-interactive-destructive-pressed: var(--dinova-colors-cherry-700);
  --dinova-theme-interactive-destructive-subtle: var(--dinova-colors-cherry-50);
  --dinova-badge-background: var(--dinova-theme-brand-cherry); /** Badge fill; bound to Brand/Cherry in Figma on every size and variant */
  --dinova-badge-label-color: var(--dinova-theme-surface-onbrand); /** Count text colour on the Large size */
  --dinova-badge-border: var(--dinova-theme-surface-overlay); /** Cut-out ring where the badge sits on top of an icon; drawn on every variant of the current sets (the former stroke-less 'plain' variants no longer exist) */
  --dinova-button-primary-default-background: var(--dinova-theme-interactive-default);
  --dinova-button-primary-default-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-hover-background: var(--dinova-theme-interactive-hover);
  --dinova-button-primary-hover-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-focused-background: var(--dinova-theme-interactive-hover);
  --dinova-button-primary-focused-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-pressed-background: var(--dinova-theme-interactive-pressed);
  --dinova-button-primary-pressed-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-button-primary-disabled-label: var(--dinova-theme-text-disabled);
  --dinova-button-primary-destructive-default-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-button-primary-destructive-default-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-destructive-hover-background: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-primary-destructive-hover-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-destructive-focused-background: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-primary-destructive-focused-label: var(--dinova-theme-text-onbrand);
  --dinova-button-primary-destructive-pressed-background: var(--dinova-theme-interactive-destructive-pressed);
  --dinova-button-primary-destructive-pressed-label: var(--dinova-theme-text-onbrand);
  --dinova-button-secondary-default-background: var(--dinova-theme-interactive-subtle);
  --dinova-button-secondary-default-label: var(--dinova-theme-interactive-text);
  --dinova-button-secondary-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-secondary-hover-label: var(--dinova-theme-interactive-hover);
  --dinova-button-secondary-focused-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-secondary-focused-label: var(--dinova-theme-interactive-hover);
  --dinova-button-secondary-pressed-background: var(--dinova-theme-interactive-pressed);
  --dinova-button-secondary-pressed-label: var(--dinova-theme-text-onbrand);
  --dinova-button-secondary-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-button-secondary-disabled-label: var(--dinova-theme-text-disabled);
  --dinova-button-secondary-destructive-default-background: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-button-secondary-destructive-default-label: var(--dinova-theme-interactive-destructive-default);
  --dinova-button-secondary-destructive-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-secondary-destructive-hover-label: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-secondary-destructive-focused-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-secondary-destructive-focused-label: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-secondary-destructive-pressed-background: var(--dinova-theme-interactive-destructive-pressed);
  --dinova-button-secondary-destructive-pressed-label: var(--dinova-theme-text-onbrand);
  --dinova-button-ghost-default-border: var(--dinova-theme-border-focus);
  --dinova-button-ghost-default-label: var(--dinova-theme-interactive-text);
  --dinova-button-ghost-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-hover-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-hover-label: var(--dinova-theme-interactive-hover);
  --dinova-button-ghost-focused-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-focused-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-focused-label: var(--dinova-theme-interactive-hover);
  --dinova-button-ghost-pressed-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-pressed-label: var(--dinova-theme-interactive-pressed);
  --dinova-button-ghost-disabled-border: var(--dinova-theme-interactive-disabled);
  --dinova-button-ghost-disabled-label: var(--dinova-theme-text-disabled);
  --dinova-button-ghost-destructive-default-border: var(--dinova-theme-border-error);
  --dinova-button-ghost-destructive-default-label: var(--dinova-theme-interactive-destructive-default);
  --dinova-button-ghost-destructive-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-destructive-hover-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-destructive-hover-label: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-ghost-destructive-focused-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-destructive-focused-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-destructive-focused-label: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-ghost-destructive-pressed-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-ghost-destructive-pressed-label: var(--dinova-theme-interactive-destructive-pressed);
  --dinova-button-text-default-label: var(--dinova-theme-interactive-text);
  --dinova-button-text-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-hover-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-hover-label: var(--dinova-theme-interactive-hover);
  --dinova-button-text-focused-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-focused-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-focused-label: var(--dinova-theme-interactive-hover);
  --dinova-button-text-pressed-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-pressed-label: var(--dinova-theme-interactive-pressed);
  --dinova-button-text-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-button-text-disabled-label: var(--dinova-theme-text-disabled);
  --dinova-button-text-destructive-default-label: var(--dinova-theme-interactive-destructive-default);
  --dinova-button-text-destructive-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-destructive-hover-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-destructive-hover-label: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-text-destructive-focused-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-destructive-focused-border: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-destructive-focused-label: var(--dinova-theme-interactive-destructive-hover);
  --dinova-button-text-destructive-pressed-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-button-text-destructive-pressed-label: var(--dinova-theme-interactive-destructive-pressed);
  --dinova-button-focus-ring-color: var(--dinova-theme-border-focus);
  --dinova-button-binary-unselected-border: var(--dinova-theme-interactive-default);
  --dinova-button-binary-unselected-label: var(--dinova-theme-interactive-text);
  --dinova-button-binary-selected-background: var(--dinova-theme-interactive-selected);
  --dinova-button-binary-selected-border: var(--dinova-theme-interactive-pressed);
  --dinova-button-binary-selected-label: var(--dinova-theme-interactive-pressed);
  --dinova-button-segmented-track: var(--dinova-theme-interactive-track);
  --dinova-button-segmented-unselected-label: var(--dinova-theme-text-primary);
  --dinova-button-segmented-selected-background: var(--dinova-theme-interactive-selected-disabled); /** Bound verbatim to Interactive/Selected-Disabled in Figma — likely a mis-binding, see sync report */
  --dinova-button-segmented-selected-border: var(--dinova-theme-border-focus);
  --dinova-button-segmented-selected-label: var(--dinova-theme-text-primary);
  --dinova-segmentedbutton-border: var(--dinova-theme-border-strong);
  --dinova-segmentedbutton-unselected-label: var(--dinova-theme-interactive-default);
  --dinova-segmentedbutton-selected-background: var(--dinova-theme-interactive-selected-disabled); /** Bound verbatim to Interactive/Selected-Disabled in Figma — likely a mis-binding (same one the iOS segmented control carries), see sync report */
  --dinova-segmentedbutton-selected-label: var(--dinova-theme-text-primary);
  --dinova-segmentedbutton-selected-icon: var(--dinova-theme-semantic-info-text); /** Check icon bound verbatim to Semantic/Info/Text — likely a mis-binding, see sync report */
  --dinova-card-title-color: var(--dinova-theme-text-primary);
  --dinova-card-supporting-color: var(--dinova-theme-text-secondary);
  --dinova-card-background-default: var(--dinova-theme-surface-card);
  --dinova-card-background-hover: var(--dinova-theme-surface-card); /** Unchanged from default; Figma only raises the elevation effect on Hovered */
  --dinova-card-background-pressed: var(--dinova-theme-surface-elevated); /** The only state that changes the fill, in both Elevated and Outlined styles */
  --dinova-card-background-focused: var(--dinova-theme-surface-card); /** Unchanged from default; Focused only adds the focus ring */
  --dinova-card-border-color: var(--dinova-theme-border-default); /** Outlined style resting stroke, identical on Enabled/Hovered/Pressed */
  --dinova-card-border-focus-color: var(--dinova-theme-border-focus); /** Focus ring on the Focused state of both Elevated and Outlined */
  --dinova-checkbox-focus-ring-color: var(--dinova-theme-interactive-focus); /** Error variants use #f1a9b5 instead — see the per-type focused groups */
  --dinova-checkbox-unselected-default-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-unselected-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-checkbox-unselected-hover-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-unselected-hover-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-unselected-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-unselected-focused-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-unselected-focused-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-unselected-focused-ring: var(--dinova-theme-interactive-focus);
  --dinova-checkbox-unselected-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-unselected-pressed-background: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-unselected-pressed-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-unselected-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-unselected-disabled-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-unselected-error-default-border: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-unselected-error-hover-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-unselected-error-hover-border: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-unselected-error-focused-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-unselected-error-focused-border: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-unselected-error-focused-ring: var(--dinova-theme-semantic-error-border);
  --dinova-checkbox-unselected-error-pressed-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-unselected-error-pressed-border: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-unselected-error-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-unselected-error-disabled-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-selected-default-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-selected-default-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-checkbox-selected-hover-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-selected-hover-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-selected-focused-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-selected-focused-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-focused-ring: var(--dinova-theme-interactive-focus);
  --dinova-checkbox-selected-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-selected-pressed-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-selected-pressed-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-selected-disabled-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-selected-disabled-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-error-default-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-selected-error-default-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-error-hover-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-selected-error-hover-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-selected-error-hover-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-error-focused-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-selected-error-focused-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-selected-error-focused-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-error-focused-ring: var(--dinova-theme-semantic-error-border);
  --dinova-checkbox-selected-error-pressed-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-selected-error-pressed-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-selected-error-pressed-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-selected-error-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-selected-error-disabled-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-selected-error-disabled-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-default-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-indeterminate-default-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-checkbox-indeterminate-hover-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-indeterminate-hover-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-indeterminate-focused-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-indeterminate-focused-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-focused-ring: var(--dinova-theme-interactive-focus);
  --dinova-checkbox-indeterminate-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-checkbox-indeterminate-pressed-background: var(--dinova-theme-interactive-default);
  --dinova-checkbox-indeterminate-pressed-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-indeterminate-disabled-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-indeterminate-disabled-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-error-default-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-indeterminate-error-default-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-error-hover-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-indeterminate-error-hover-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-indeterminate-error-hover-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-error-focused-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-indeterminate-error-focused-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-indeterminate-error-focused-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-error-focused-ring: var(--dinova-theme-semantic-error-border);
  --dinova-checkbox-indeterminate-error-pressed-state-layer: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-checkbox-indeterminate-error-pressed-background: var(--dinova-theme-interactive-destructive-default);
  --dinova-checkbox-indeterminate-error-pressed-icon: var(--dinova-theme-text-onbrand);
  --dinova-checkbox-indeterminate-error-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-checkbox-indeterminate-error-disabled-border: var(--dinova-theme-border-strong);
  --dinova-checkbox-indeterminate-error-disabled-icon: var(--dinova-theme-text-onbrand);
  --dinova-chip-focus-ring-color: var(--dinova-theme-border-focus);
  --dinova-chip-unselected-default-border: var(--dinova-theme-border-strong);
  --dinova-chip-unselected-default-label: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-default-icon: var(--dinova-theme-text-secondary); /** Leading icon follows the label color */
  --dinova-chip-unselected-default-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-unselected-hover-background: var(--dinova-theme-surface-card); /** Hovered/focused/pressed unselected chips gain a card fill and soften the border to border.default; Figma also draws a State/Hover/On Surface 8% overlay with no local theme counterpart — flagged, not written */
  --dinova-chip-unselected-hover-border: var(--dinova-theme-border-default);
  --dinova-chip-unselected-hover-label: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-hover-icon: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-hover-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-unselected-focused-background: var(--dinova-theme-surface-card);
  --dinova-chip-unselected-focused-border: var(--dinova-theme-border-default);
  --dinova-chip-unselected-focused-label: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-focused-icon: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-focused-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-unselected-focused-ring: var(--dinova-theme-border-focus);
  --dinova-chip-unselected-pressed-background: var(--dinova-theme-surface-card);
  --dinova-chip-unselected-pressed-border: var(--dinova-theme-border-default);
  --dinova-chip-unselected-pressed-label: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-pressed-icon: var(--dinova-theme-text-secondary);
  --dinova-chip-unselected-pressed-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-unselected-disabled-border: var(--dinova-theme-border-default);
  --dinova-chip-unselected-disabled-label: var(--dinova-theme-text-secondary); /** Dimmed via disabled-opacity rather than a color swap (the selected type swaps to text.disabled instead — inconsistency flagged) */
  --dinova-chip-unselected-disabled-icon: var(--dinova-theme-text-disabled); /** Figma is inconsistent here — Text/Disabled in one variant, Text/Primary at 38% in its twin; the explicit disabled binding is taken as canonical (flagged) */
  --dinova-chip-unselected-disabled-trailing-icon: var(--dinova-theme-interactive-disabled);
  --dinova-chip-selected-default-background: var(--dinova-theme-interactive-subtle);
  --dinova-chip-selected-default-label: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-default-icon: var(--dinova-theme-text-secondary); /** Leading checkmark follows the label color */
  --dinova-chip-selected-default-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-selected-hover-background: var(--dinova-theme-interactive-subtle); /** Figma layers a State/Hover/On Interactive 8% overlay and M3 elevation drop shadows on top — both flagged, not written */
  --dinova-chip-selected-hover-label: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-hover-icon: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-hover-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-selected-focused-background: var(--dinova-theme-interactive-subtle);
  --dinova-chip-selected-focused-label: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-focused-icon: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-focused-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-selected-focused-ring: var(--dinova-theme-border-focus);
  --dinova-chip-selected-pressed-background: var(--dinova-theme-interactive-subtle); /** Figma layers a State/Press/On Interactive 10% overlay on top — flagged, not written */
  --dinova-chip-selected-pressed-label: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-pressed-icon: var(--dinova-theme-text-secondary);
  --dinova-chip-selected-pressed-trailing-icon: var(--dinova-theme-interactive-text);
  --dinova-chip-selected-disabled-label: var(--dinova-theme-text-disabled); /** Additionally dimmed via disabled-opacity in Figma. The container fill is State/Disabled/Container at 12% — no local theme counterpart, flagged and not written */
  --dinova-chip-selected-disabled-icon: var(--dinova-theme-text-disabled);
  --dinova-chip-selected-disabled-trailing-icon: var(--dinova-theme-interactive-disabled);
  --dinova-datepicker-modal-container-background: var(--dinova-theme-surface-overlay); /** Dialog surface; the Elevation/4 (Auto) shadow style on the dialog is M3 kit debris and is not synced */
  --dinova-datepicker-modal-header-divider: var(--dinova-theme-border-default);
  --dinova-datepicker-modal-header-label: var(--dinova-theme-text-secondary); /** 'Select date' supporting text. Its type is unbound Roboto SemiBold 14 (the known Android/Label/Medium Bold gap) — typography flagged, not synced */
  --dinova-datepicker-modal-header-date: var(--dinova-theme-text-primary); /** Selected-date headline ('Mon, Aug 17') */
  --dinova-datepicker-modal-header-date-typography: 700 28px/34px 'Aptos Display', sans-serif;
  --dinova-datepicker-modal-weekday-color: var(--dinova-theme-text-primary);
  --dinova-datepicker-modal-fullscreen-month-label: var(--dinova-theme-text-primary); /** Per-month 'Month & Year' heading in the scrolling month list. Its type is unbound Roboto SemiBold 14 — typography flagged, not synced */
  --dinova-datepicker-calendar-background: var(--dinova-theme-surface-card);
  --dinova-datepicker-calendar-header-month-label: var(--dinova-theme-text-primary);
  --dinova-datepicker-calendar-header-control: var(--dinova-theme-interactive-focus); /** Prev/next arrows and the month disclosure chevron */
  --dinova-datepicker-calendar-weekday-color: var(--dinova-theme-text-secondary);
  --dinova-datepicker-calendar-day-default-label: var(--dinova-theme-text-primary);
  --dinova-datepicker-calendar-day-today-label: var(--dinova-theme-interactive-focus);
  --dinova-datepicker-calendar-day-selected-background: var(--dinova-theme-interactive-focus); /** Selection circle, drawn at background-opacity */
  --dinova-datepicker-calendar-day-selected-label: var(--dinova-theme-interactive-focus);
  --dinova-datepicker-calendar-day-disabled-label: var(--dinova-theme-text-disabled); /** Adjacent-month and unavailable dates */
  --dinova-datepicker-calendar-separator-color: var(--dinova-theme-border-default);
  --dinova-dialog-background: var(--dinova-theme-surface-overlay); /** Container fill; Android binds Surface/Overlay, iOS binds Surface/Card */
  --dinova-dialog-icon-color: var(--dinova-theme-semantic-info-text);
  --dinova-dialog-title-color: var(--dinova-theme-text-primary);
  --dinova-dialog-body-color: var(--dinova-theme-text-primary);
  --dinova-dialog-divider-color: var(--dinova-theme-border-default);
  --dinova-list-row-divider-color: var(--dinova-theme-border-default);
  --dinova-list-row-color-label: var(--dinova-theme-text-primary);
  --dinova-list-row-color-subtitle: var(--dinova-theme-text-tertiary);
  --dinova-list-row-color-overline: var(--dinova-theme-text-tertiary);
  --dinova-list-row-color-detail: var(--dinova-theme-text-tertiary);
  --dinova-list-row-color-chevron: var(--dinova-theme-text-tertiary);
  --dinova-list-expanding-row-border-color: var(--dinova-theme-border-default);
  --dinova-list-expanding-row-body-color: var(--dinova-theme-text-secondary);
  --dinova-list-expanding-row-view-all-color: var(--dinova-theme-interactive-text);
  --dinova-list-subheading-color-title: var(--dinova-theme-text-secondary);
  --dinova-list-subheading-color-supporting: var(--dinova-theme-text-tertiary);
  --dinova-list-subheading-color-link: var(--dinova-theme-interactive-text);
  --dinova-list-swipe-action-background: var(--dinova-theme-interactive-default); /** Leading (swipe-right) action */
  --dinova-list-swipe-action-destructive: var(--dinova-theme-interactive-destructive-default); /** Trailing (swipe-left) delete action */
  --dinova-list-swipe-action-label-color: var(--dinova-theme-text-secondary);
  --dinova-menu-background: var(--dinova-theme-surface-overlay); /** Menu surface — the container itself with one group, each group section with two or more */
  --dinova-menu-item-icon-color: var(--dinova-theme-semantic-info-text); /** Bound verbatim to Semantic/Info/Text on the composed Menu's item icons — likely a mis-binding (the underlying item set uses an M3 kit variable), see sync report */
  --dinova-menu-item-label-color: var(--dinova-theme-text-primary);
  --dinova-menu-label-color: var(--dinova-theme-text-tertiary);
  --dinova-menu-divider-color: var(--dinova-theme-border-default);
  --dinova-progressindicator-track-color: var(--dinova-theme-interactive-track);
  --dinova-progressindicator-fill-color: var(--dinova-theme-brand-apple);
  --dinova-progressindicator-stop-color: var(--dinova-theme-brand-apple);
  --dinova-progressindicator-label-color: var(--dinova-theme-text-tertiary); /** Leading description label ('X% to next reward') */
  --dinova-progressindicator-label-value-color: var(--dinova-theme-brand-apple); /** Trailing value label ('80%') */
  --dinova-progressindicator-label-helper-color: var(--dinova-theme-text-tertiary);
  --dinova-radiobutton-focus-ring-color: var(--dinova-theme-border-focus); /** Bound to Border/Focus (checkbox's ring uses Interactive/Focus — both resolve to the same primitive today); the paint is currently invisible in Figma */
  --dinova-radiobutton-unselected-default-icon: var(--dinova-theme-border-strong);
  --dinova-radiobutton-unselected-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-radiobutton-unselected-hover-icon: var(--dinova-theme-border-strong);
  --dinova-radiobutton-unselected-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-unselected-focused-icon: var(--dinova-theme-border-strong);
  --dinova-radiobutton-unselected-focused-ring: var(--dinova-theme-border-focus);
  --dinova-radiobutton-unselected-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-unselected-pressed-icon: var(--dinova-theme-border-strong);
  --dinova-radiobutton-unselected-disabled-icon: var(--dinova-theme-text-disabled);
  --dinova-radiobutton-unselected-error-default-icon: var(--dinova-theme-border-error);
  --dinova-radiobutton-unselected-error-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-radiobutton-unselected-error-hover-icon: var(--dinova-theme-border-error);
  --dinova-radiobutton-unselected-error-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-unselected-error-focused-icon: var(--dinova-theme-border-error);
  --dinova-radiobutton-unselected-error-focused-ring: var(--dinova-theme-border-focus);
  --dinova-radiobutton-unselected-error-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-unselected-error-pressed-icon: var(--dinova-theme-semantic-error-text);
  --dinova-radiobutton-unselected-error-disabled-icon: var(--dinova-theme-semantic-error-border);
  --dinova-radiobutton-selected-default-icon: var(--dinova-theme-interactive-default);
  --dinova-radiobutton-selected-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-radiobutton-selected-hover-icon: var(--dinova-theme-interactive-default);
  --dinova-radiobutton-selected-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-selected-focused-icon: var(--dinova-theme-interactive-focus);
  --dinova-radiobutton-selected-focused-ring: var(--dinova-theme-border-focus);
  --dinova-radiobutton-selected-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-selected-pressed-icon: var(--dinova-theme-interactive-pressed);
  --dinova-radiobutton-selected-disabled-icon: var(--dinova-theme-text-disabled);
  --dinova-radiobutton-selected-error-default-icon: var(--dinova-theme-semantic-error-default);
  --dinova-radiobutton-selected-error-hover-state-layer: var(--dinova-theme-interactive-tint-hover);
  --dinova-radiobutton-selected-error-hover-icon: var(--dinova-theme-interactive-destructive-hover);
  --dinova-radiobutton-selected-error-focused-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-selected-error-focused-icon: var(--dinova-theme-semantic-error-default);
  --dinova-radiobutton-selected-error-focused-ring: var(--dinova-theme-border-focus);
  --dinova-radiobutton-selected-error-pressed-state-layer: var(--dinova-theme-interactive-tint-pressed);
  --dinova-radiobutton-selected-error-pressed-icon: var(--dinova-theme-semantic-error-text);
  --dinova-radiobutton-selected-error-disabled-icon: var(--dinova-theme-semantic-error-border);
  --dinova-sheet-background: var(--dinova-theme-surface-elevated); /** Sheet container fill — Surface/Elevated on both the Android and iOS sets */
  --dinova-sheet-handle-color: var(--dinova-theme-border-strong); /** Android binding. The iOS grabber is bound to the native-kit variable 'Fills - Vibrant/Primary' (kit variable — flagged, not mapped), so iOS consumes the canonical value pending design. */
  --dinova-snackbar-background: var(--dinova-theme-surface-elevated);
  --dinova-snackbar-text: var(--dinova-theme-text-primary); /** Supporting text color */
  --dinova-snackbar-action-label: var(--dinova-theme-interactive-text);
  --dinova-snackbar-close-color: var(--dinova-theme-text-primary);
  --dinova-snackbar-toast-background: var(--dinova-theme-surface-elevated);
  --dinova-snackbar-toast-text: var(--dinova-theme-text-primary); /** Message color */
  --dinova-snackbar-toast-success-icon: var(--dinova-theme-semantic-success-default);
  --dinova-snackbar-toast-success-dismiss: var(--dinova-theme-interactive-default);
  --dinova-snackbar-toast-error-icon: var(--dinova-theme-semantic-error-default);
  --dinova-snackbar-toast-error-dismiss: var(--dinova-theme-interactive-destructive-default);
  --dinova-snackbar-toast-info-icon: var(--dinova-theme-semantic-info-default);
  --dinova-snackbar-toast-info-dismiss: var(--dinova-theme-interactive-default);
  --dinova-snackbar-banner-title-color: var(--dinova-theme-text-primary);
  --dinova-snackbar-banner-close: var(--dinova-theme-text-secondary); /** Trailing close icon color (same binding on every type) */
  --dinova-snackbar-banner-success-background: var(--dinova-theme-semantic-success-subtle);
  --dinova-snackbar-banner-success-accent: var(--dinova-theme-semantic-success-default);
  --dinova-snackbar-banner-success-icon: var(--dinova-theme-semantic-success-default);
  --dinova-snackbar-banner-success-subtitle: var(--dinova-theme-text-secondary);
  --dinova-snackbar-banner-error-background: var(--dinova-theme-semantic-error-subtle);
  --dinova-snackbar-banner-error-accent: var(--dinova-theme-semantic-error-default);
  --dinova-snackbar-banner-error-icon: var(--dinova-theme-semantic-error-default);
  --dinova-snackbar-banner-error-subtitle: var(--dinova-theme-text-primary);
  --dinova-snackbar-banner-warning-background: var(--dinova-theme-semantic-warning-subtle);
  --dinova-snackbar-banner-warning-accent: var(--dinova-theme-semantic-warning-default);
  --dinova-snackbar-banner-warning-icon: var(--dinova-theme-semantic-warning-default);
  --dinova-snackbar-banner-warning-subtitle: var(--dinova-theme-text-primary);
  --dinova-snackbar-banner-info-background: var(--dinova-theme-semantic-info-subtle);
  --dinova-snackbar-banner-info-accent: var(--dinova-theme-semantic-info-text); /** Bound verbatim to Semantic/Info/Text in Figma — every other type's accent binds Semantic/<Type>/Default; likely a mis-binding, see sync report */
  --dinova-snackbar-banner-info-icon: var(--dinova-theme-semantic-info-default);
  --dinova-snackbar-banner-info-subtitle: var(--dinova-theme-text-primary);
  --dinova-text-styles-headline-medium: 600 22px/28px Inter, sans-serif; /** HeadlineMedium — 22/28 semibold on web/iOS, 24/36 on Android (Headline Medium · 24sp — per-platform override). System tier (SF Pro Semibold / Roboto Regular / Inter). Section headers. iOS Dynamic Type: Title 2. */
  --dinova-text-styles-headline-small: 600 20px/25px Inter, sans-serif; /** HeadlineSmall — 20/25 semibold on web/iOS, 22/28 on Android (Title Large · 22sp — per-platform override). System tier (SF Pro Semibold / Roboto Medium / Inter). Card & panel titles. iOS Dynamic Type: Title 3. */
  --dinova-text-styles-title-large: 600 17px/25px Inter, sans-serif; /** TitleLarge — the Figma 'List Header (Body/Large Bold · Title/Large)' row. 17/25 semibold on web/iOS, 18/22 on Android (Title Medium · 18sp — per-platform override). List headers, emphasized rows. iOS Dynamic Type: Headline. */
  --dinova-text-styles-body-large: 400 17px/22px Inter, sans-serif; /** BodyLarge — primary body text. 17/22 regular, system tier (SF Pro Text / Roboto / Inter). Main content. iOS Dynamic Type: Body. */
  --dinova-text-styles-body-medium: 400 16px/22px Inter, sans-serif; /** BodyMedium — 16/22 regular, system tier (SF Pro Text / Roboto / Inter). Secondary supporting content. iOS Dynamic Type: Callout. */
  --dinova-text-styles-body-medium-bold: 600 16px/22px Inter, sans-serif; /** BodyMediumBold — 16/22 semibold, system tier (SF Pro Semibold / Roboto SemiBold / Inter). Emphasized secondary body. iOS Dynamic Type: Callout (semibold). Android: Body Large · 16sp SB. */
  --dinova-text-styles-body-small: 400 15px/20px Inter, sans-serif; /** BodySmall — 15/20 regular, system tier (SF Pro Text / Roboto / Inter). Supporting text, addresses, card details. iOS Dynamic Type: Subheadline. */
  --dinova-text-styles-body-small-bold: 700 15px/20px Inter, sans-serif; /** BodySmallBold — 15/20 bold, system tier. Restaurant names, buttons, point values. iOS Dynamic Type: Subheadline (bold). iOS-only in Figma — Android has no equivalent yet. */
  --dinova-text-styles-label-large: 500 15px/20px Inter, sans-serif; /** LabelLarge — 15/20 medium on web/iOS (iPad Nav · 15pt Med), 16/24 on Android (Label Large · 16sp — per-platform override). Buttons, tabs, chips, iPad nav. */
  --dinova-text-styles-label-large-bold: 700 15px/20px Inter, sans-serif; /** LabelLargeBold — 15/20 bold, system tier. iPad nav selected state, buttons. iOS-only in Figma — Android has no equivalent yet. */
  --dinova-text-styles-label-medium: 500 14px/16px Inter, sans-serif; /** LabelMedium — 14/16 medium on web/iOS, 14/20 on Android (Label Large · 14sp — per-platform override). System tier (SF Pro Medium / Roboto Regular / Inter). Dense UI, chip & tab labels. No iOS Dynamic Type (fixed 14pt). */
  --dinova-text-styles-label-small: 500 13px/16px Inter, sans-serif; /** LabelSmall — 13/16 medium, system tier. Dense UI. No iOS Dynamic Type (fixed 13pt). iOS-only in Figma — Android has no equivalent yet. */
  --dinova-text-styles-label-x-small: 500 10px/12px Inter, sans-serif; /** LabelXSmall — 10/12 medium, system tier. iPhone tab bar labels (Tab Bar · 10pt). iOS-only in Figma — Android has no equivalent yet. */
  --dinova-text-styles-label-x-small-bold: 700 10px/12px Inter, sans-serif; /** LabelXSmallBold — 10/12 bold, system tier. iPhone tab bar, selected state. iOS-only in Figma — Android has no equivalent yet. */
  --dinova-text-styles-caption: 400 13px/18px Inter, sans-serif; /** Caption — 13/18 regular, system tier (SF Pro Text / Roboto / Inter). Helper text and footnotes. iOS Dynamic Type: Footnote. */
  --dinova-text-styles-caption-small: 400 12px/16px Inter, sans-serif; /** CaptionSmall — the smallest text style. 12/16 regular, system tier (SF Pro Text / Roboto / Inter). Timestamps and metadata. iOS Dynamic Type: Caption 1. */
  --dinova-textfield-floating-label-background: var(--dinova-theme-surface-background);
  --dinova-textfield-input: var(--dinova-theme-text-primary); /** Entered text, every non-disabled state */
  --dinova-textfield-placeholder: var(--dinova-theme-text-tertiary);
  --dinova-textfield-error-icon: var(--dinova-theme-semantic-error-default); /** Trailing icon in the Error state. The iOS 26 set binds its trailing icon to Semantic/Info/Default even on Error — likely a mis-binding, see sync report. */
  --dinova-textfield-supporting-color-default: var(--dinova-theme-text-secondary);
  --dinova-textfield-supporting-color-error: var(--dinova-theme-semantic-error-default);
  --dinova-textfield-supporting-color-disabled: var(--dinova-theme-text-disabled);
  --dinova-textfield-outlined-default-border: var(--dinova-theme-border-strong);
  --dinova-textfield-outlined-default-label: var(--dinova-theme-text-secondary);
  --dinova-textfield-outlined-hover-border: var(--dinova-theme-text-secondary);
  --dinova-textfield-outlined-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-textfield-outlined-hover-label: var(--dinova-theme-text-secondary);
  --dinova-textfield-outlined-focused-border: var(--dinova-theme-border-focus);
  --dinova-textfield-outlined-focused-label: var(--dinova-theme-interactive-default);
  --dinova-textfield-outlined-focused-caret: var(--dinova-theme-interactive-default);
  --dinova-textfield-outlined-error-border: var(--dinova-theme-border-error);
  --dinova-textfield-outlined-error-label: var(--dinova-theme-semantic-error-default);
  --dinova-textfield-outlined-disabled-border: var(--dinova-theme-text-disabled);
  --dinova-textfield-outlined-disabled-label: var(--dinova-theme-text-disabled);
  --dinova-textfield-filled-default-background: var(--dinova-theme-interactive-track);
  --dinova-textfield-filled-default-indicator: var(--dinova-theme-border-default);
  --dinova-textfield-filled-default-label: var(--dinova-theme-text-secondary);
  --dinova-textfield-filled-hover-background: var(--dinova-theme-interactive-tint-hover);
  --dinova-textfield-filled-hover-indicator: var(--dinova-theme-border-strong);
  --dinova-textfield-filled-hover-label: var(--dinova-theme-text-secondary);
  --dinova-textfield-filled-focused-background: var(--dinova-theme-interactive-subtle);
  --dinova-textfield-filled-focused-indicator: var(--dinova-theme-border-focus);
  --dinova-textfield-filled-focused-label: var(--dinova-theme-text-secondary);
  --dinova-textfield-filled-focused-caret: var(--dinova-theme-border-focus);
  --dinova-textfield-filled-error-background: var(--dinova-theme-interactive-destructive-subtle);
  --dinova-textfield-filled-error-indicator: var(--dinova-theme-border-error);
  --dinova-textfield-filled-error-label: var(--dinova-theme-semantic-error-default);
  --dinova-textfield-filled-disabled-background-wash: var(--dinova-theme-text-disabled);
  --dinova-textfield-filled-disabled-indicator: var(--dinova-theme-border-strong);
  --dinova-textfield-filled-disabled-label: var(--dinova-theme-text-disabled);
  --dinova-toggleswitch-focus-ring-color: var(--dinova-theme-border-focus);
  --dinova-toggleswitch-selected-default-background: var(--dinova-theme-interactive-default);
  --dinova-toggleswitch-selected-default-thumb: var(--dinova-theme-text-onbrand);
  --dinova-toggleswitch-selected-default-icon: var(--dinova-theme-semantic-success-text);
  --dinova-toggleswitch-selected-hover-background: var(--dinova-theme-interactive-hover);
  --dinova-toggleswitch-selected-hover-thumb: var(--dinova-theme-text-onbrand);
  --dinova-toggleswitch-selected-hover-icon: var(--dinova-theme-semantic-success-text);
  --dinova-toggleswitch-selected-focused-background: var(--dinova-theme-interactive-focus);
  --dinova-toggleswitch-selected-focused-thumb: var(--dinova-theme-text-onbrand);
  --dinova-toggleswitch-selected-focused-icon: var(--dinova-theme-semantic-success-text);
  --dinova-toggleswitch-selected-focused-ring: var(--dinova-theme-border-focus);
  --dinova-toggleswitch-selected-pressed-background: var(--dinova-theme-interactive-pressed);
  --dinova-toggleswitch-selected-pressed-thumb: var(--dinova-theme-text-onbrand);
  --dinova-toggleswitch-selected-pressed-icon: var(--dinova-theme-semantic-success-text);
  --dinova-toggleswitch-selected-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-toggleswitch-selected-disabled-thumb: var(--dinova-theme-text-disabled);
  --dinova-toggleswitch-selected-disabled-icon: var(--dinova-theme-semantic-info-subtle); /** Figma binds Semantic/Info/Subtle here (drawn at the 0.38 disabled opacity) — odd semantic for a switch icon, flagged for design */
  --dinova-toggleswitch-unselected-default-background: var(--dinova-theme-surface-elevated);
  --dinova-toggleswitch-unselected-default-border: var(--dinova-theme-border-strong);
  --dinova-toggleswitch-unselected-default-thumb: var(--dinova-theme-text-secondary); /** The Icon=False Enabled variant alone binds Semantic/Info/Default (same resolved slate.600) — synced to the text.secondary binding used by every other unselected thumb; inconsistency flagged */
  --dinova-toggleswitch-unselected-default-icon: var(--dinova-theme-text-inverse);
  --dinova-toggleswitch-unselected-hover-background: var(--dinova-theme-surface-elevated);
  --dinova-toggleswitch-unselected-hover-border: var(--dinova-theme-border-strong);
  --dinova-toggleswitch-unselected-hover-thumb: var(--dinova-theme-text-secondary);
  --dinova-toggleswitch-unselected-hover-icon: var(--dinova-theme-text-inverse);
  --dinova-toggleswitch-unselected-focused-background: var(--dinova-theme-surface-elevated);
  --dinova-toggleswitch-unselected-focused-border: var(--dinova-theme-border-strong);
  --dinova-toggleswitch-unselected-focused-thumb: var(--dinova-theme-text-secondary);
  --dinova-toggleswitch-unselected-focused-icon: var(--dinova-theme-text-inverse);
  --dinova-toggleswitch-unselected-focused-ring: var(--dinova-theme-border-focus);
  --dinova-toggleswitch-unselected-pressed-background: var(--dinova-theme-surface-elevated);
  --dinova-toggleswitch-unselected-pressed-border: var(--dinova-theme-border-strong);
  --dinova-toggleswitch-unselected-pressed-thumb: var(--dinova-theme-text-secondary);
  --dinova-toggleswitch-unselected-pressed-icon: var(--dinova-theme-text-inverse);
  --dinova-toggleswitch-unselected-disabled-background: var(--dinova-theme-interactive-disabled);
  --dinova-toggleswitch-unselected-disabled-border: var(--dinova-theme-border-default);
  --dinova-toggleswitch-unselected-disabled-thumb: var(--dinova-theme-text-disabled); /** Drawn at the 0.38 disabled opacity on Android/web; iOS knob keeps full opacity */
  --dinova-toggleswitch-unselected-disabled-icon: var(--dinova-theme-text-inverse);
  --dinova-badge-label: 400 12px/16px Inter, sans-serif; /** Count text on the Large size (Figma: Android/Caption/Small, Roboto Regular 12); the Small size is a bare dot with no label */
  --dinova-button-label: 500 15px/20px Inter, sans-serif; /** Figma now binds 'Android/Label/Medium Bold' (Roboto SemiBold 14) on the Android/web sets — no text.styles counterpart exists, so the canonical value stays label_large pending design/token reconciliation (see sync report); iOS uses Label/Large Bold (except the xsmall size, which stays regular Label/Large) */
  --dinova-button-segmented-label: 500 13px/16px Inter, sans-serif;
  --dinova-segmentedbutton-label: 500 14px/16px Inter, sans-serif; /** Figma binds Android/Label/Medium Bold (Roboto SemiBold 14) — no text.styles bold counterpart at this size, so the nearest canonical style is used (same standing flag as the Buttons Medium labels); the style is bound only on Density=0 variants, other densities carry the raw font */
  --dinova-card-title-font: 400 17px/22px Inter, sans-serif; /** Figma uses 'Android/Body/Large Bold', which has no text.styles counterpart; the regular-weight body_large is synced until design reconciles it */
  --dinova-card-supporting-font: 400 12px/16px Inter, sans-serif; /** Secondary line under the title ('Placeholder content' in the set) */
  --dinova-chip-label: 500 14px/16px Inter, sans-serif; /** Figma binds 'Android/Label/Medium Bold' (Roboto SemiBold 14) — no text.styles counterpart exists, so this maps to the nearest existing style label_medium (14 medium) pending design/token reconciliation, same standing issue as the button label (see sync report) */
  --dinova-datepicker-modal-weekday-typography: 400 16px/22px Inter, sans-serif;
  --dinova-datepicker-modal-fullscreen-date-typography: 600 20px/25px Inter, sans-serif; /** The full-screen header shows the selected range at Headline/Small instead of the dialog's Headline/Large */
  --dinova-datepicker-calendar-weekday-typography: 500 13px/16px Inter, sans-serif;
  --dinova-datepicker-calendar-day-typography: 600 20px/25px Inter, sans-serif;
  --dinova-dialog-title-style: 600 22px/28px Inter, sans-serif;
  --dinova-dialog-body-style: 400 16px/22px Inter, sans-serif;
  --dinova-list-row-label: 400 16px/22px Inter, sans-serif; /** Row title — 'Android/Body/Medium' and 'iOS/Body/Medium', same rank on both platforms */
  --dinova-list-row-overline: 400 12px/16px Inter, sans-serif; /** Optional overline above the label — Android/web only; the iOS set has no overline slot */
  --dinova-list-row-detail: 500 14px/16px Inter, sans-serif; /** Trailing detail text lines (Detail 1 / Detail 2) */
  --dinova-list-expanding-row-header-label: 400 16px/22px Inter, sans-serif;
  --dinova-list-expanding-row-body-style: 400 15px/20px Inter, sans-serif; /** Expanded body copy. The Android set binds the iOS-prefixed style 'iOS/Body/Small' — synced as bound, styling gap flagged (see sync report) */
  --dinova-list-expanding-row-view-all-label: 700 15px/20px Inter, sans-serif;
  --dinova-list-subheading-link: 700 15px/20px Inter, sans-serif; /** 'More' trailing link on the link variation */
  --dinova-list-swipe-action-label: 500 14px/16px Inter, sans-serif; /** Label above the action circle on Tall rows */
  --dinova-menu-item-label-text: 500 14px/16px Inter, sans-serif; /** Figma binds 'Android/Label/Medium' (Roboto Regular 14) */
  --dinova-menu-label-text: 500 14px/16px Inter, sans-serif; /** Figma binds 'Android/Label/Medium' (Roboto Regular 14) */
  --dinova-progressindicator-label-text: 400 12px/16px Inter, sans-serif; /** Top labels. Figma binds 'Android/Caption/Small Bold' (Roboto SemiBold 12) — no text.styles counterpart exists, so the canonical value stays the regular caption_small pending design/token reconciliation (see sync report); iOS binds iOS/Label/Small */
  --dinova-progressindicator-label-helper-text: 400 12px/16px Inter, sans-serif; /** Android/Caption/Small and iOS/Caption/Small both map here — no override */
  --dinova-snackbar-label: 500 14px/16px Inter, sans-serif; /** Supporting text style (Figma binds Android/Label/Medium, Roboto Regular 14) */
  --dinova-snackbar-toast-label: 400 15px/20px Inter, sans-serif; /** Message style (Figma binds iOS/Body/Small) */
  --dinova-snackbar-banner-title-style: 400 15px/20px Inter, sans-serif; /** Figma binds iOS/Body/Small */
  --dinova-snackbar-banner-subtitle-style: 400 12px/16px Inter, sans-serif; /** Figma binds iOS/Caption/Small */
  --dinova-textfield-label: 400 16px/22px Inter, sans-serif; /** Resting label, placeholder and input text style (Figma binds Android/Body/Medium, Roboto 16 — the web set carries the same Android styles, standing flag). iOS 26 uses iOS/Body/Large (17) in its own label-above layout — reported, not tokenized. */
  --dinova-textfield-label-floating: 400 12px/16px Inter, sans-serif; /** The floated (shrunk) label */
  --dinova-textfield-supporting-style: 400 12px/16px Inter, sans-serif;
}

[data-theme="dark"] {
  --dinova-theme-elevation-0: none; /** Flat · no shadow */
  --dinova-theme-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 1), 0px 2px 5px 3px rgba(0, 0, 0, 0.3);
  --dinova-theme-elevation-2: 0px 1px 3px 0px rgba(0, 0, 0, 0.8), 0px 4px 8px 3px rgba(0, 0, 0, 0.4);
  --dinova-theme-elevation-3: 0px 2px 3px 0px rgba(0, 0, 0, 0.6), 0px 6px 10px 4px rgba(0, 0, 0, 0.3);
  --dinova-theme-elevation-4: 0px 4px 4px 0px rgba(0, 0, 0, 0.6), 0px 8px 12px 6px rgba(0, 0, 0, 0.3);
  --dinova-theme-brand-apple: var(--dinova-colors-apple-400);
  --dinova-theme-brand-cherry: var(--dinova-colors-cherry-300);
  --dinova-theme-brand-grain: var(--dinova-colors-grain-400);
  --dinova-theme-brand-orange: var(--dinova-colors-grain-600);
  --dinova-theme-semantic-success-default: var(--dinova-colors-apple-400);
  --dinova-theme-semantic-success-subtle: var(--dinova-colors-apple-800);
  --dinova-theme-semantic-success-text: var(--dinova-colors-apple-200);
  --dinova-theme-semantic-success-border: var(--dinova-colors-apple-700);
  --dinova-theme-semantic-error-default: var(--dinova-colors-cherry-300);
  --dinova-theme-semantic-error-subtle: var(--dinova-colors-cherry-800);
  --dinova-theme-semantic-error-text: var(--dinova-colors-cherry-200);
  --dinova-theme-semantic-error-border: var(--dinova-colors-cherry-700);
  --dinova-theme-semantic-warning-default: var(--dinova-colors-grain-500);
  --dinova-theme-semantic-warning-subtle: var(--dinova-colors-grain-800);
  --dinova-theme-semantic-warning-text: var(--dinova-colors-grain-200);
  --dinova-theme-semantic-warning-border: var(--dinova-colors-grain-700);
  --dinova-theme-semantic-caution-default: var(--dinova-colors-grain-400);
  --dinova-theme-semantic-caution-subtle: var(--dinova-colors-grain-800);
  --dinova-theme-semantic-caution-text: var(--dinova-colors-grain-100);
  --dinova-theme-semantic-caution-border: var(--dinova-colors-grain-700);
  --dinova-theme-semantic-info-default: var(--dinova-colors-slate-200);
  --dinova-theme-semantic-info-subtle: var(--dinova-colors-slate-800);
  --dinova-theme-semantic-info-text: var(--dinova-colors-slate-200);
  --dinova-theme-semantic-info-border: var(--dinova-colors-slate-500);
  --dinova-theme-surface-background: var(--dinova-colors-black);
  --dinova-theme-surface-card: var(--dinova-colors-slate-900);
  --dinova-theme-surface-elevated: var(--dinova-colors-slate-800);
  --dinova-theme-surface-overlay: var(--dinova-colors-slate-700);
  --dinova-theme-surface-inverse: var(--dinova-colors-white);
  --dinova-theme-surface-brand: var(--dinova-colors-apple-700);
  --dinova-theme-surface-onbrand: var(--dinova-colors-white);
  --dinova-theme-text-primary: var(--dinova-colors-slate-50);
  --dinova-theme-text-secondary: var(--dinova-colors-slate-200);
  --dinova-theme-text-tertiary: var(--dinova-colors-slate-300);
  --dinova-theme-text-disabled: var(--dinova-colors-slate-600);
  --dinova-theme-text-inverse: var(--dinova-colors-white);
  --dinova-theme-text-onbrand: var(--dinova-colors-white);
  --dinova-theme-text-onbrand-strong: var(--dinova-colors-white);
  --dinova-theme-text-onbrand-subtle: var(--dinova-colors-apple-100);
  --dinova-theme-border-default: var(--dinova-colors-slate-500);
  --dinova-theme-border-strong: var(--dinova-colors-slate-450);
  --dinova-theme-border-focus: var(--dinova-colors-apple-400);
  --dinova-theme-border-error: var(--dinova-colors-cherry-400);
  --dinova-theme-border-warning: var(--dinova-colors-grain-500);
  --dinova-theme-interactive-default: var(--dinova-colors-apple-400);
  --dinova-theme-interactive-hover: var(--dinova-colors-apple-350);
  --dinova-theme-interactive-pressed: var(--dinova-colors-apple-500);
  --dinova-theme-interactive-disabled: var(--dinova-colors-slate-700);
  --dinova-theme-interactive-focus: var(--dinova-colors-apple-400);
  --dinova-theme-interactive-subtle: var(--dinova-colors-apple-800);
  --dinova-theme-interactive-tint-hover: var(--dinova-colors-slate-800);
  --dinova-theme-interactive-tint-pressed: var(--dinova-colors-black);
  --dinova-theme-interactive-text: var(--dinova-colors-apple-400);
  --dinova-theme-interactive-selected: var(--dinova-colors-apple-700);
  --dinova-theme-interactive-selected-disabled: var(--dinova-colors-apple-800);
  --dinova-theme-interactive-track: var(--dinova-colors-slate-700);
  --dinova-theme-interactive-destructive-default: var(--dinova-colors-cherry-300);
  --dinova-theme-interactive-destructive-hover: var(--dinova-colors-cherry-250);
  --dinova-theme-interactive-destructive-pressed: var(--dinova-colors-cherry-400);
  --dinova-theme-interactive-destructive-subtle: var(--dinova-colors-cherry-800);
}