:root { /* iOS safe-area insets. The native app bridge overrides these at runtime via inline style on (see the isIOS() handler in (app)/+layout.svelte), because env() resolves to 0 inside the app webview. Keep them defined here so plain browsers get the env() fallback and so static CSS analysis never classifies the variables as undefined/dead. */ --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); /* BASE COLORS */ /* Below are all the colors that are allowed to be used throughout the LIGHT theme of the breeze dashboard */ /* BLUE */ --color-blue-50: #f3f9ff; --color-blue-100: #e8f3ff; --color-blue-200: #d1e7ff; --color-blue-300: #a4ceff; --color-blue-400: #76b6ff; --color-blue-500: #499dff; --color-blue-600: #1b85ff; --color-blue-700: #166acc; --color-blue-800: #105099; --color-blue-1000: #051b33; /* GREEN */ --color-green-100: #e7f8f0; --color-green-500: #41c588; --color-green-600: #12b76a; --color-green-700: #0e9255; --color-green-900: #07492a; /* ORANGE */ --color-orange-100: #fef4e6; --color-orange-500: #f9a63a; --color-orange-600: #f79009; --color-orange-700: #c67307; --color-orange-800: #945605; /* RED */ --color-red-100: #feeceb; --color-red-200: #fcdad7; --color-red-300: #f9b4af; --color-red-400: #f68f88; --color-red-500: #f36960; --color-red-550: #d34b38; --color-red-600: #f04438; --color-red-650: #ea4335; --color-red-650-33: #ea433533; --color-red-700: #c0362d; --color-red-800: #902922; /* Error-state red tint/dark — promoted from shopify.css so the analytics error box resolves outside the Shopify-embed context too (shopify.css keeps its own copies). */ --color-red-tint: var(--color-red-100); --color-red-dark: #8e1f0b; /* YELLOW */ --color-yellow-100: #fffbee; --color-yellow-500: #ffe279; --color-yellow-600: #ffdb58; --color-yellow-650: #ffc233; --color-yellow-700: #ccaf46; --color-yellow-800: #998335; --color-yellow-900: #665823; /* MAGENTA */ --color-magenta-100: #fbecfe; --color-magenta-700: #aa36c1; /* TEAL */ --color-teal-500: #44c5b1; /* CYAN */ --color-cyan-100: #e6f7fb; --color-cyan-600: #06aed4; --color-cyan-700: #058baa; /* PURPLE */ --color-purple-100: #f7f2fc; --color-purple-400: #c89afc; --color-purple-500: #ac71f0; --color-purple-600: #8f49de; /* Theme-invariant pure white — used by semantic tokens that always need * a white surface or label regardless of light/dark (brand-blue buttons, * accent chips). --color-gray-0 flips to dark in [theme='dark']; this * one does not. Keep in sync with --color-white-60 below if both are * needed in light theme. */ --color-white: #fff; --color-white-60: #fff9; /* GRAY */ --color-gray-0: #fff; --color-gray-15: #fafaffcc; --color-gray-20: #fafaffff; --color-gray-25: #fafafa; --color-gray-50: #f9fafb; --color-gray-75: #fcfcfc; --color-gray-100: #f6f6f6; --color-gray-200: #f2f2f2; --color-gray-300: #ededed; --color-gray-350: #e5e7eb; --color-gray-400: #e1e1e1; --color-gray-450: #d7d9da; --color-gray-500: #d4d4d4; --color-gray-600: #c7c7c7; --color-gray-700: #bababa; --color-gray-800: #adadad; --color-gray-900: #a0a0a0; --color-gray-1000: #939393; --color-gray-1050: #9ca3af; --color-gray-1100: #868686; --color-gray-1200: #797979; --color-gray-1300: #6c6c6c; --color-gray-1350: #5d666f; --color-gray-1400: #5f5f5f; --color-gray-1450: #4b5563; --color-gray-1500: #525252; --color-gray-1600: #454545; --color-gray-1700: #383838; --color-gray-1725: #313334; --color-gray-1750: #323436; --color-gray-1800: #2b2b2b; --color-gray-1825: #222527; --color-gray-1850: #2a2b2c; --color-gray-1900: #1e1e1e; --color-gray-1950: #1f2021; --color-gray-2000: #111; --color-transparent: transparent; /* PRIMARY */ --color-primary: #2563eb; /* BEIGE */ /* BASE SHADOWS */ --shadow-xs: 0px 1px 2px 0px #00000014; --shadow-sm: 0px 1px 2px -1px #0000001a, 0px 1px 3px 0px #1018281a; --shadow-md: 0px 2px 4px -2px #0000000d, 0px 4px 6px -1px #1018281a; --shadow-lg: 0px 4px 6px 0px #0000000d, 0px 10px 15px -3px #1018281a; --shadow-xl: 0px 10px 10px 0px #0000000a, 0px 20px 25px -5px #1018281a; --shadow-2xl: 0px 2.7px 9px 0px #00000014, 0px 9.4px 24px 0px #00000017, 0px 21.8px 43px 0px #0000000d; --shadow-hero-card: 0 0 4px 0 #1570ef1a; --shadow-primary: rgb(0 0 0 / 10%); --shadow-color: rgb(0 0 0 / 10%); /* --color-blue-600 with 10% opacity */ --filter-grayscale-blue: grayscale(100%) sepia(100%) hue-rotate(220deg) saturate(500%) brightness(0.8); --shadow-offer-preview: 0 0 8px 0 rgb(47 83 119 / 12%); --shadow-checkout-preview-card: 0 0 4px 0 rgb(47 83 119 / 12%); /* Phone shell — fixed dark border regardless of theme */ --phone-shell-border-color: var(--color-gray-1850); /* iPhone-frame device mockup — fixed dark hardware colors, theme-independent */ --phone-frame-outer: #1f1f1f; --phone-frame-inner: #191919; --phone-frame-hardware: #101010; --phone-frame-camera-lens: #2d4d76; /* Offer Preview Card Gradient */ --bg-gradient-offer-preview: linear-gradient(to right, #f9f9ff, #fff 46.55%, #f9f9ff); --color-checkout-preview-heading: var(--color-blue-400); /* Ripple Effect */ --ripple-duration-in: 150ms; --ripple-duration-out: 200ms; /* Transitions */ --transition-fast: background 0.1s; --transition-medium: opacity 0.15s; --transition-duration-fast: 0.2s; /* Opacity */ --opacity-muted: 0.6; --opacity-drag-handle: 0.4; --opacity-hover-faint: 0.8; /* Letter spacing */ --letter-spacing-heading-compact: -0.18px; --letter-spacing-uppercase-sm: 0.5px; /* Orb UI Colors (Defaults used in OrbScene.svelte) */ /* Added fallback */ /* background Color */ --max-select-width: 250px; --full-width: 100%; --full-height: 100%; --box-shadow: var(--color-gray-400) 0px 1px 2px 0px; --bg-canvas: var(--color-gray-75); /* Tombstone aliases for tokens referenced by components but previously undefined — defined centrally so they resolve to design-system values everywhere instead of falling back to browser defaults. */ --color-text-tertiary: var(--text-color-muted); /* Error-subtle background palette value (pale pink). No existing red-scale token holds this value; dark parity is set in the [theme='dark'] block. */ --color-red-muted: #fce4e4; --ai-bg-header: var(--bg-color-secondary); --font-family-inter-display: var(--font-family); --font-size-base: var(--font-size-xs); --line-height-base: var(--line-height-xs); --text-faint: var(--text-color-secondary); --bg-color-primary: var(--color-gray-25); --bg-color-secondary: var(--color-gray-0); --bg-color-tertiary: var(--color-gray-300); /* @juspay/svelte-ui-components Shimmer token mapping — its CSS vars point at the project bg tokens above so light/dark themes flip automatically (theme tokens are reassigned under [theme='dark'] elsewhere in this file). */ --shimmer-background: var(--bg-color-secondary); --shimmer-highlight: var(--bg-color-tertiary); /* Canonical loading-skeleton corner radius — the single source of truth so pages no longer pin it per shimmer. Pages with a deliberately different radius still override locally. */ --shimmer-border-radius: var(--radius-sm); --bg-color-subtle: var(--color-gray-50); --bg-color-inverted: var(--color-gray-1800); /* Pressed/active background for secondary + ghost buttons. --color-gray-1825 is not remapped by temp.css, so it stays dark on the /ai surface. */ --bg-color-button-active: var(--color-gray-1825); --bg-color-focus-primary: var(--color-blue-50); --bg-color-focus-secondary: var(--color-blue-200); --bg-color-success-primary: var(--color-green-100); --bg-color-success-secondary: var(--color-green-700); --bg-color-danger-primary: var(--color-red-600); --bg-color-danger-secondary: var(--color-red-300); --bg-color-warning-primary: var(--color-orange-100); --bg-color-button-primary: var(--color-blue-600); /* Selected sidebar nav row fill. A neutral slate (not the brand blue) that holds up with white text/icon in both light and dark — gray-1350 is theme-stable so the highlight stays the same slate across themes. */ --bg-color-sidebar-nav-selected: var(--color-gray-1350); --bg-color-button-secondary: var(--color-gray-1500); --bg-color-button-tertiary: var(--color-gray-0); --bg-color-checkbox-checked: var(--color-blue-600); --bg-color-tag: var(--color-blue-600); --bg-color-tag-active: var(--color-green-100); --bg-color-tag-scheduled: var(--color-blue-100); --bg-color-tag-paused: var(--color-orange-100); --bg-color-tag-failure: var(--color-red-100); --bg-color-tag-inactive: var(--color-gray-200); --bg-color-tag-neutral: var(--color-gray-100); --bg-color-tag-refunded: var(--color-cyan-100); /* Neutral subtle surface — for hover states, secondary panel rows, etc. Auto-themes via gray-100 base (#f6f6f6 light → #222 dark). */ --surface-secondary: var(--bg-color-secondary); /* Banner / inline-callout colors (matches Tag.svelte token pattern) */ --bg-color-banner-info: var(--color-blue-100); --bg-color-banner-warning: var(--color-yellow-100); --border-color-banner-info: var(--color-blue-300); --border-color-banner-success: var(--color-green-500); --border-color-banner-warning: var(--color-yellow-500); --border-color-banner-error: var(--color-red-500); --text-color-banner-info: var(--color-blue-700); --text-color-banner-success: var(--color-green-700); --text-color-banner-warning: var(--color-yellow-700); --text-color-banner-error: var(--color-red-700); /* Library Banner (@juspay/svelte-ui-components) base defaults — a bare renders on-system (no library hex fallbacks); the .global-banner-* recipes override only the colors / radius that differ from this base. */ --banner-background: var(--bg-color-banner-info); --banner-color: var(--text-color-banner-info); --banner-cursor: default; --banner-position: static; --bg-color-created: var(--color-magenta-100); --bg-color-button-primary-hover: var(--color-blue-800); --bg-color-failure-primary: var(--color-red-100); --bg-color-warning-mid-transparent: var(--color-orange-800); --bg-color-enabled: var(--color-white); --bg-color-success-indicator: var(--color-green-500); /* Translucent overlay for blur-card / coming-soon panels (auto-themes via --bg-color-secondary) */ /* WebCamera component colors */ /* text color */ --color-text: var(--color-gray-2000); --text-color-primary: var(--color-gray-1800); --text-color-secondary: var(--color-gray-1500); --text-color-primary-light: var(--text-color-secondary); --font-color: var(--color-text); --color-text-primary: var(--color-text); --color-text-secondary: var(--text-color-secondary); --text-color-placeholder: var(--text-color-secondary); --text-color-created: var(--color-magenta-700); /* Caption/tertiary content text sits at near-black gray-1800 (#2b2b2b) to match production — fixes a regression where it rendered at the lighter gray-900. Feeds span, .txt-body-secondary, captions, Select text, toast subtitles and page subheadings; --text-color-secondary itself stays at the lighter gray-1500. */ --text-color-tertiary: var(--color-gray-1800); /* Stronger emphasis than --text-color-primary — for headlines that need maximum contrast (analytics card titles, drawer-action labels). */ --text-color-emphasis: var(--color-gray-2000); /* Meta / caption text — sits between --text-color-secondary and --text-color-placeholder. */ --text-color-meta: var(--color-gray-1300); --text-color-inverted: var(--color-gray-0); /* Text that sits on a brand-blue / accent fill (primary buttons, blue chips). * Always white regardless of theme — the inverted token flips to dark in * [theme='dark'], which puts dark text on a blue button and is unreadable. */ --text-color-on-accent: var(--color-white); --text-color-warning: var(--text-color-warning-status); --text-color-focus: var(--color-blue-600); --text-color-checkout-preview-heading: var(--color-checkout-preview-heading); --text-color-checkout-preview-delivery: var(--bg-color-success-accent); --text-color-accent-blue: var(--color-blue-700); --text-color-success: var(--color-green-700); --text-color-tag-active: var(--color-green-700); --text-color-tag-paused: var(--color-orange-700); --text-color-tag-inactive: var(--color-gray-1700); --text-color-tag-refunded: var(--color-cyan-700); --text-color-tag-pending: var(--color-yellow-900); /* Semantic token for rate-count pill text (used by .global-pill-rate-count). */ --text-color-rate-count: var(--color-cyan-600); --text-color-danger: var(--color-red-600); --text-color-failure: var(--color-red-800); --text-color-error: var(--text-color-danger); --text-color-muted: var(--color-gray-1400); --text-color-disabled: var(--color-gray-600); --text-color-description: var(--text-color-secondary); --text-color-hint: var(--text-color-secondary); --text-color-error-alt: var(--text-color-danger); /* Warning status badge text — readable orange on the warning-primary background. * Use instead of the bg token as text color (--bg-color-warning-mid-transparent). */ --text-color-warning-status: var(--color-orange-800); --bg-color-hover: var(--color-gray-100); /* borders */ --border-primary: 1px solid var(--color-gray-400); --border-secondary: 1px solid var(--color-gray-800); --border-color-strong: var(--color-gray-800); --border-tertiary: 2px solid var(--color-gray-100); --border-focus: 1px solid var(--color-blue-600); --border-icon-round: 2px solid var(--color-gray-300); --border-focus-thicker: 2px solid var(--color-blue-600); --border-primary-dashed: 1.6px dashed var(--color-gray-800); --border-success-dashed: 1px dashed var(--color-green-600); --border-warning: 1px solid var(--color-orange-700); --border-color-secondary: var(--color-gray-400); --border-color-muted: var(--color-gray-200); --border-color-hover: var(--color-gray-2000); --border-color-focus: var(--color-blue-600); --border-color-danger: var(--color-red-600); /* Divider — lighter than --border-color-primary, for in-card row separators. Auto-themes via gray-300 base (#ededed light → #333 dark). */ --border-color-divider: var(--color-gray-300); --border-divider: 1px solid var(--color-gray-300); --border-bold-warning: 4px solid var(--color-orange-700); --border-bold-success: 4px solid var(--color-green-700); --border-bold-danger: 4px solid var(--color-red-600); --border-bold-info: 4px solid var(--color-blue-600); --border-confirmation-card: 1px solid var(--ai-border-color); --border-modal-footer: 1px solid var(--border-color-divider); /* Light-theme values for tokens otherwise defined only under [theme='dark'], so their consumers (chart "view more" link, offers hero card, cart warning icon) resolve in light instead of falling back to an undefined value. */ --text-color-link: var(--text-color-focus); --warning-icon-size: 20px; /* Statistics-card / metric trend colours — previously defined only under [theme='dark'], so in light mode the trend arrow + percentage resolved via each consumer's ad-hoc fallback instead of the design green/red/neutral. */ --change-metric-color-positive: var(--color-green-600); --change-metric-color-negative: var(--color-red-600); --change-metric-color-neutral: var(--text-color-secondary); --bg-gradient-hero-card: linear-gradient( to right, var(--bg-color-focus-primary), var(--bg-color-secondary) 46.55%, var(--bg-color-focus-primary) ); --border-primary-blue: 1px solid var(--color-blue-500); --border-neutral: 1px solid var(--color-transparent); --border-error: 1px solid var(--color-red-500); --border-input: 1px solid var(--color-gray-350); --tooltip-border-radius: var(--border-radius-tooltip); --tooltip-max-width: var(--spacing-250); --tooltip-padding: var(--spacing-xs) var(--spacing-md); /* The library Tooltip reads --tooltip-font-family with no fallback; leaving it undefined let the bubble fall back to the browser serif default. Wire it to the design-system font so the tooltip matches body text (Inter/Manrope per theme) instead of Times. */ --tooltip-font-family: var(--font-family, sans-serif); /* The bubble background stays the library default (dark in both themes), so the label must be light in both. --text-color-on-accent is the design system's theme-invariant white (used for text on accent fills; it never flips, unlike --text-color-inverted). The arrow colour is intentionally left unset so the library defaults it to the bubble background — the arrow always matches the bubble in both themes, with no palette grays. */ --tooltip-color: var(--text-color-on-accent); /* padding */ --padding-confirmation-card-button: 12px 24px; --padding-input-primary: 12px 14px; --padding-input-secondary: 10px 12px; --padding-card: 16px; --padding-table-row: 10px 20px; --padding-offers-table-row: 12px 24px; /* Base tag padding */ --padding-tag: var(--spacing-2) var(--spacing-12); --padding-tab-inside: 10px 8px; /* Offer validity tag colors */ /* border radius */ --border-radius-card: 24px; --border-radius-donut-card: 0px 0px 12px 12px; --border-radius-highchart: 12px 12px 0px 0px; --border-radius-long-card: 24px; --border-radius-checkbox: 4px; --border-radius-table: 8px; --border-radius-table-pagination: 8px 8px 0px 0px; --border-radius-tooltip: 2px; --border-radius-logo-round: 50px; /* margin */ --margin-confiramtion-card: 12px 0px; --margin-long-card: 0px 0px 24px 0px; /* order page */ /* labeled field component */ /* missing orders modal content */ --missing-orders-modal-field-min-width: calc(50% - var(--spacing-12)); /* missing orders display widget */ --missing-orders-modal-body-min-height: 25vh; --order-detail-card-bg: var(--bg-color-secondary); /* Text size */ /* table */ --scrollable-table-height: 250px; /* The table's single outer frame (applied to .inner-container). Per-row dividers are removed separately on .grid-row, so this is the only border. */ --table-border: 1px solid var(--color-gray-400); --table-container-width: 100%; --table-header-border-bgcolor: var(--bg-color-secondary); --table-row-hover-bgcolor: var(--bg-color-primary); /* library Table CSS var mappings. Typography matched to what the project Table rendered via the design system: title =

