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

:root, .toku-theme {
  --color-brand-1: #f3f1f4; /** App background. Was primary.light5. */
  --color-brand-2: #f0ecf3; /** Subtle background. Was primary.light4. */
  --color-brand-3: #ebe1f2; /** UI element background. Was primary.light3. */
  --color-brand-4: #e5d5f0; /** Hovered UI element background. Was primary.light2. */
  --color-brand-5: #ddc7ed; /** Active / selected UI element background. */
  --color-brand-6: #d2b5e7; /** Subtle borders / separators. */
  --color-brand-7: #c59fdf; /** UI element borders / focused inputs. Legacy primary.light1 (focus / active borders). */
  --color-brand-8: #b481d5; /** Hovered UI element borders. */
  --color-brand-9: #3c1053; /** Solid background (brand buttons, header). The anchor — exact input hex (#3C1053). Was primary.main / primary.dark. */
  --color-brand-10: #51276a; /** Hovered solid background. Radix step 10 — lighter than step 9, the Radix convention for a dark accent. Was primary.toku. (Tenant themes darken step 10 via createTheme's generator, which suits non-dark brands.) */
  --color-brand-11: #72418f; /** Low-contrast text (secondary text). */
  --color-brand-12: #461b5e; /** High-contrast text (headings, primary text). Was primary.ultraDark. */
  --color-brand-a-1: rgba(144, 42, 195, 0.02); /** ≈2% opacity. Faintest brand tint. */
  --color-brand-a-2: rgba(118, 16, 194, 0.04); /** ≈4% opacity. */
  --color-brand-a-3: rgba(124, 3, 209, 0.08); /** ≈8% opacity. */
  --color-brand-a-4: rgba(125, 5, 208, 0.13); /** ≈13% opacity. */
  --color-brand-a-5: rgba(118, 1, 203, 0.19); /** ≈19% opacity. Common for focus ring halos. */
  --color-brand-a-6: rgba(112, 1, 192, 0.26); /** ≈26% opacity. */
  --color-brand-a-7: rgba(109, 1, 182, 0.35); /** ≈35% opacity. */
  --color-brand-a-8: rgba(108, 1, 178, 0.47); /** ≈47% opacity. */
  --color-brand-a-9: rgba(48, 1, 73, 0.94); /** ≈94% opacity. */
  --color-brand-a-10: rgba(51, 1, 81, 0.84); /** ≈84% opacity. */
  --color-brand-a-11: rgba(68, 1, 107, 0.74); /** ≈74% opacity. */
  --color-brand-a-12: rgba(48, 0, 75, 0.89); /** ≈89% opacity. Near-opaque brand. */
  --color-gray-1: #f2f2f2; /** App background. Radix gray-1. */
  --color-gray-2: #eeeeee; /** Subtle background. Radix gray-2. */
  --color-gray-3: #e4e4e4; /** UI element background. Radix gray-3. */
  --color-gray-4: #dbdbdb; /** Hovered UI element background. Radix gray-4. */
  --color-gray-5: #d3d3d3; /** Active / selected UI element background. Radix gray-5. */
  --color-gray-6: #cbcbcb; /** Subtle borders / separators. Radix gray-6. */
  --color-gray-7: #c0c0c0; /** UI element borders / focused inputs. Radix gray-7. */
  --color-gray-8: #acacac; /** Hovered UI element borders. Radix gray-8. */
  --color-gray-9: #7f7f7f; /** Solid neutral fill. Radix gray-9. */
  --color-gray-10: #747474; /** Hovered solid neutral fill. Radix gray-10. */
  --color-gray-11: #575757; /** Low-contrast text (secondary). Radix gray-11. */
  --color-gray-12: #202020; /** High-contrast text (body / headings). Radix gray-12. */
  --color-gray-a-1: rgba(0, 0, 0, 0.01); /** ≈1% opacity. */
  --color-gray-a-2: rgba(0, 0, 0, 0.03); /** ≈3% opacity. */
  --color-gray-a-3: rgba(0, 0, 0, 0.07); /** ≈7% opacity. Subtle dividers. */
  --color-gray-a-4: rgba(0, 0, 0, 0.11); /** ≈11% opacity. */
  --color-gray-a-5: rgba(0, 0, 0, 0.14); /** ≈14% opacity. */
  --color-gray-a-6: rgba(0, 0, 0, 0.17); /** ≈17% opacity. */
  --color-gray-a-7: rgba(0, 0, 0, 0.22); /** ≈22% opacity. */
  --color-gray-a-8: rgba(0, 0, 0, 0.3); /** ≈30% opacity. */
  --color-gray-a-9: rgba(0, 0, 0, 0.48); /** ≈48% opacity. Modal backdrops. */
  --color-gray-a-10: rgba(0, 0, 0, 0.53); /** ≈53% opacity. */
  --color-gray-a-11: rgba(0, 0, 0, 0.64); /** ≈64% opacity. */
  --color-gray-a-12: rgba(0, 0, 0, 0.87); /** ≈87% opacity. */
  --color-red-7: #b72e29; /** Solid danger color. Was colors.error. */
  --color-green-7: #408645; /** Solid success color. Was colors.success. */
  --color-amber-7: #ffb038; /** Solid in-process color. Was colors.inProcess. */
  --color-amber-8: #a37500; /** Darker amber for text/contrast on amber backgrounds. Was colors.inProcessDark. */
  --color-orange-7: #d06b35; /** Solid warning color. Was colors.warning. */
  --color-blue-7: #3070dd; /** Solid info color. Was colors.info. */
  --color-white: #ffffff; /** Pure white. Was typography.buttonTextColor (inline). */
  --color-black: #000000; /** Pure black. Add as primitive if needed; otherwise reach color.gray.12. See proposal §8 Q27. */
  --color-background: #f5f5f5; /** App page canvas — Radix's dedicated --color-background, distinct from gray-1. Sits between gray-1 and white. Was colors.background in base.ts. */
  --space-0: 0; /** Zero spacing. */
  --space-1: 4px; /** Base unit. Was theme.spacing. */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-none: 0;
  --radius-xs: 2px; /** TBD: design — smallest non-zero radius. */
  --radius-sm: 0.375rem; /** Small radius. Was input.borderRadius. */
  --radius-md: 0.5rem; /** Medium radius. Was button.borderRadius. */
  --radius-lg: 12px; /** TBD: design — large radius (cards, modals). */
  --radius-xl: 16px; /** TBD: design — extra large radius. */
  --radius-2xl: 24px; /** TBD: design — 2xl radius. */
  --radius-full: 9999px; /** Pill / circular shape. */
  --font-family-base: 'Manrope', sans-serif; /** Default UI font. Mirrors baseTheme.typography.fontFamily exactly so components migrating from useTheme() to CSS tokens keep rendering the same font. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-h1-font-size: 3.25rem; /** 52px */
  --font-h1-line-height: 3.75rem; /** 60px — see warning above */
  --font-h2-font-size: 3rem; /** 48px */
  --font-h2-line-height: 3.5rem; /** 56px */
  --font-h3-font-size: 2.5rem; /** 40px */
  --font-h3-line-height: 3rem; /** 48px */
  --font-h4-font-size: 2rem; /** 32px */
  --font-h4-line-height: 2.5rem; /** 40px */
  --font-s1-font-size: 1.75rem; /** 28px */
  --font-s1-line-height: 2.25rem; /** 36px */
  --font-s2-font-size: 1.5rem; /** 24px */
  --font-s2-line-height: 2rem; /** 32px */
  --font-s3-font-size: 1.125rem; /** 18px */
  --font-s3-line-height: 1.625rem; /** 26px */
  --font-s4-font-size: 1rem; /** 16px */
  --font-s4-line-height: 1.5rem; /** 24px */
  --font-b0-font-size: 1.25rem; /** 20px */
  --font-b0-line-height: 1.625rem; /** 26px */
  --font-b1-font-size: 1.125rem; /** 18px */
  --font-b1-line-height: 1.5rem; /** 24px */
  --font-b2-font-size: 1rem; /** 16px */
  --font-b2-line-height: 1.375rem; /** 22px */
  --font-b3-font-size: 0.875rem; /** 14px */
  --font-b3-line-height: 1.25rem; /** 20px */
  --font-b4-font-size: 0.75rem; /** 12px */
  --font-b4-line-height: 1.125rem; /** 18px */
  --font-b5-font-size: 0.625rem; /** 10px */
  --font-b5-line-height: 1rem; /** 16px */
  --font-b6-font-size: 0.5rem; /** 8px */
  --font-b6-line-height: 0.875rem; /** 14px */
  --shadow-none: none; /** No shadow. */
  --shadow-sm: 0 1px 2px 0 #0000000D; /** TBD: design — subtle ambient shadow. */
  --shadow-md: 0 4px 6px -1px #0000001A, 0 2px 4px -2px #0000001A; /** TBD: design — card-level shadow. */
  --shadow-lg: 0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A; /** TBD: design — floating elements (popovers, dropdowns). */
  --shadow-xl: 0 20px 25px -5px #0000001A, 0 8px 10px -6px #0000001A; /** TBD: design — modals, large overlays. */
  --motion-duration-instant: 0ms; /** No animation (e.g. prefers-reduced-motion overrides). */
  --motion-duration-fast: 150ms; /** TBD: design — quick control interactions (hover, focus). */
  --motion-duration-base: 250ms; /** TBD: design — default transition duration. */
  --motion-duration-slow: 400ms; /** TBD: design — large layout shifts, modal entrances. */
  --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Constant velocity. For loading indicators. */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /** TBD: design — default easing (Material 3 standard). */
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /** TBD: design — emphasized motion for hero transitions (Material 3 emphasized). */
  --motion-easing-decelerated: cubic-bezier(0, 0, 0, 1); /** TBD: design — for entering elements (Material 3 standard decelerate). */
  --motion-easing-accelerated: cubic-bezier(0.3, 0, 1, 1); /** TBD: design — for exiting elements (Material 3 standard accelerate). */
  --z-base: 1; /** Default content layer. */
  --z-sticky: 100; /** Sticky headers, footers. */
  --z-fixed: 200; /** Fixed navigation. */
  --z-overlay: 300; /** Backdrops, scrims. */
  --z-modal: 400; /** Modal dialogs, drawers. */
  --z-popover: 500; /** Popovers, menus, dropdowns. */
  --z-toast: 600; /** Notifications. */
  --z-tooltip: 700; /** Always-on-top tooltips. */
  --opacity-0: 0; /** Fully transparent. */
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-disabled: 0.5; /** TBD: design — disabled state opacity. */
  --opacity-muted: 0.6; /** TBD: design — muted / de-emphasized opacity. */
  --opacity-full: 1; /** Fully opaque. */
  --border-width-0: 0; /** No border. */
  --border-width-thin: 1px; /** Default UI border width. */
  --border-width-thick: 2px; /** Emphasized border (focused inputs, selected items). */
  --border-width-heavy: 4px; /** Heavy border — used for focus ring outline. */
  --focus-ring-width: 2px; /** TBD: design — width of the primary focus outline. */
  --focus-ring-offset: 2px; /** TBD: design — gap between element and outline. */
  --focus-ring-halo-width: 4px; /** TBD: design — width of the translucent halo. */
  --breakpoint-mobile: 0px;
  --breakpoint-desktop: 769px;
  --color-bg-surface-default: var(--color-background); /** Default app surface / page canvas. Radix --color-background (#F5F5F5). */
  --color-bg-surface-subtle-default: var(--color-gray-2);
  --color-bg-surface-raised-default: var(--color-white); /** Elevated surfaces (cards on a non-white app bg). */
  --color-bg-surface-sunken-default: var(--color-gray-3); /** Inset surfaces (input bg on a card). */
  --color-bg-primary-default: var(--color-brand-9); /** Primary action fill — buttons, headers. Resolves to the tenant's exact brand color. */
  --color-bg-primary-hover: var(--color-brand-10);
  --color-bg-primary-disabled: var(--color-gray-3); /** Disabled primary button bg. TBD: design may prefer color.brand.3 instead for tinted disabled state. */
  --color-bg-primary-subtle-default: var(--color-brand-2); /** Tinted brand background — selected rows, pill backgrounds, soft tags. */
  --color-bg-primary-subtle-hover: var(--color-brand-3);
  --color-bg-danger-default: var(--color-red-7);
  --color-bg-success-default: var(--color-green-7);
  --color-bg-warning-default: var(--color-orange-7);
  --color-bg-info-default: var(--color-blue-7);
  --color-bg-overlay-default: var(--color-gray-a-9); /** Modal backdrop / scrim. ~48% black over the page (Radix gray-a-9). */
  --color-bg-disabled-default: var(--color-gray-3); /** Generic disabled surface. */
  --color-text-default-default: var(--color-gray-12); /** Default body text. High-contrast text per Radix role layout (gray-12, #202020 — ~15:1 on white). */
  --color-text-muted-default: var(--color-gray-11); /** Secondary / supporting text. Low-contrast text per Radix (gray-11, #575757 — ~7:1 on white, passes AA). */
  --color-text-primary-default: var(--color-brand-11); /** Brand-tinted text (e.g. links inside a brand-primary surface). */
  --color-text-on-primary-default: var(--color-white); /** Text on top of color.bg.primary. Was typography.buttonTextColor. */
  --color-text-danger-default: var(--color-red-7); /** Error text. Will move to color.red.11 once full red ramp lands. */
  --color-text-success-default: var(--color-green-7);
  --color-text-warning-default: var(--color-orange-7);
  --color-text-info-default: var(--color-blue-7);
  --color-text-link-default: var(--color-brand-9); /** TBD: design — link color. May want a dedicated blue for inline links rather than reusing brand. */
  --color-text-disabled-default: var(--color-gray-9); /** Disabled text (gray-9). Intentionally low-contrast; exempt from WCAG minimums. Not for placeholders — add a dedicated placeholder token if one is needed. */
  --color-text-inverse-default: var(--color-white); /** Text on dark surfaces. */
  --color-border-default-default: var(--color-gray-7); /** Default UI border — inputs, cards (gray-7, Radix UI element border). */
  --color-border-subtle-default: var(--color-gray-6); /** Subtle border / separator (gray-6). */
  --color-border-strong-default: var(--color-gray-8); /** Strong / hovered border (gray-8). */
  --color-border-primary-default: var(--color-brand-7);
  --color-border-danger-default: var(--color-red-7);
  --color-border-focus-default: var(--color-brand-7); /** Focus ring color. TBD: design may want a dedicated focus color for higher contrast. */
  --color-border-disabled-default: var(--color-gray-5); /** Disabled control border (gray-5). */
  --color-icon-default-default: var(--color-gray-12); /** Default icon — mirrors text.default (gray-12). */
  --color-icon-muted-default: var(--color-gray-11); /** Muted icon — mirrors text.muted (gray-11). */
  --color-icon-primary-default: var(--color-brand-9);
  --color-icon-danger-default: var(--color-red-7);
  --color-icon-success-default: var(--color-green-7);
  --color-icon-warning-default: var(--color-orange-7);
  --color-icon-info-default: var(--color-blue-7);
  --color-icon-on-primary-default: var(--color-white);
  --color-icon-disabled-default: var(--color-gray-9); /** Disabled icon (gray-9). */
  --color-ring-focus-default: var(--color-brand-7); /** Solid focus outline color. */
  --color-ring-focus-halo-default: var(--color-brand-a-5); /** Translucent focus halo. Uses brand alpha so it tints over any background without obscuring it. */
  --radius-control-default: var(--radius-md); /** Buttons, selects, switches — interactive controls. */
  --radius-control-sm-default: var(--radius-sm); /** Inputs, smaller controls. */
  --radius-surface-default: var(--radius-lg); /** Cards, panels, modals. TBD: design confirms radius.lg is the right anchor. */
  --radius-pill-default: var(--radius-full); /** Chips, badges, avatars. */
  --shadow-raised-default: var(--shadow-md); /** Cards, raised panels. */
  --shadow-overlay-default: var(--shadow-lg); /** Popovers, dropdowns, menus. */
  --shadow-dialog-default: var(--shadow-xl); /** Modals, drawers, large overlays. */
  --shadow-sticky-default: var(--shadow-sm); /** Sticky headers, footers — subtle elevation cue. */
  --motion-control-duration: var(--motion-duration-fast);
  --motion-control-easing: var(--motion-easing-standard);
  --motion-layout-duration: var(--motion-duration-base);
  --motion-layout-easing: var(--motion-easing-emphasized);
  --motion-enter-duration: var(--motion-duration-base);
  --motion-enter-easing: var(--motion-easing-decelerated);
  --motion-exit-duration: var(--motion-duration-fast);
  --motion-exit-easing: var(--motion-easing-accelerated);
}