(--font-size-xl / semibold / --text-color-secondary), header = (--font-size-xs / medium / --text-color-primary-light), cell = (--font-size-xs). The library hardcodes its own sizes (18/13/14px), so map its vars to the same design-system tokens. */ --table-title-color: var(--text-color-secondary); --table-title-font-size: var(--font-size-xl); --table-header-color: var(--text-color-primary-light); --table-header-font-size: var(--font-size-xs); --table-header-font-weight: var(--font-weight-medium); --table-header-letter-spacing: normal; --table-content-color: var(--text-color-primary); --table-row-border: var(--table-border); /* DataGrid/TableWithSearch row dividers default to the same value as the library Table's row border so every table shows consistent inner row lines in both themes (auto-themes via --table-border → --color-gray-400). Contexts that need borderless rows set --grid-row-divider: none on their wrapper. */ --grid-row-divider: var(--table-row-border); /* The project Table used overflow:visible (height auto) — it grew to fit all rows with no internal scroll or trailing dead space. Fit content here instead of the fixed 250px scroll bound so few-row analytics tables don't show empty space below. */ --table-container-height: fit-content; --table-padding: var(--padding-table-row); --table-header-background: var(--table-header-border-bgcolor); --table-content-background: var(--table-header-border-bgcolor); --table-row-background: var(--table-header-border-bgcolor); --table-row-hover-background: var(--table-row-hover-bgcolor); --table-empty-color: var(--text-color-secondary); --table-header-sticky-top: -1px; /* The library's default idle sort-icon opacity (0.3) is near-invisible on the dashboard background. Make the resting sort chevron clearly visible. (The library default is being raised to 0.5 in svelte-ui-components PR #254; this override gives us the visible icon now and is harmless once that lands.) */ --table-sort-idle-opacity: 0.6; /* The project Table rendered scrollable cell content at natural height (height:auto). The library's content-scroll otherwise pins each cell to a fixed height, which bloated row height and dropped visible-row count. Keep cells natural-height so density matches the original. */ --scrollable-column-height: auto; /* icon */ --common-icon-height: 16px; --common-icon-width: 16px; --icon-size-xs: 14px; --icon-size-md: 16px; --icon-size-lg: 20px; --icon-size-xl: 24px; --icon-size-3xl: 32px; --icon-size-5xl: 48px; /* The product's global theme-toggle look — set once for every library * ThemeSwitcher so callsites need no class for theming (only placement). * Mirrors the --button-* / --table-* central-default pattern. */ --theme-switcher-icon-color: var(--text-color-primary); --theme-switcher-border-radius: var(--radius-full); --theme-switcher-icon-size: var(--icon-size-xl); --theme-switcher-bg-hover: var(--bg-color-hover); /* common components */ /* The product's ONE default button — primary tone, md size — set once for * every library Button. Callsites need no classes for this look; the only * sanctioned deviations are the small modifier classes in globalClasses.css * (secondary, ghost, destructive, sm/lg height, icon-only, text-left). */ --button-border-radius: var(--radius-sm); --circle-radius: 50%; --button-padding: var(--spacing-sm) var(--spacing-rg); --button-width: fit-content; --button-font-size: var(--font-size-sm); --button-font-family: var(--font-family); --button-color: var(--bg-color-button-primary); --button-text-color: var(--text-color-on-accent); /* `initial` (the guaranteed-invalid value) makes the library Button fall back hover -> --button-color per button, instead of leaking this primary blue onto every transparent/ghost/custom-coloured button that does not set its own hover. Primary buttons are unchanged — their hover already equalled this rest colour. */ --button-hover-color: initial; --button-hover-text-color: var(--text-color-on-accent); --button-hover-border: var(--border-primary-blue); --button-color-disabled: var(--color-gray-300); --button-disabled-text-color: var(--text-color-primary-light); --button-disabled-border-color: var(--color-gray-400); --button-disabled-opacity: 1; --button-border: var(--border-neutral); --button-content-gap: var(--spacing-sm); --btn-icon-size: var(--spacing-md); /* @juspay/svelte-ui-components Button .disabled rule consumes * --disabled-font-size, --disabled-background-color, --disabled-text-color, * --disabled-border, and --disabled-opacity (no "button-" prefix). * These bridge vars map the project's --button-disabled-* tokens to the * library's expected names so both systems stay in sync. */ --disabled-font-size: var(--button-font-size, var(--font-size-xs)); --disabled-background-color: var(--button-color-disabled); --disabled-text-color: var(--button-disabled-text-color); --disabled-border: 1px solid var(--button-disabled-border-color); --disabled-opacity: var(--button-disabled-opacity); /* The library Modal scopes its own footer-button variables on * .footer-primary-button / .footer-secondary-button with hardcoded * fallbacks (dark-gray bg, white text, 0px radius, 16px padding) — none * of which match the design system. Wire each escape-hatch var to a * design token so every library Modal footer looks like the project's * own Button. */ --modal-footer-primary-button-color: var(--bg-color-button-primary); --modal-footer-primary-button-text-color: var(--text-color-inverted); --modal-footer-primary-button-border-radius: var(--radius-sm); --modal-footer-primary-button-padding: 10px 16px; --modal-footer-primary-button-font-weight: 600; --modal-footer-secondary-button-color: var(--bg-color-secondary); --modal-footer-secondary-button-text-color: var(--text-color-primary); --modal-footer-secondary-button-border: var(--border-primary); --modal-footer-secondary-button-border-radius: var(--radius-sm); --modal-footer-secondary-button-padding: 10px 16px; --modal-footer-secondary-button-font-weight: 600; /* Dialog geometry the legacy "Modal" block below doesn't cover — together * they form the product's ONE dialog look (white surfaces, hairline header * divider, md×rg paddings, flush body, 550px desktop width, comfortable * close-button tap target). Set once; every library Modal renders this with * zero classes. Sanctioned variants are the small modifiers in * globalClasses.css (-flush-header, -block, bottom-sheet, fixed-scroll, * overflow-visible, desktop-content). */ --modal-medium-width: var(--modal-desktop-content-width, 550px); --modal-body-padding: 0; /* Close button: a bare icon is a tiny tap target. A 20px icon plus padding * grows the wrapping button to a comfortable ~44px hit area with the icon * position intact (paired with the global .header-right-img content-box rule * in globalClasses.css, since the box-sizing:border-box reset would otherwise * let the padding eat the icon). */ --header-right-image-width: var(--spacing-20); --header-right-image-height: var(--spacing-20); --header-right-image-padding: var(--spacing-12); /* Scroll the body inside the content slot (hidden scrollbar) rather than the * rounded frame, so a tall modal never paints a system scrollbar across its * border-radius. Modals that host escaping dropdowns opt out via the * -overflow-visible modifiers in globalClasses.css. */ --modal-content-overflow: hidden; --modal-overflow-y: auto; /* The product's ONE paginator look. The library Pagination ships hardcoded * light-theme colors (#3a4550 text, #d1d5db borders — invisible on dark), * so map them onto theme tokens once here; [theme='dark'] flips them * automatically and callsites need no classes. */ --pagination-button-color: var(--text-color-secondary); --pagination-button-border: var(--border-primary); --pagination-button-border-radius: var(--radius-sm); --pagination-button-hover-color: var(--text-color-primary); --pagination-button-hover-background: var(--bg-color-hover); --pagination-active-color: var(--text-color-primary); --pagination-active-background: var(--bg-color-tertiary); --pagination-active-border: var(--border-primary); --pagination-ellipsis-color: var(--text-color-muted); /* Button Component - Focus & Pressed Shadows */ --btn-shadow-focus-primary: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-xs) var(--bg-color-focus-secondary); --btn-shadow-focus-destructive: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-xs) var(--color-red-200); --button-height: var(--spacing-40); --button-height-md: var(--spacing-40); --loader-foreground: var(--text-color-primary); --loader-foreground-end: var(--bg-color-primary); --list-item-padding: 16px 20px; --list-item-left-image-padding: 8px; --list-item-left-image-margin: auto; --list-item-right-image-padding: 8px; --list-item-margin: 10px 10px; --list-item-border-radius: var(--radius-sm); --list-item-border: 1px solid var(--border-color-secondary); --list-item-transition: 0.2s; --list-item-hover-border: 1px solid var(--border-color-hover); /* Library CheckListItem (@juspay/svelte-ui-components) — zero padding app-wide. The library reads --check-list-item-padding with no fallback, so without this the element inherits 0 from the browser default — but declaring it here makes the intent explicit and removes the redundant per-callsite overrides in StatisticsCard and PaymentMethodField. Only CheckListItem reads this var. */ --check-list-item-padding: 0; --modal-border-radius: var(--radius-sm); --recommendationbar-item-padding: 8px 16px; --recommendationbar-item-width: fit-content; /* Library Breadcrumb — app-wide token cluster. All breadcrumb callsites use the same appearance (wrapping, spaced items, gray separator). Centralising here means the classes= prop carries only margin/padding resets, not vars. */ --breadcrumb-list-gap: var(--spacing-sm); --breadcrumb-separator-color: var(--color-gray-900); --breadcrumb-flex-wrap: wrap; /* Centralized Scroller gap — all callsites inherit this; per-callsite overrides removed. */ --scroller-gap: var(--spacing-sm); /* Recommendations strip: 12px gap on mobile, 16px (spacing-md) at desktop. Both are scoped to .scattered-rec-scroller so other Scroller callsites keep the :root 8px default. */ @media (width < 768px) { .scattered-rec-scroller { --scroller-gap: var(--spacing-12); } } @media (width >= 768px) { .scattered-rec-scroller { --scroller-gap: var(--spacing-md); } } /* ChatView attachment-thumbnail strip — same per-callsite --scroller-gap override pattern as .scattered-rec-scroller above, kept here so every --scroller-gap override lives in theme.css. xs by default, sm on mobile. Behaviour unchanged. */ .chatview-attachments-scroller { --scroller-gap: var(--spacing-xs); } @media (width <= 767px) { .chatview-attachments-scroller { --scroller-gap: var(--spacing-sm); } } /* Library Tabs (@juspay/svelte-ui-components) — central token cluster. A bare ships hardcoded light hex fallbacks (white bar, #e0e0e0 underline, #1a73e8 active/indicator). Map every --tabs-* var to a semantic token so both themes resolve without any per-callsite/route override. The arrow vars chain to bar-background / item-color via CSS var() fallbacks, so they auto-follow. */ --tabs-bar-background: var(--color-transparent); --tabs-bar-gap: var(--spacing-md); --tabs-bar-border-bottom: var(--border-primary); --tabs-item-padding: var(--padding-tab-inside); --tabs-item-color: var(--text-color-secondary); --tabs-hover-color: var(--text-color-primary); --tabs-hover-background: var(--color-transparent); --tabs-active-color: var(--text-color-focus); --tabs-indicator-color: var(--text-color-focus); /* Library Pill (@juspay/svelte-ui-components) — default shape for status * pills in this app (matches the original global-pill-md footprint). * Fully-rounded pills (.global-pill-sm, e.g. wallet RewardRulesView) override * --pill-border-radius to var(--radius-full) via their shape class. * Color vars (--pill-background, --pill-color) stay per-status in the * global-pill- classes so each badge reads correctly in both themes. * --pill-dismiss-color chains to --pill-color so the dismiss glyph always * matches the chip text regardless of status. */ --pill-font-size: var(--font-size-xs); --pill-padding: var(--spacing-2) var(--spacing-12); --pill-border-radius: var(--radius-16); --pill-cursor: default; --pill-dismiss-color: var(--pill-color); /* cart dashboard */ /* cart home */ --cart-bg-secondary: var(--bg-color-secondary); --cart-home-title-color: var(--text-color-primary); --cart-home-btn-text: var(--text-color-secondary); --cart-home-action-btn-border: var(--spacing-1) solid var(--color-gray-450); --cart-home-icon-bg-purple: var(--color-purple-100); --cart-home-icon-bg-blue: var(--color-blue-100); /* cart — semantic colour tokens */ --cart-success-color: var(--color-green-700); /* cart editor */ --cart-editor-border: 1px solid var(--border-color-secondary); /* cart design */ --cart-design-input-padding: var(--spacing-sm) var(--spacing-12); --cart-design-input-width: 50%; --cart-design-divider-border: none; --cart-design-color-picker-size: var(--spacing-lg); /* cart coming soon (analytics & editor) */ --cart-coming-soon-icon-size: var(--spacing-64); --cart-coming-soon-icon-opacity: 0.5; /* chart */ --chart-color-primary: var(--color-yellow-500); --chart-color-secondary: var(--color-purple-500); --chart-bg-dark: var(--color-gray-1900); --chart-tooltip-bg: var(--ai-login-modal-background-color); --chart-tooltip-text: var(--text-color-on-accent); --chart-tooltip-border: var(--ai-border-color); --chart-grid-line: var(--border-color-divider); --chart-axis-line: var(--text-color-primary); --chart-label-color: var(--text-color-primary); --chart-axis-value-color: var(--text-color-primary); --chart-series-color-primary: var(--color-teal-500); --chart-series-color-secondary: var(--color-purple-400); --stacked-bar-chart-label-color: var(--text-color-secondary); /* AI AudioSynced chart label tokens */ --chart-label-muted: var(--text-color-secondary); --chart-legend-name-color: var(--text-color-secondary); --chart-legend-value-color: var(--text-color-primary); --chart-date-range-color: var(--text-color-muted); /* LineChart-specific variables */ --line-chart-secondary-color: var(--color-blue-300); --line-chart-text-color: var(--color-gray-1600); --line-chart-primary-width: var(--spacing-12); --line-chart-primary-height: var(--spacing-12); /* DataGrid-specific variables */ --data-grid-hover-color: var(--text-color-primary); --datagrid-container-border-radius: var(--border-radius-table); --datagrid-header-bg: var(--table-header-background); --datagrid-header-height: var(--spacing-48); --datagrid-header-font-size: var(--table-header-font-size); --datagrid-cell-min-height: var(--spacing-64); --grid-column-width: var(--spacing-60); --datagrid-summary-row-bg: var(--bg-color-secondary); --datagrid-cell-hover-bg: var(--table-row-hover-background); --datagrid-header-padding: var(--spacing-md) var(--spacing-lg); /* IconStack inside the DataGrid avatar-stack column — the product's ONE * IconStack look (28 px square chips, rounded-6, hover bg, semibold initials). * Set once at :root; all theming inherits into the component without any * per-callsite class. The .grid-cell parent already provides display:flex + * align-items:center + gap so no wrapper div is needed. NOTE: * --text-conatiner-* mirrors the library's misspelled variable name verbatim * — do not "correct" it or the size binding breaks. */ --stack-icon-width: var(--spacing-28); --stack-icon-height: var(--spacing-28); --text-conatiner-width: var(--spacing-28); --text-conatiner-height: var(--spacing-28); --stack-icon-radius: var(--radius-6); --stack-icon-border: var(--border-tertiary); --stack-icon-bg: var(--bg-color-hover); --stack-icon-shadow: none; --stack-icon-margin: 0px 0px 0px calc(-1 * var(--spacing-sm)); --stack-container-margin: 0px 0px 0px var(--spacing-sm); /* IconStack initial-letter color. --text-color resolves via --text-color-primary, which is remapped in [theme='dark'] (gray-1800 → #e0e0e0). If this token chain ever changes, verify the dark-theme override in the [theme='dark'] block still provides a legible initials color on --stack-icon-bg. */ --text-color: var(--text-color-primary); --text-size: var(--font-size-xs); --text-weight: var(--font-weight-semibold); /* Tooltip (library @juspay/svelte-ui-components Tooltip). The library reads --tooltip-z-index (default 1000); the project tooltip floated at 9999 so it sat above overlays/modals/portals (1100–1201). Keep that stacking so a tooltip opened from within a dialog or sticky header is never occluded. */ --tooltip-z-index: 9999; /* toast */ --toast-success-border: var(--border-bold-success); --toast-info-border: var(--border-bold-info); --toast-warn-border: var(--border-bold-warning); --toast-error-border: var(--border-bold-danger); --toast-border-style: none none none solid; --toast-icon-wrapper-width: 18px; --toast-icon-wrapper-height: 18px; --toast-close-button-width: 16px; --toast-close-button-height: 16px; --toast-align-items: none; --toast-width: 400px; --toast-left: auto; --toast-right: 20px; --toast-border-radius: 4px; --toast-top: calc(100vh - 140px); --toast-error-text: var(--text-color-danger); --toast-warn-text: var(--text-color-warning); --toast-info-text: var(--text-color-accent-blue); --toast-success-text: var(--text-color-primary); --toast-background-color: var(--bg-color-primary); --toast-subtext-color: var(--text-color-tertiary); /* RowActionsMenu popover defaults — light mode uses the same emphasis * + danger tokens the component already consumed, dark mirrors live in * the [theme='dark'] block. */ --row-action-text-color: var(--text-color-emphasis); --row-action-danger-text-color: var(--text-color-danger); /* analytics */ --analytics-table-box-height: var(--spacing-48); --analytics-stat-icon-width: var(--spacing-md); --analytics-stat-icon-height: var(--spacing-md); --analytics-table-primary-text-color: var(--color-gray-2000); /* loader */ --loader-size: 50px; --loader-background-color: var(--color-gray-0); --loading-text-margin-top: 25px; --loading-text-color: var(--color-gray-1500); --loader-animation-duration: 1s; /* login-modal */ /* descriptive-tile */ --tile-border-color: var(--color-gray-100); --tile-image-wrapper-border: 1px solid var(--tile-border-color); --tile-box-shadow: 0 0 5px var(--color-gray-0); --tile-title-font-size: 14px; /* calendar-month */ --calendar-day-cell-disabled-color: var(--color-gray-500); --calendar-day-cell-selected-color: var(--color-gray-0); --calendar-day-cell-selected-bg-color: var(--color-blue-600); --calendar-day-cell-selected-bg-hover-color: var(--color-blue-700); --calendar-day-cell-bg-color: var(--color-blue-100); --calendar-day-cell-in-range-z-index: 1; --calendar-day-cell-selected-after-z-index: 2; --calendar-day-cell-day-text-z-index: 3; --calendar-range-bg-offset: -2px; --calendar-half-offset: 50%; --calendar-today-bg-color: var(--color-blue-100); --calendar-today-indicator-size: var(--spacing-xs); --calendar-time-font-color: var(--color-gray-2000); /* date-picker (project component) */ --date-picker-text-secondary-color: var(--color-gray-1500); --date-picker-text-tertiary-color: var(--color-gray-1400); --date-picker-bg-secondary-color: var(--color-gray-0); --date-picker-border-primary: var(--border-primary); --date-picker-sidebar-bg-color: var(--color-gray-75); --date-picker-preset-selected-bg-color: var(--color-blue-100); --date-picker-dropdown-width: var(--spacing-926); --date-picker-dropdown-height: var(--spacing-635); --date-picker-input-height: var(--spacing-48); --date-picker-input-width: var(--spacing-278); /* library DateRangePicker recipe tokens — wire project design tokens into * the library's --drp-* / --calendar-* slots so DateRangePicker and Calendar * blend with the existing project date-picker visuals. * Both :root and [theme='dark'] must define every token. */ --drp-trigger-background: var(--date-picker-bg-secondary-color); --drp-trigger-border: var(--date-picker-border-primary); --drp-trigger-border-radius: var(--radius-sm); --drp-trigger-color: var(--text-color-primary); --drp-trigger-padding: var(--spacing-sm) var(--spacing-md); --drp-trigger-min-width: 200px; --drp-trigger-gap: var(--spacing-sm); --drp-trigger-hover-border-color: var(--color-gray-600); --drp-trigger-open-border-color: var(--color-gray-1200); --drp-trigger-open-shadow: none; --drp-trigger-icon-color: var(--text-color-primary); --drp-panel-background: var(--date-picker-bg-secondary-color); --drp-panel-border: var(--date-picker-border-primary); --drp-panel-border-radius: var(--radius-sm); --drp-panel-shadow: var(--shadow-lg); --drp-panel-z-index: 100; --drp-panel-offset: 4px; --drp-panel-min-width: 320px; --drp-panel-max-width: 800px; --drp-sidebar-border: var(--date-picker-border-primary); --drp-sidebar-padding: var(--spacing-md) var(--spacing-sm); --drp-sidebar-min-width: 148px; --drp-sidebar-max-height: 400px; --drp-preset-padding: var(--spacing-sm) var(--spacing-12); --drp-preset-border-radius: var(--radius-sm); --drp-preset-color: var(--date-picker-text-secondary-color); --drp-preset-hover-background: var(--bg-color-hover); --drp-preset-active-background: var(--date-picker-preset-selected-bg-color); --drp-preset-active-color: var(--text-color-primary); --drp-preset-active-hover-background: var(--date-picker-preset-selected-bg-color); --drp-preset-divider-border: var(--date-picker-border-primary); --drp-calendars-padding: var(--spacing-rg) var(--spacing-lg); --drp-calendars-gap: var(--spacing-lg); --drp-months-gap: var(--spacing-40); --drp-nav-btn-size: 32px; --drp-nav-btn-border-radius: var(--radius-xs); --drp-nav-btn-color: var(--text-color-primary); --drp-nav-btn-hover-background: var(--bg-color-hover); --drp-nav-chevron-border: 2px solid currentcolor; --drp-month-label-color: var(--text-color-primary); --drp-time-divider: var(--date-picker-border-primary); --drp-compare-divider: var(--date-picker-border-primary); --drp-footer-border: var(--date-picker-border-primary); --drp-footer-gap: var(--spacing-12); --drp-footer-padding: var(--spacing-rg) var(--spacing-lg); --drp-cancel-border-color: var(--color-gray-400); --drp-cancel-color: var(--text-color-primary); --drp-cancel-hover-background: var(--bg-color-hover); --drp-apply-background: var(--bg-color-button-primary); --drp-apply-color: var(--text-color-on-accent); --drp-apply-hover-background: var(--bg-color-button-primary-hover); --drp-apply-disabled-background: var(--color-gray-300); --drp-apply-disabled-color: var(--text-color-primary-light); /* library Calendar slot tokens */ --calendar-background: var(--date-picker-bg-secondary-color); --calendar-border: none; --calendar-box-shadow: none; --calendar-border-radius: var(--radius-sm); --calendar-padding: var(--spacing-sm); --calendar-width: 280px; --calendar-header-color: var(--text-color-primary); --calendar-day-name-color: var(--text-color-primary-light); --calendar-cell-color: var(--text-color-primary); --calendar-cell-hover-background: var(--bg-color-hover); --calendar-focus-ring-color: var(--color-blue-600); --calendar-today-border: 1px solid var(--color-gray-600); --calendar-selected-background: var(--bg-color-button-primary); --calendar-selected-color: var(--text-color-on-accent); --calendar-range-start-background: var(--bg-color-button-primary); --calendar-range-start-color: var(--text-color-on-accent); --calendar-range-end-background: var(--bg-color-button-primary); --calendar-range-end-color: var(--text-color-on-accent); --calendar-range-background: var(--date-picker-preset-selected-bg-color); --calendar-disabled-color: var(--color-gray-600); --calendar-outside-month-color: var(--text-color-secondary); /* Menu */ --menu-primary-width: var(--spacing-276); --menu-primary-height: var(--spacing-642); --menu-secondary-height: var(--spacing-40); --menu-tertiary-height: var(--spacing-20); --menu-primary-background: var(--color-gray-0); --menu-primary-hover-background: var(--color-gray-100); --menu-primary-active-background: var(--color-blue-100); --menu-text-primary-color: var(--text-color-primary); --menu-scrollbar-primary-color: var(--color-gray-500); --scrollbar-secondary: var(--color-gray-600); --menu-items-transition: scrollbar-color 0.2s ease; /* Library Menu (@juspay/svelte-ui-components) color bridge — maps the component's own CSS vars onto theme tokens so the dropdown follows light/dark theme. */ --menu-background-color: var(--bg-color-secondary); --menu-border: var(--border-primary); --menu-box-shadow: var(--shadow-md); --menu-item-color: var(--text-color-primary); --menu-item-hover-background-color: var(--bg-color-primary); --menu-item-focus-background-color: var(--bg-color-primary); --menu-separator-color: var(--border-color-secondary); /* Dropdown Component Defaults */ --dropdown-width: 100%; --dropdown-min-width: auto; --dropdown-header-height: var(--spacing-40); --dropdown-header-padding: var(--spacing-sm) var(--spacing-12); --dropdown-header-gap: var(--spacing-sm); --dropdown-body-width: fit-content; --dropdown-body-min-width: auto; --dropdown-body-right: var(--spacing-0); --dropdown-placeholder-font-size: var(--font-size-xs); --dropdown-placeholder-font-weight: var(--font-weight-semibold); --chevron-icon-size: var(--spacing-lg); --dropdown-sub-text-overflow: visible; --dropdown-sub-text-text-overflow: clip; --dropdown-sub-text-flex-shrink: 0; /* Input field */ --input-field-default-shadow: 0px 1px 2px 0px #10182814; --input-field-focus-shadow: 0px 0px 0px 4px #1b85ff26, 0px 1px 2px 0px #1018281a; --input-field-disabled-placeholder-color: var(--color-gray-600); /* Section */ --section-primary-width: var(--spacing-708); --section-primary-color: var(--color-gray-0); /* select */ /* Single source of truth for library Select trigger width. Sizes the trigger * to its content so there is no dead space after the chevron, and never below * its content (max-content, unlike fit-content, cannot collapse a multi-word * placeholder in a narrow parent). The only place a Select fills its container * is a form field, where JSONForm scopes --select-width: 100% to itself. */ --select-width: max-content; --item-padding: 10px; --select-font-family: var(--font-family); --select-color: var(--text-color-tertiary); /* The product's ONE look for the library Select, set once for every * instance; [theme='dark'] flips via the tokens. The library's own * defaults are hardcoded light hex (#cccccc borders, #2563eb focus ring, * #999 hover border), which diverge from the design system and break * dark mode. Two dark-only exceptions stay in the [theme='dark'] block * (selected/pill backgrounds whose light look keeps the library default). */ --select-trigger-border-radius: var(--radius-sm); --select-trigger-border: var(--border-primary); --select-trigger-background: var(--bg-color-secondary); --select-trigger-hover-border-color: var(--border-color-secondary); --select-trigger-focus-border-color: var(--bg-color-button-primary); --select-trigger-focus-shadow: 0 0 0 2px var(--bg-color-button-primary-hover); --select-dropdown-background: var(--bg-color-secondary); --select-dropdown-border: var(--border-primary); --select-dropdown-border-radius: var(--radius-sm); --select-placeholder-color: var(--text-color-tertiary); --select-arrow-color: var(--text-color-tertiary); --select-option-color: var(--text-color-primary); --select-option-hover-background: var(--bg-color-tertiary); --select-empty-color: var(--text-color-tertiary); --select-pill-color: var(--text-color-primary); --select-all-border-bottom: var(--border-primary); --select-apply-border-top: var(--border-primary); --select-apply-background: var(--bg-color-secondary); --input-width: 100%; /* The library's Input defaults its outer container to fit-content, * which shrinks form fields to the text-field intrinsic width and * clips placeholders ("your-shop-name.mysho", "by Breeze", etc.). * Form inputs in this app are always laid out in their parent container, * so fill the parent by default. */ --input-container-width: 100%; --change-metric-top-padding: 14px; --trend-icon-size: var(--common-icon-height); --trend-icon-inner-size: var(--common-icon-height); --input-height: 48px; --input-background: var(--color-gray-0); --input-radius: var(--radius-sm); --input-box-shadow: none; --input-margin: 0 0 6px 0; --input-container-margin: 0 0 15px 0; --input-border: 1px solid var(--color-gray-400); --input-focus-border: 1px solid var(--color-blue-600); --input-placeholder-color: var(--color-gray-900); --input-padding: 14px; --input-font-family: var(--font-family); --left-button-border-radius: 4px; --left-button-color: var(--color-transparent); --left-button-height: 52.5px; --left-button-padding: 4px; --container-margin: 8px; --container-padding: var(--spacing-32); --page-gutter-h: var(--spacing-32); --label-container-margin-bottom: 12px; --slider-checked-color: var(--color-blue-600); --slider-unchecked-color: var(--color-gray-500); --toggle-slider-before-background-color: var(--color-white); --app-header-background-color: var(--bg-color-primary); --app-header-border-bottom: var(--border-primary); --app-header-box-shadow: var(--box-shadow); /* Visual-audit semantic tokens. Each has a :root (light) default and a * matching [theme='dark'] mirror further down. Components MUST consume * these via var(--token, fallback) and MUST NOT define their own * [theme='dark'] selectors. */ /* Icon dark-fill safe-mode — SVGs with hardcoded dark fills need inversion * in dark mode. Opt in via .icon-dark-fill-safe class. */ --icon-ui-dark-filter: none; /* currentColor SVG icon inversion — SVGs that rely on currentColor for their * stroke/fill inherit the parent's CSS color. When rendered inside .icon-button * wrappers without an explicit color, they pick up dark values in light mode * and need no filter; in dark mode they must be inverted to read on dark surfaces. */ --icon-filter-invert: none; /* Sidebar nav highlight inset — pulls the SideBarV2 hover/selected highlight in * from the sidebar edges so it reads as a contained pill with clear left/right * spacing rather than spanning edge-to-edge. Paired with the row's small inside * padding so the icon still lands where it sits when unselected (~20px in). */ --sidebar-nav-inset: var(--spacing-12); /* Library Modal header typography tokens. The library reads --header-text-size * (fallback 16px) and --modal-header-text-weight (no fallback → 400). Wire to * design-system tokens so modals match the design system heading style. */ --header-text-size: var(--font-size-md); --modal-header-text-weight: var(--font-weight-semibold); /* NoData illustration filter — the light-mode raster artwork needs a * filter inversion to read on dark surfaces. */ --no-data-image-filter: none; /* EmptyState library component overrides — project illustrations are * large PNGs, not inline SVGs; opacity must be 1 and size driven by * each callsite via --empty-state-icon-size. The filter token bridges * the dark-mode inversion from --no-data-image-filter. */ --empty-state-icon-opacity: 1; --empty-state-icon-color: inherit; /* Native date input calendar indicator and DatePicker trigger icon — both * default to a dark glyph from the UA stylesheet. */ --date-input-indicator-filter: none; --date-picker-trigger-icon-filter: none; --recharge-input-icon-filter: none; /* Chart label text rendered ON an accent-coloured fill (funnel bars). * Must remain readable in both themes — defaults to white because the * accent fill is dark in both themes. */ /* Sidebar pill-tabs (AI History sidebar). Sidebar is force-dark in both * themes (it lives inside the AI route which is always dark) — values * use exact Figma hex rather than the gray-N scale because the gray-N * scale flips light↔dark and these surfaces must stay dark in light * theme too. */ --sidebar-tabs-bg: #1c1d1e; --sidebar-tab-text: #4f4f4f; --sidebar-tab-hover-text: #dcdee0; --sidebar-tab-active-bg: var(--color-gray-1825); --sidebar-tab-active-text: #dcdee0; /* @xyflow/svelte node / control / minimap surfaces. */ --flow-node-bg: var(--bg-color-secondary); --flow-node-text: var(--text-color-primary); --flow-control-bg: var(--bg-color-secondary); --flow-control-icon: var(--text-color-primary); --flow-minimap-bg: var(--bg-color-primary); --flow-minimap-mask: rgb(0 0 0 / 6%); --card-border-radius: var(--border-radius-card); --card-border: var(--border-primary); --card-opacity: 0px; --card-padding-expanded: 18px 20px; --card-box-shadow: var(--box-shadow); --card-image-display: block; --card-cursor: pointer; --card-icon-header-padding: 16px; --card-icon-subtext-padding: 0px 16px 16px 16px; --card-background-color: var(--bg-color-primary); --card-background: var(--bg-color-primary); --platform-padding-top: 3.5%; --platform-display: flex; --platform-flex-wrap: wrap; --platform-align-items: center; --onboarding-status-container-width: 468px; --tag-container-radius: 40px; --grid-row-bgcolor: var(--bg-color-secondary); --grid-border-collapse: collapse; --grid-text-align: left; --grid-column-width-auto: auto; --grid-col-width: fit-content; --grid-table-layout: fixed; --check-list-item-text-size: var(--font-size-xxs); --check-list-item-checked-font-weight: bold; /* Library Checkbox box theming (@juspay/svelte-ui-components). CheckListItem renders a Checkbox internally, so this themes both. Checked fill = dashboard blue, matching the legacy native accent-color; checkmark/dash stay white in both themes. All --checkbox-* vars are centralized here — no per-callsite overrides needed. container-display is flex (not inline-flex) so the label does not sit on a text line-box and baseline-pin to the top of the checkbox. */ --checkbox-container-display: flex; --checkbox-size: var(--spacing-md); --checkbox-icon-size: var(--spacing-12); --checkbox-border-radius: var(--border-radius-checkbox); --checkbox-border: var(--spacing-2) solid var(--text-color-placeholder); --checkbox-checked-background: var(--bg-color-checkbox-checked); --checkbox-checked-border: var(--spacing-2) solid var(--bg-color-checkbox-checked); --checkbox-indeterminate-background: var(--bg-color-checkbox-checked); --checkbox-indeterminate-border: var(--spacing-2) solid var(--bg-color-checkbox-checked); --checkbox-checkmark-color: var(--text-color-on-accent); --checkbox-dash-color: var(--text-color-on-accent); --checkbox-hover-border-color: var(--border-color-secondary); /* The product's ONE look for the library Radio, set once for every * instance. The library defaults are hardcoded light hex (#9e9e9e border, * #2196f3 selection, #333 label — invisible on dark), so wire them to * theme tokens here; [theme='dark'] flips them automatically and * callsites need no classes. Label typography matches the old project * RadioGroup's txt-label rendering. */ --radio-border: 2px solid var(--text-color-placeholder); --radio-selected-border: 2px solid var(--bg-color-checkbox-checked); --radio-selected-background: var(--bg-color-enabled); --radio-dot-color: var(--bg-color-checkbox-checked); --radio-dot-size: var(--spacing-12); --radio-hover-border: 2px solid var(--bg-color-checkbox-checked); --radio-background: var(--color-transparent); --radio-text-color: var(--text-color-primary); --radio-text-font-size: var(--font-size-xs); --radio-text-font-weight: var(--font-weight-medium); /* statistics card */ --statistics-value-color: var(--color-gray-1600); /* divider */ --horizontal-line-margin: 0 0 26px 0; /* breadcrumb */ /* legacy progress-bar vertical margin — still referenced by .global-info-block-label in globalClasses.css. The other --bar-* tokens were removed when project ProgressBar migrated to library Progress; their values are now declared inline on .global-progress-segmented. */ --bar-vertical-margin: 16px; /* progress bar card */ --bar-min-width: 480px; /* linear breadcrumb */ /* tabs */ /* Modal */ --modal-content-background-color: var(--bg-color-primary); --modal-header-background-color: var(--bg-color-primary); --modal-header-border-radius: 0px; --modal-header-wo-divider-padding: var(--spacing-20) var(--spacing-20) 0px var(--spacing-20); --modal-header-title-font-size: var(--font-size-md); --modal-header-title-weight: var(--font-weight-semibold); --modal-header-description-font-size: var(--typography-dense-xs-font-size); --modal-header-description-line-height: var(--line-height-xs); --modal-header-description-color: var(--text-color-primary-light); --modal-dialogue-body-color: var(--text-color-primary); --modal-footer-background-color: var(--bg-color-primary); --modal-footer-justify-content: flex-end; --modal-footer-padding: var(--spacing-md) var(--spacing-rg); --modal-footer-wo-divider-padding: 0px var(--spacing-20) var(--spacing-20) var(--spacing-20); --modal-content-padding: var(--spacing-20); --modal-footer-gap: var(--spacing-xs); --modal-header-border-bottom: var(--border-primary); --modal-header-padding: var(--spacing-rg) var(--spacing-32); --check-list-item-checked-text-color: var(--text-color-primary); --check-list-item-text-color: var(--text-color-secondary); --modal-medium-height: fit-content; --modal-backdrop-bg: rgb(0 0 0 / 70%); --modal-backdrop-filter: blur(4px); --modal-dialogue-width: 576px; /* Graph */ --bar-graph-color: var(--color-blue-100); /* Shadows and States */ --state-active: rgb(0 0 0 / 30%); --shadow-card: 0 4px 20px rgb(0 0 0 / 20%); --shadow-elevated: 2px 0 12px rgb(0 0 0 / 30%); /* Sidebar Layout */ --sidebar-width-closed: 0px; --sidebar-width-open: 320px; --scroll-btn-sidebar-offset: 0px; --sidebar-transition-duration: 0.3s; --fade-transition-duration: 0.25s; --sidebar-vibe-beta-badge-color: var(--color-yellow-650); /* Desktop Layout Variables - BZ-47862 */ /* Shared top-bar height used by AppHeader (desktop) and SideBarV2 .v2-header so both rows sit on the same optical baseline. Mobile/app variant keeps its own larger --spacing-72 value set in AppHeader.svelte's .app-header.app rule. */ --app-top-bar-height: var(--spacing-56); /* Must match BREAKPOINTS.DESKTOP_MIN in constants.ts */ --desktop-content-max-width: 784px; --desktop-sidebar-width-collapsed: 72px; --desktop-logo-size: 48px; --report-panel-width: min(50vw, 600px); --sliding-panel-width-tablet: clamp(280px, 40vw, 400px); --report-panel-transition-duration: 0.3s; --report-panel-background: var(--ai-modal-background-color); /* Responsive Modal Variables - BZ-47862 */ --modal-desktop-width: 550px; --modal-mobile-width: 100vw; --modal-mobile-border-radius: 24px 24px 0 0; --modal-desktop-box-shadow: none; --modal-desktop-border: none; --modal-desktop-content-width: 550px; --modal-confirmation-width: 440px; /* Safe Area Inset Handling - BZ-47862 */ /* Native iOS app overrides via inline styles on (syncSafeAreaCssVars). */ /* Default to 0 — the native bridge provides the actual values at runtime. */ /* On non-native (browser), these remain 0 which is correct. */ /* Safe area handling: - Android: Native setPadding() handles insets, CSS adds 8px buffer - iOS: JavaScript syncs native values to --safe-area-inset-* variables, CSS adds 8px buffer */ /* Min bottom padding for bottom-aligned (mobile) modals so content clears the home indicator / safe area. Consumed by the .modal.bottom .modal-content standard in globalClasses.css — set once here, not re-declared per modal. */ /* Component Radius */ --radius-xs: 4px; --radius-6: 6px; --radius-sm: 8px; --radius-10: 10px; --radius-md: 12px; --radius-16: 16px; --radius-lg: 20px; --radius-24: 24px; --radius-100: 100px; --radius-full: 9999px; /* Component Spacing Scale */ /* Base scale - commonly used values */ --spacing-0: 0px; --spacing-1: 1px; --spacing-1-5: 1.5px; --spacing-2: 2px; --spacing-12: 12px; --spacing-20: 20px; --spacing-28: 28px; --spacing-32: 32px; --spacing-36: 36px; --spacing-40: 40px; --spacing-44: 44px; --spacing-48: 48px; --spacing-52: 52px; --spacing-56: 56px; --spacing-60: 60px; --spacing-64: 64px; --spacing-70: 70px; --spacing-72: 72px; --spacing-76: 76px; --spacing-80: 80px; --spacing-84: 84px; --spacing-90: 90px; --spacing-92: 92px; --spacing-96: 96px; --spacing-100: 100px; --spacing-104: 104px; --spacing-110: 110px; --spacing-120: 120px; --spacing-126: 126px; --spacing-130: 130px; --spacing-136: 136px; --spacing-140: 140px; --spacing-144: 144px; --spacing-148: 148px; --spacing-150: 150px; --spacing-160: 160px; --spacing-172: 172px; --spacing-180: 180px; --spacing-200: 200px; --spacing-232: 232px; --spacing-220: 220px; --spacing-228: 228px; --spacing-240: 240px; --spacing-250: 250px; --spacing-270: 270px; --spacing-276: 276px; --spacing-278: 278px; --spacing-280: 280px; --spacing-300: 300px; --spacing-320: 320px; --spacing-330: 330px; --spacing-340: 340px; --spacing-348: 348px; --spacing-360: 360px; --spacing-370: 370px; --spacing-400: 400px; --spacing-420: 420px; --spacing-450: 450px; --spacing-460: 460px; --spacing-468: 468px; --spacing-480: 480px; --spacing-500: 500px; --spacing-520: 520px; --spacing-546: 546px; --spacing-552: 552px; --spacing-600: 600px; --spacing-630: 630px; --spacing-635: 635px; --spacing-640: 640px; --spacing-642: 642px; --spacing-678: 678px; --spacing-694: 694px; --spacing-700: 700px; --spacing-708: 708px; --spacing-720: 720px; --spacing-800: 800px; --spacing-896: 896px; --spacing-900: 900px; --spacing-978: 978px; --spacing-920: 920px; --spacing-926: 926px; /* Semantic aliases for common patterns */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-rg: var(--spacing-20); --spacing-lg: 24px; /* Page layout spacing tokens */ --page-section-tabs-margin-top: var(--spacing-md); /* Alias for backward compatibility */ /* Alias for backward compatibility */ /* Z-Index Scale - Base layers */ --z-index-dropdown: 10; --z-index-overlay: 40; --z-index-popup: 50; /* Z-Index Scale - Portal layers (portaled modals rendered at body level) */ --z-index-portal: 1200; --z-index-portal-content: 1201; --modal-z-index: var(--z-index-portal); /* Sheet (library @juspay/svelte-ui-components) — common theme base. The library's own var() fallbacks are light-only hardcoded hex (#1a1a1a title, #e0e0e0 borders, #ffffff background) and break in dark mode. Wire the shared Sheet look to theme tokens once here so every Sheet inherits correct light+dark theming; per-sheet recipes (e.g. .global-report-sheet) override only genuinely bespoke values (width, z-index, AI surface colours). */ --sheet-title-color: var(--text-color-primary); --sheet-background: var(--bg-color-secondary); --sheet-header-background: var(--bg-color-secondary); --sheet-footer-background: var(--bg-color-secondary); --sheet-header-border-bottom: var(--border-primary); --sheet-footer-border-top: var(--border-primary); --sheet-header-padding: var(--spacing-md) var(--spacing-lg); --sheet-content-padding: var(--spacing-lg); --sheet-footer-padding: var(--spacing-md) var(--spacing-lg); /* Z-Index Scale - Modal layers (must be above modals at 1000-1200) */ --z-index-modal: 10000; --z-index-modal-footer: 10001; --modal-footer-height: 95px; /* Z-Index token scale for confirmation/layered modals. --z-modal-confirm: confirmation dialogs that must float above all other modals (100000). --z-modal-fullscreen: full-viewport modals (webcamera) just below the system modal layer (9999). --z-modal-layer-2: second overlay layer, e.g. upload modals inside shipping config (1300). --z-modal-layer-1: first overlay layer, e.g. form modals teleported via portal (1200). --z-modal-sub-portal: modals that must remain below the portal overlay, e.g. inputbar attachment (1000). Base layer reference: var(--z-index-portal) = 1200. */ --z-modal-confirm: 100000; --z-modal-fullscreen: 9999; --z-modal-layer-2: 1300; --z-modal-layer-1: 1200; --z-modal-sub-portal: 1000; /* Toasts are top-level notifications and must sit above modals/overlays. */ --z-index-toast: 10010; /* Chat-specific Z-Index */ --z-index-chat-fade: 5; --z-index-chat-controls: 10; --z-index-mic-status: 11; --z-index-header: 100; --z-index-voice-dropdown: 110; --z-index-popover-backdrop: 100; --z-index-popover-wrapper: 102; --z-index-popover-menu: 103; /* Value-equal semantic aliases for colours previously hardcoded as raw base-palette tokens in component \3c style> blocks. Each resolves through the same base var, so the computed value is identical in light, dark, AI (temp.css) and Shopify contexts. */ --chart-color-tertiary: var(--color-yellow-600); --text-color-subtle: var(--color-gray-200); --bg-color-shimmer-mid: var(--color-gray-200); --text-color-icon-active: var(--text-color-secondary); --text-color-inactive: var(--text-color-secondary); --bg-color-button-inactive: var(--color-gray-450); --bg-color-indicator: var(--color-gray-600); --border-color-loader-base: var(--color-gray-1700); --border-color-loader-active: var(--color-gray-600); --border-color-subtle-outline: var(--color-gray-700); --border-color-checkbox-unchecked: var(--color-gray-1000); --bg-color-warning-indicator: var(--color-orange-500); --shadow-color-ring: var(--color-gray-2000); /* DebugPanel status/accent fills (developer-only debug component). */ --text-color-accent-secondary: var(--color-purple-600); --bg-color-accent-secondary: var(--color-purple-600); --bg-color-success-accent: var(--color-green-600); --border-color-success: var(--color-green-600); --bg-color-warning-accent: var(--color-orange-600); --text-color-warning-accent: var(--color-orange-600); --border-color-warning: var(--color-orange-600); --bg-color-warning-surface: var(--color-orange-700); /* AI full-page surface + subtle divider. Global default here; temp.css overrides these to the exact AI dark-theme values on AI routes (value-equal there). */ --bg-color-ai-surface: var(--bg-color-primary); --border-color-ai-subtle: var(--border-color-divider); /* Config modal min-dimensions */ --config-modal-min-width: max(40vw, var(--spacing-400)); --config-modal-min-height: 40vh; /* Mandate Product Row */ --mandate-product-row-image-size: var(--spacing-48); --mandate-product-secondary-color: var(--text-color-secondary); --mandate-product-font-xs: var(--font-size-xs); /* Mandate More Details Button */ --mandate-more-details-button-padding: 0; --mandate-more-details-button-icon-order: 2; /* AI Component Theme */ --ai-text-primary: var(--text-color-primary); --ai-input-border: var(--border-primary); --ai-text-secondary: var(--text-color-secondary); --ai-text-accent: #d851ef; --ai-bg-metric-card: rgb(70 58 137 / 60%); --ai-bg-mic-button: var(--color-red-600); --ai-border-light: 1px solid var(--border-color-divider); --ai-state-active: rgb(0 0 0 / 20%); --ai-state-focus: rgb(0 0 0 / 25%); --ai-shadow-light: 0 2px 4px rgb(0 0 0 / 10%); --ai-bg-mic-inactive: rgb(135 135 135 / 20%); --ai-background-color: var(--color-gray-1825); /* StatisticsCard surface. Neutral by default so the shared card keeps its standard look on every route; the /ai surface overrides this to the dark AI background via .ai-route in automatic.css. */ --statistics-card-bg: var(--bg-color-secondary); --ai-modal-background-color: #1f2020; --ai-sub-greeting: #6e7984; --ai-merchant: var(--color-gray-1800); --ai-speech-button: #fd8414; --ai-input-bar-bgcolor: #f5f5f7; --ai-inputbox-error: #f66; --breeze-automatic-plugin-card-bg: var(--color-gray-1825); --ai-login-modal-background-color: var(--color-gray-1825); --ai-processing-color-medium-gray: #858585; --ai-processing-color-light-gray: #bebebe; --ai-source-attribution-text: #6f7e8c; --ai-modal-border-top-color: #4c4c4c; --ai-completion-text-color: #2e994c; --ai-completion-halted-text-color: #b03a3a; --ai-confirmation-card-bg: var(--bg-color-secondary); --ai-border-color: var(--border-color-secondary); --ai-confirmation-card-badge: #c07334; --ai-confirmation-card-badge-hover: #d97706; --ai-login-text-header: var(--color-gray-450); --ai-login-header-text: var(--color-gray-350); --ai-login-input-placeholder: #3c444c; --ai-login-button-text: var(--color-gray-1900); --ai-processing-status-text: var(--ai-processing-color-medium-gray); --ai-processing-shimmer-light: var(--ai-processing-color-medium-gray); --ai-processing-shimmer-gradient: linear-gradient( 90deg, var(--ai-processing-shimmer-light) 0%, var(--ai-processing-color-light-gray) 50%, var(--ai-processing-shimmer-light) 100% ); --ai-image-shimmer-gradient: linear-gradient( 90deg, transparent 0%, var(--ai-state-focus) 50%, transparent 100% ); --ai-processing-arrow-filter: brightness(0) invert(0.4785); --ai-action-gradient-start: var(--color-transparent); --ai-action-gradient-mid: var(--color-gray-15); --ai-action-gradient-end: var(--color-gray-20); --ai-action-bg-gradient: linear-gradient( 180deg, var(--ai-action-gradient-start) 0%, var(--ai-action-gradient-mid) 60%, var(--ai-action-gradient-end) 80% ); --ai-listening-glowing-color: #ff8b20; --ai-listening-fade-color: #434343; --ai-listening-gradient-primary: linear-gradient( 45deg, var(--ai-listening-fade-color), var(--ai-listening-glowing-color), #434343 ); --ai-listening-border: 2px solid #0000; --ai-listening-gradient-secondary: linear-gradient(#131219, #131219); --ai-white-gradient: linear-gradient(#fff 0 0); --ai-text-muted: #6b7280; --ai-video-player-max-width: var(--spacing-640); --ai-video-player-max-width-portrait: var(--spacing-320); --ai-video-player-max-height: 70vh; --ai-video-player-controls-bg: linear-gradient(transparent, var(--modal-backdrop-bg)); /* Modal and overlay colors */ --modal-content-primary: var(--color-gray-0); /* Remove button colors */ --bg-color-thumbnail-remove-primary: var(--color-gray-1700); /* HUMAN-IN-THE-LOOP */ --hitl-edit-button-text: var(--color-gray-550); --hitl-edit-button-border: 0.75px solid var(--color-gray-1350); --hitl-edit-button-hover-border: 0.75px solid var(--ai-text-muted); --hitl-edit-button-hover-color: var(--color-gray-1450); --hitl-parameter-label-bg-color: var(--color-gray-1350); --hitl-progress-loader: brightness(0.8); /* STORIES */ --stories-vertical-bars-primary-color: var(--color-green-500); --stories-vertical-bars-tertiary-color: var(--color-green-700); --stories-horizontal-bars-primary-color: var(--color-yellow-500); --stories-horizontal-bars-secondary-color: var(--color-orange-500); --stories-horizontal-bars-tertiary-color: var(--color-blue-500); --stories-horizontal-bars-text-primary-color: var(--color-yellow-800); --stories-horizontal-bars-text-tertiary-color: var(--color-blue-800); /* DATA SOURCES — aliased to semantic tokens so each background/border * surface flips automatically with the active theme. The dark-theme * overrides live in static/style/temp.css's [theme='dark'] block. */ --data-source-text-primary: var(--text-color-primary); --data-source-disconnect-button-color: var(--color-red-650-33); --data-source-disconnect-button-text-color: var(--color-red-650); /* AI Data Sources page is force-dark, so these values stay dark in * light theme too. Original Figma spec (BZ-47970) used the gray-N * tokens that are NOT remapped by temp.css on AI routes — keeps the * subtle dark-on-dark card look. Don't switch to --bg-color-secondary * / --border-color-secondary: those resolve through --color-gray-400 * which temp.css overrides to a bright #9fa1a4 on AI routes, making * the borders dominate. */ --data-source-bg-button: var(--color-gray-1725); --data-source-border: var(--color-gray-1750); --data-source-bg-list: var(--color-gray-1825); --data-source-bg-prompt-item: var(--color-gray-1850); --data-source-bg-questions-grid: var(--color-gray-1850); .modal-content .header-text { color: var(--color-text); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .container { padding: 16px; } .select .container { padding: var(--check-list-item-padding, var(--spacing-0)); } .dropdown-checkbox-container .container { padding: var(--dropdown-check-list-padding, var(--spacing-0)); } /* The global `.container { padding: 16px }` above is consumed by ~76 project surfaces (cards, popups, tags, stat cards…), so it must stay. But the @juspay/svelte-ui-components Checkbox renders its root as