/* * Generated Eidos foundation CSS. * * Source: src/uix/eidos/lib/themes/base.ts * Command: npm run generate:eidos-css * * Do not edit this file by hand. */ :root { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-0-5: 2px; --space-1-5: 6px; --space-2-5: 10px; --space-3-5: 14px; --space-4-5: 18px; --space-5-5: 22px; --control-height-xxs: 22px; --control-height-xs: 26px; --control-height-sm: 30px; --control-height-md: 36px; --control-height-lg: 44px; --control-height-xl: 52px; --control-height-xxl: 60px; --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-xxl: 20px; --radius-full: 9999px; --border-width-none: 0px; --border-width-hairline: 0.5px; --border-width-thin: 1px; --border-width-medium: 1.5px; --border-width-thick: 2px; --border-style-solid: solid; --border-style-dashed: dashed; --border-style-dotted: dotted; --border-width: var(--border-width-thin); --border-style: var(--border-style-solid); --border: var(--border-width) var(--border-style) var(--color-border-default); --focus-ring-offset: 1px; --focus-ring-width: 2px; --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --focus-ring-error: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color-error); --container-width-sm: 448px; --container-width-md: 688px; --container-width-lg: 880px; --container-width-xl: 1136px; --container-width-xxl: 1280px; --container-width-full: none; --container-padding-inline: var(--space-4); --content-width-xs: 20rem; --content-width-sm: 24rem; --content-width-md: 32rem; --content-width-lg: 42rem; --content-width-xl: 56rem; --content-width-xxl: 72rem; --content-width-prose: 65ch; --aspect-ratio-square: 1 / 1; --aspect-ratio-portrait: 3 / 4; --aspect-ratio-landscape: 4 / 3; --aspect-ratio-video: 16 / 9; --aspect-ratio-wide: 21 / 9; --aspect-ratio-golden: 1.618 / 1; --density-compact-scale: 0.92; --density-comfortable-scale: 1; --density-spacious-scale: 1.08; --density-compact-space-scale: 0.84; --density-comfortable-space-scale: 1; --density-spacious-space-scale: 1.16; --density-compact-control-scale: 0.9; --density-comfortable-control-scale: 1; --density-spacious-control-scale: 1.12; --density-compact-content-scale: 0.96; --density-comfortable-content-scale: 1; --density-spacious-content-scale: 1.04; --density-scale: var(--density-comfortable-scale); --density-space-scale: var(--density-comfortable-space-scale); --density-control-scale: var(--density-comfortable-control-scale); --density-content-scale: var(--density-comfortable-content-scale); --duration-instant: 0ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-moderate: 240ms; --duration-slow: 320ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-alert: cubic-bezier(0.36, 0.07, 0.19, 0.97); --ease-symmetric: cubic-bezier(0.4, 0, 0.6, 1); --motion-distance-xs: 2px; --motion-distance-sm: 4px; --motion-distance-md: 8px; --motion-distance-lg: 16px; --motion-scale-enter: 0.985; --motion-scale-press: 0.97; --motion-stagger: 20ms; --icon-size-xxs: 12px; --icon-size-xs: 14px; --icon-size-sm: 16px; --icon-size-md: 18px; --icon-size-lg: 20px; --icon-size-xl: 24px; --icon-size-xxl: 48px; --icon-stroke-width-sm: 1.25; --icon-stroke-width-md: 1.5; --icon-stroke-width-lg: 1.75; --opacity-0: 0; --opacity-muted: 0.72; --opacity-disabled: 0.48; --opacity-scrim: 0.42; --opacity-overlay: 0.66; --opacity-hover: 0.92; --opacity-press: 0.84; --opacity-full: 1; --z-index-base: 0; --z-index-raised: 1; --z-index-sticky: 100; --z-index-dropdown: 300; --z-index-popover: 400; --z-index-tooltip: 500; --z-index-modal: 700; --z-index-toast: 900; --font-family-primary: 'Instrument Sans', system-ui, sans-serif; --font-family-secondary: Lora, Georgia, 'Times New Roman', serif; --font-family-mono: 'Azeret Mono', ui-monospace, monospace; --font-family-display: Lora, Georgia, 'Times New Roman', serif; --font-size-xxs: 10px; --font-line-height-xxs: 1.5; --font-letter-spacing-xxs: 0; --font-size-xs: 12px; --font-line-height-xs: 1.5; --font-letter-spacing-xs: 0; --font-size-sm: 14px; --font-line-height-sm: 1.45; --font-letter-spacing-sm: 0; --font-size-md: 16px; --font-line-height-md: 1.45; --font-letter-spacing-md: 0; --font-size-lg: 20px; --font-line-height-lg: 1.35; --font-letter-spacing-lg: 0; --font-size-xl: 28px; --font-line-height-xl: 1.2; --font-letter-spacing-xl: 0; --font-size-xxl: 48px; --font-line-height-xxl: 1.05; --font-letter-spacing-xxl: 0; --font-size-xxxl: 80px; --font-line-height-xxxl: 1; --font-letter-spacing-xxxl: 0; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --size-xxs-control-height: var(--control-height-xxs); --size-xxs-font-size: var(--font-size-xxs); --size-xxs-font-line-height: var(--font-line-height-xxs); --size-xxs-font-letter-spacing: var(--font-letter-spacing-xxs); --size-xxs-icon-size: var(--icon-size-xxs); --size-xxs-padding-inline: var(--space-1); --size-xxs-padding-block: var(--space-0-5); --size-xxs-gap: var(--space-1); --size-xxs-radius: var(--radius-sm); --size-xs-control-height: var(--control-height-xs); --size-xs-font-size: var(--font-size-xs); --size-xs-font-line-height: var(--font-line-height-xs); --size-xs-font-letter-spacing: var(--font-letter-spacing-xs); --size-xs-icon-size: var(--icon-size-xs); --size-xs-padding-inline: var(--space-1-5); --size-xs-padding-block: var(--space-1); --size-xs-gap: var(--space-1); --size-xs-radius: var(--radius-sm); --size-sm-control-height: var(--control-height-sm); --size-sm-font-size: var(--font-size-sm); --size-sm-font-line-height: var(--font-line-height-sm); --size-sm-font-letter-spacing: var(--font-letter-spacing-sm); --size-sm-icon-size: var(--icon-size-sm); --size-sm-padding-inline: var(--space-2); --size-sm-padding-block: var(--space-1); --size-sm-gap: var(--space-1-5); --size-sm-radius: var(--radius-md); --size-md-control-height: var(--control-height-md); --size-md-font-size: var(--font-size-sm); --size-md-font-line-height: var(--font-line-height-sm); --size-md-font-letter-spacing: var(--font-letter-spacing-sm); --size-md-icon-size: var(--icon-size-md); --size-md-padding-inline: var(--space-3); --size-md-padding-block: var(--space-1-5); --size-md-gap: var(--space-2); --size-md-radius: var(--radius-md); --size-lg-control-height: var(--control-height-lg); --size-lg-font-size: var(--font-size-md); --size-lg-font-line-height: var(--font-line-height-md); --size-lg-font-letter-spacing: var(--font-letter-spacing-md); --size-lg-icon-size: var(--icon-size-lg); --size-lg-padding-inline: var(--space-4); --size-lg-padding-block: var(--space-2); --size-lg-gap: var(--space-2-5); --size-lg-radius: var(--radius-lg); --size-xl-control-height: var(--control-height-xl); --size-xl-font-size: var(--font-size-lg); --size-xl-font-line-height: var(--font-line-height-lg); --size-xl-font-letter-spacing: var(--font-letter-spacing-lg); --size-xl-icon-size: var(--icon-size-xl); --size-xl-padding-inline: var(--space-5); --size-xl-padding-block: var(--space-2-5); --size-xl-gap: var(--space-3); --size-xl-radius: var(--radius-xl); --size-xxl-control-height: var(--control-height-xxl); --size-xxl-font-size: var(--font-size-xl); --size-xxl-font-line-height: var(--font-line-height-xl); --size-xxl-font-letter-spacing: var(--font-letter-spacing-xl); --size-xxl-icon-size: var(--icon-size-xxl); --size-xxl-padding-inline: var(--space-6); --size-xxl-padding-block: var(--space-3); --size-xxl-gap: var(--space-4); --size-xxl-radius: var(--radius-xxl); --control-height-2xs: var(--control-height-xxs); --radius-xs: var(--radius-sm); --font-sans: var(--font-family-primary); --font-ui: var(--font-family-primary); --font-serif: var(--font-family-secondary); --font-prose: var(--font-family-secondary); --font-heading: var(--font-family-display); --font-display: var(--font-family-display); --font-mono: var(--font-family-mono); --font-code: var(--font-family-mono); --text-1-size: var(--font-size-xxs); --text-1-lh: var(--font-line-height-xxs); --text-1-ls: var(--font-letter-spacing-xxs); --text-2-size: var(--font-size-xs); --text-2-lh: var(--font-line-height-xs); --text-2-ls: var(--font-letter-spacing-xs); --text-3-size: var(--font-size-sm); --text-3-lh: var(--font-line-height-sm); --text-3-ls: var(--font-letter-spacing-sm); --text-4-size: var(--font-size-md); --text-4-lh: var(--font-line-height-md); --text-4-ls: var(--font-letter-spacing-md); --text-5-size: var(--font-size-lg); --text-5-lh: var(--font-line-height-lg); --text-5-ls: var(--font-letter-spacing-lg); --text-6-size: var(--font-size-xl); --text-6-lh: var(--font-line-height-xl); --text-6-ls: var(--font-letter-spacing-xl); --font-size-base: var(--font-size-md); --font-size-2xl: var(--font-size-xxl); --font-size-3xl: var(--font-size-xxxl); --font-weight-normal: var(--font-weight-regular); --leading-ui: 1.25; --leading-prose: 1.6; --leading-text: var(--leading-prose); --leading-heading: 1.2; --leading-display: 1.05; --tracking-badge: 0; --tracking-label: 0; --tracking-ui: 0; --tracking-prose: 0; --tracking-heading: 0; --tracking-display: 0; --tracking-tight: 0; --tracking-normal: 0; --tracking-wide: 0; --tracking-wider: 0; --motion-spin-duration: 800ms; --color-focus-ring: var(--focus-ring-color); } [data-density='compact'] { --density-scale: var(--density-compact-scale); --density-space-scale: var(--density-compact-space-scale); --density-control-scale: var(--density-compact-control-scale); --density-content-scale: var(--density-compact-content-scale); } [data-density='spacious'] { --density-scale: var(--density-spacious-scale); --density-space-scale: var(--density-spacious-space-scale); --density-control-scale: var(--density-spacious-control-scale); --density-content-scale: var(--density-spacious-content-scale); } :root, [data-theme='base-light'], [data-theme='light'] { --scale-gray-1: #fcfcfc; --scale-gray-2: #f9f9f9; --scale-gray-3: #f0f0f0; --scale-gray-4: #e8e8e8; --scale-gray-5: #e0e0e0; --scale-gray-6: #d9d9d9; --scale-gray-7: #cecece; --scale-gray-8: #bbbbbb; --scale-gray-9: #8d8d8d; --scale-gray-10: #838383; --scale-gray-11: #646464; --scale-gray-12: #202020; --scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); --scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); --scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); --scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); --scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); --scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); --scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); --scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); --scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); --scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); --scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); --scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); --scale-slate-1: #fcfcfd; --scale-slate-2: #f9f9fb; --scale-slate-3: #f0f0f3; --scale-slate-4: #e8e8ec; --scale-slate-5: #e0e1e6; --scale-slate-6: #d9d9e0; --scale-slate-7: #cdced6; --scale-slate-8: #b9bbc6; --scale-slate-9: #8b8d98; --scale-slate-10: #80838d; --scale-slate-11: #60646c; --scale-slate-12: #1c2024; --scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); --scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); --scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); --scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); --scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); --scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); --scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); --scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); --scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); --scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); --scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); --scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); --scale-blue-1: #fbfdff; --scale-blue-2: #f4faff; --scale-blue-3: #e6f4fe; --scale-blue-4: #d5efff; --scale-blue-5: #c2e5ff; --scale-blue-6: #acd8fc; --scale-blue-7: #8ec8f6; --scale-blue-8: #5eb1ef; --scale-blue-9: #0090ff; --scale-blue-10: #0588f0; --scale-blue-11: #0d74ce; --scale-blue-12: #113264; --scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); --scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); --scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); --scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); --scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); --scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); --scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); --scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); --scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); --scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); --scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); --scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); --scale-cyan-1: #fafdfe; --scale-cyan-2: #f2fafb; --scale-cyan-3: #def7f9; --scale-cyan-4: #caf1f6; --scale-cyan-5: #b5e9f0; --scale-cyan-6: #9ddde7; --scale-cyan-7: #7dcedc; --scale-cyan-8: #3db9cf; --scale-cyan-9: #00a2c7; --scale-cyan-10: #0797b9; --scale-cyan-11: #107d98; --scale-cyan-12: #0d3c48; --scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); --scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); --scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); --scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); --scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); --scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); --scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); --scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); --scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); --scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); --scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); --scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); --scale-teal-1: #fafefd; --scale-teal-2: #f3fbf9; --scale-teal-3: #e0f8f3; --scale-teal-4: #ccf3ea; --scale-teal-5: #b8eae0; --scale-teal-6: #a1ded2; --scale-teal-7: #83cdc1; --scale-teal-8: #53b9ab; --scale-teal-9: #12a594; --scale-teal-10: #0d9b8a; --scale-teal-11: #008573; --scale-teal-12: #0d3d38; --scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); --scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); --scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); --scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); --scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); --scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); --scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); --scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); --scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); --scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); --scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); --scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); --scale-green-1: #fbfefc; --scale-green-2: #f4fbf6; --scale-green-3: #e6f6eb; --scale-green-4: #d6f1df; --scale-green-5: #c4e8d1; --scale-green-6: #adddc0; --scale-green-7: #8eceaa; --scale-green-8: #5bb98b; --scale-green-9: #30a46c; --scale-green-10: #2b9a66; --scale-green-11: #218358; --scale-green-12: #193b2d; --scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); --scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); --scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); --scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); --scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); --scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); --scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); --scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); --scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); --scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); --scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); --scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); --scale-yellow-1: #fdfdf9; --scale-yellow-2: #fffce8; --scale-yellow-3: #fffbd1; --scale-yellow-4: #fff8bb; --scale-yellow-5: #fef2a4; --scale-yellow-6: #f9e68c; --scale-yellow-7: #efd36c; --scale-yellow-8: #ebbc00; --scale-yellow-9: #f5d90a; --scale-yellow-10: #f7ce00; --scale-yellow-11: #946800; --scale-yellow-12: #35290f; --scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); --scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); --scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); --scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); --scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); --scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); --scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); --scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); --scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); --scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); --scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); --scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); --scale-amber-1: #fefdfb; --scale-amber-2: #fefbe9; --scale-amber-3: #fff7c2; --scale-amber-4: #ffee9c; --scale-amber-5: #fbe577; --scale-amber-6: #f3d673; --scale-amber-7: #e9c162; --scale-amber-8: #e2a336; --scale-amber-9: #ffc53d; --scale-amber-10: #ffba18; --scale-amber-11: #ab6400; --scale-amber-12: #4f3422; --scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); --scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); --scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); --scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); --scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); --scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); --scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); --scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); --scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); --scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); --scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); --scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); --scale-orange-1: #fefcfb; --scale-orange-2: #fff7ed; --scale-orange-3: #ffefd6; --scale-orange-4: #ffdfb5; --scale-orange-5: #ffd19a; --scale-orange-6: #ffc182; --scale-orange-7: #f5ae73; --scale-orange-8: #ec9455; --scale-orange-9: #f76b15; --scale-orange-10: #ef5f00; --scale-orange-11: #cc4e00; --scale-orange-12: #582d1d; --scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); --scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); --scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); --scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); --scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); --scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); --scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); --scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); --scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); --scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); --scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); --scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); --scale-red-1: #fffcfc; --scale-red-2: #fff7f7; --scale-red-3: #feebec; --scale-red-4: #ffdbdc; --scale-red-5: #ffcdce; --scale-red-6: #fdbdbe; --scale-red-7: #f4a9aa; --scale-red-8: #eb8e90; --scale-red-9: #e5484d; --scale-red-10: #dc3e42; --scale-red-11: #ce2c31; --scale-red-12: #641723; --scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); --scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); --scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); --scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); --scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); --scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); --scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); --scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); --scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); --scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); --scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); --scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); --scale-pink-1: #fffcfe; --scale-pink-2: #fff7fc; --scale-pink-3: #feeef8; --scale-pink-4: #fce5f3; --scale-pink-5: #f9d8ec; --scale-pink-6: #f3c6e2; --scale-pink-7: #ecadd4; --scale-pink-8: #e38ec3; --scale-pink-9: #d6409f; --scale-pink-10: #d23197; --scale-pink-11: #cd1d8d; --scale-pink-12: #651249; --scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); --scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); --scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); --scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); --scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); --scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); --scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); --scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); --scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); --scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); --scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); --scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); --scale-purple-1: #fefcfe; --scale-purple-2: #fbf7fe; --scale-purple-3: #f7edfe; --scale-purple-4: #f2e2fc; --scale-purple-5: #ead5f9; --scale-purple-6: #e0c4f4; --scale-purple-7: #d1afec; --scale-purple-8: #be93e4; --scale-purple-9: #8e4ec6; --scale-purple-10: #8347b9; --scale-purple-11: #8145b5; --scale-purple-12: #402060; --scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); --scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); --scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); --scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); --scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); --scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); --scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); --scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); --scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); --scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); --scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); --scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); --primitive-primary-1: var(--scale-purple-1); --primitive-primary-2: var(--scale-purple-2); --primitive-primary-3: var(--scale-purple-3); --primitive-primary-4: var(--scale-purple-4); --primitive-primary-5: var(--scale-purple-5); --primitive-primary-6: var(--scale-purple-6); --primitive-primary-7: var(--scale-purple-7); --primitive-primary-8: var(--scale-purple-8); --primitive-primary-9: var(--scale-purple-9); --primitive-primary-10: var(--scale-purple-10); --primitive-primary-11: var(--scale-purple-11); --primitive-primary-12: var(--scale-purple-12); --primitive-primary-a1: var(--scale-purple-a1); --primitive-primary-a2: var(--scale-purple-a2); --primitive-primary-a3: var(--scale-purple-a3); --primitive-primary-a4: var(--scale-purple-a4); --primitive-primary-a5: var(--scale-purple-a5); --primitive-primary-a6: var(--scale-purple-a6); --primitive-primary-a7: var(--scale-purple-a7); --primitive-primary-a8: var(--scale-purple-a8); --primitive-primary-a9: var(--scale-purple-a9); --primitive-primary-a10: var(--scale-purple-a10); --primitive-primary-a11: var(--scale-purple-a11); --primitive-primary-a12: var(--scale-purple-a12); --color-primary-track: var(--primitive-primary-1); --color-primary-element: var(--primitive-primary-3); --color-primary-hover: var(--primitive-primary-4); --color-primary-active: var(--primitive-primary-5); --color-primary-border: var(--primitive-primary-6); --color-primary-solid: var(--primitive-primary-9); --color-primary-solid-hover: var(--primitive-primary-10); --color-primary-text: var(--primitive-primary-11); --color-primary-contrast: var(--primitive-primary-12); --primitive-secondary-1: var(--scale-slate-1); --primitive-secondary-2: var(--scale-slate-2); --primitive-secondary-3: var(--scale-slate-3); --primitive-secondary-4: var(--scale-slate-4); --primitive-secondary-5: var(--scale-slate-5); --primitive-secondary-6: var(--scale-slate-6); --primitive-secondary-7: var(--scale-slate-7); --primitive-secondary-8: var(--scale-slate-8); --primitive-secondary-9: var(--scale-slate-9); --primitive-secondary-10: var(--scale-slate-10); --primitive-secondary-11: var(--scale-slate-11); --primitive-secondary-12: var(--scale-slate-12); --primitive-secondary-a1: var(--scale-slate-a1); --primitive-secondary-a2: var(--scale-slate-a2); --primitive-secondary-a3: var(--scale-slate-a3); --primitive-secondary-a4: var(--scale-slate-a4); --primitive-secondary-a5: var(--scale-slate-a5); --primitive-secondary-a6: var(--scale-slate-a6); --primitive-secondary-a7: var(--scale-slate-a7); --primitive-secondary-a8: var(--scale-slate-a8); --primitive-secondary-a9: var(--scale-slate-a9); --primitive-secondary-a10: var(--scale-slate-a10); --primitive-secondary-a11: var(--scale-slate-a11); --primitive-secondary-a12: var(--scale-slate-a12); --color-secondary-track: var(--primitive-secondary-1); --color-secondary-element: var(--primitive-secondary-3); --color-secondary-hover: var(--primitive-secondary-4); --color-secondary-active: var(--primitive-secondary-5); --color-secondary-border: var(--primitive-secondary-6); --color-secondary-solid: var(--primitive-secondary-9); --color-secondary-solid-hover: var(--primitive-secondary-10); --color-secondary-text: var(--primitive-secondary-11); --color-secondary-contrast: var(--primitive-secondary-12); --primitive-tertiary-1: var(--scale-gray-1); --primitive-tertiary-2: var(--scale-gray-2); --primitive-tertiary-3: var(--scale-gray-3); --primitive-tertiary-4: var(--scale-gray-4); --primitive-tertiary-5: var(--scale-gray-5); --primitive-tertiary-6: var(--scale-gray-6); --primitive-tertiary-7: var(--scale-gray-7); --primitive-tertiary-8: var(--scale-gray-8); --primitive-tertiary-9: var(--scale-gray-9); --primitive-tertiary-10: var(--scale-gray-10); --primitive-tertiary-11: var(--scale-gray-11); --primitive-tertiary-12: var(--scale-gray-12); --primitive-tertiary-a1: var(--scale-gray-a1); --primitive-tertiary-a2: var(--scale-gray-a2); --primitive-tertiary-a3: var(--scale-gray-a3); --primitive-tertiary-a4: var(--scale-gray-a4); --primitive-tertiary-a5: var(--scale-gray-a5); --primitive-tertiary-a6: var(--scale-gray-a6); --primitive-tertiary-a7: var(--scale-gray-a7); --primitive-tertiary-a8: var(--scale-gray-a8); --primitive-tertiary-a9: var(--scale-gray-a9); --primitive-tertiary-a10: var(--scale-gray-a10); --primitive-tertiary-a11: var(--scale-gray-a11); --primitive-tertiary-a12: var(--scale-gray-a12); --color-tertiary-track: var(--primitive-tertiary-1); --color-tertiary-element: var(--primitive-tertiary-3); --color-tertiary-hover: var(--primitive-tertiary-4); --color-tertiary-active: var(--primitive-tertiary-5); --color-tertiary-border: var(--primitive-tertiary-6); --color-tertiary-solid: var(--primitive-tertiary-9); --color-tertiary-solid-hover: var(--primitive-tertiary-10); --color-tertiary-text: var(--primitive-tertiary-11); --color-tertiary-contrast: var(--primitive-tertiary-12); --primitive-neutral-1: var(--scale-gray-1); --primitive-neutral-2: var(--scale-gray-2); --primitive-neutral-3: var(--scale-gray-3); --primitive-neutral-4: var(--scale-gray-4); --primitive-neutral-5: var(--scale-gray-5); --primitive-neutral-6: var(--scale-gray-6); --primitive-neutral-7: var(--scale-gray-7); --primitive-neutral-8: var(--scale-gray-8); --primitive-neutral-9: var(--scale-gray-9); --primitive-neutral-10: var(--scale-gray-10); --primitive-neutral-11: var(--scale-gray-11); --primitive-neutral-12: var(--scale-gray-12); --primitive-neutral-a1: var(--scale-gray-a1); --primitive-neutral-a2: var(--scale-gray-a2); --primitive-neutral-a3: var(--scale-gray-a3); --primitive-neutral-a4: var(--scale-gray-a4); --primitive-neutral-a5: var(--scale-gray-a5); --primitive-neutral-a6: var(--scale-gray-a6); --primitive-neutral-a7: var(--scale-gray-a7); --primitive-neutral-a8: var(--scale-gray-a8); --primitive-neutral-a9: var(--scale-gray-a9); --primitive-neutral-a10: var(--scale-gray-a10); --primitive-neutral-a11: var(--scale-gray-a11); --primitive-neutral-a12: var(--scale-gray-a12); --color-neutral-track: var(--primitive-neutral-1); --color-neutral-element: var(--primitive-neutral-3); --color-neutral-hover: var(--primitive-neutral-4); --color-neutral-active: var(--primitive-neutral-5); --color-neutral-border: var(--primitive-neutral-6); --color-neutral-solid: var(--primitive-neutral-9); --color-neutral-solid-hover: var(--primitive-neutral-10); --color-neutral-text: var(--primitive-neutral-11); --color-neutral-contrast: var(--primitive-neutral-12); --primitive-affirm-1: var(--scale-teal-1); --primitive-affirm-2: var(--scale-teal-2); --primitive-affirm-3: var(--scale-teal-3); --primitive-affirm-4: var(--scale-teal-4); --primitive-affirm-5: var(--scale-teal-5); --primitive-affirm-6: var(--scale-teal-6); --primitive-affirm-7: var(--scale-teal-7); --primitive-affirm-8: var(--scale-teal-8); --primitive-affirm-9: var(--scale-teal-9); --primitive-affirm-10: var(--scale-teal-10); --primitive-affirm-11: var(--scale-teal-11); --primitive-affirm-12: var(--scale-teal-12); --primitive-affirm-a1: var(--scale-teal-a1); --primitive-affirm-a2: var(--scale-teal-a2); --primitive-affirm-a3: var(--scale-teal-a3); --primitive-affirm-a4: var(--scale-teal-a4); --primitive-affirm-a5: var(--scale-teal-a5); --primitive-affirm-a6: var(--scale-teal-a6); --primitive-affirm-a7: var(--scale-teal-a7); --primitive-affirm-a8: var(--scale-teal-a8); --primitive-affirm-a9: var(--scale-teal-a9); --primitive-affirm-a10: var(--scale-teal-a10); --primitive-affirm-a11: var(--scale-teal-a11); --primitive-affirm-a12: var(--scale-teal-a12); --color-affirm-track: var(--primitive-affirm-1); --color-affirm-element: var(--primitive-affirm-3); --color-affirm-hover: var(--primitive-affirm-4); --color-affirm-active: var(--primitive-affirm-5); --color-affirm-border: var(--primitive-affirm-6); --color-affirm-solid: var(--primitive-affirm-9); --color-affirm-solid-hover: var(--primitive-affirm-10); --color-affirm-text: var(--primitive-affirm-11); --color-affirm-contrast: var(--primitive-affirm-12); --primitive-fulfill-1: var(--scale-green-1); --primitive-fulfill-2: var(--scale-green-2); --primitive-fulfill-3: var(--scale-green-3); --primitive-fulfill-4: var(--scale-green-4); --primitive-fulfill-5: var(--scale-green-5); --primitive-fulfill-6: var(--scale-green-6); --primitive-fulfill-7: var(--scale-green-7); --primitive-fulfill-8: var(--scale-green-8); --primitive-fulfill-9: var(--scale-green-9); --primitive-fulfill-10: var(--scale-green-10); --primitive-fulfill-11: var(--scale-green-11); --primitive-fulfill-12: var(--scale-green-12); --primitive-fulfill-a1: var(--scale-green-a1); --primitive-fulfill-a2: var(--scale-green-a2); --primitive-fulfill-a3: var(--scale-green-a3); --primitive-fulfill-a4: var(--scale-green-a4); --primitive-fulfill-a5: var(--scale-green-a5); --primitive-fulfill-a6: var(--scale-green-a6); --primitive-fulfill-a7: var(--scale-green-a7); --primitive-fulfill-a8: var(--scale-green-a8); --primitive-fulfill-a9: var(--scale-green-a9); --primitive-fulfill-a10: var(--scale-green-a10); --primitive-fulfill-a11: var(--scale-green-a11); --primitive-fulfill-a12: var(--scale-green-a12); --color-fulfill-track: var(--primitive-fulfill-1); --color-fulfill-element: var(--primitive-fulfill-3); --color-fulfill-hover: var(--primitive-fulfill-4); --color-fulfill-active: var(--primitive-fulfill-5); --color-fulfill-border: var(--primitive-fulfill-6); --color-fulfill-solid: var(--primitive-fulfill-9); --color-fulfill-solid-hover: var(--primitive-fulfill-10); --color-fulfill-text: var(--primitive-fulfill-11); --color-fulfill-contrast: var(--primitive-fulfill-12); --primitive-risk-1: var(--scale-orange-1); --primitive-risk-2: var(--scale-orange-2); --primitive-risk-3: var(--scale-orange-3); --primitive-risk-4: var(--scale-orange-4); --primitive-risk-5: var(--scale-orange-5); --primitive-risk-6: var(--scale-orange-6); --primitive-risk-7: var(--scale-orange-7); --primitive-risk-8: var(--scale-orange-8); --primitive-risk-9: var(--scale-orange-9); --primitive-risk-10: var(--scale-orange-10); --primitive-risk-11: var(--scale-orange-11); --primitive-risk-12: var(--scale-orange-12); --primitive-risk-a1: var(--scale-orange-a1); --primitive-risk-a2: var(--scale-orange-a2); --primitive-risk-a3: var(--scale-orange-a3); --primitive-risk-a4: var(--scale-orange-a4); --primitive-risk-a5: var(--scale-orange-a5); --primitive-risk-a6: var(--scale-orange-a6); --primitive-risk-a7: var(--scale-orange-a7); --primitive-risk-a8: var(--scale-orange-a8); --primitive-risk-a9: var(--scale-orange-a9); --primitive-risk-a10: var(--scale-orange-a10); --primitive-risk-a11: var(--scale-orange-a11); --primitive-risk-a12: var(--scale-orange-a12); --color-risk-track: var(--primitive-risk-1); --color-risk-element: var(--primitive-risk-3); --color-risk-hover: var(--primitive-risk-4); --color-risk-active: var(--primitive-risk-5); --color-risk-border: var(--primitive-risk-6); --color-risk-solid: var(--primitive-risk-9); --color-risk-solid-hover: var(--primitive-risk-10); --color-risk-text: var(--primitive-risk-11); --color-risk-contrast: var(--primitive-risk-12); --primitive-threat-1: var(--scale-red-1); --primitive-threat-2: var(--scale-red-2); --primitive-threat-3: var(--scale-red-3); --primitive-threat-4: var(--scale-red-4); --primitive-threat-5: var(--scale-red-5); --primitive-threat-6: var(--scale-red-6); --primitive-threat-7: var(--scale-red-7); --primitive-threat-8: var(--scale-red-8); --primitive-threat-9: var(--scale-red-9); --primitive-threat-10: var(--scale-red-10); --primitive-threat-11: var(--scale-red-11); --primitive-threat-12: var(--scale-red-12); --primitive-threat-a1: var(--scale-red-a1); --primitive-threat-a2: var(--scale-red-a2); --primitive-threat-a3: var(--scale-red-a3); --primitive-threat-a4: var(--scale-red-a4); --primitive-threat-a5: var(--scale-red-a5); --primitive-threat-a6: var(--scale-red-a6); --primitive-threat-a7: var(--scale-red-a7); --primitive-threat-a8: var(--scale-red-a8); --primitive-threat-a9: var(--scale-red-a9); --primitive-threat-a10: var(--scale-red-a10); --primitive-threat-a11: var(--scale-red-a11); --primitive-threat-a12: var(--scale-red-a12); --color-threat-track: var(--primitive-threat-1); --color-threat-element: var(--primitive-threat-3); --color-threat-hover: var(--primitive-threat-4); --color-threat-active: var(--primitive-threat-5); --color-threat-border: var(--primitive-threat-6); --color-threat-solid: var(--primitive-threat-9); --color-threat-solid-hover: var(--primitive-threat-10); --color-threat-text: var(--primitive-threat-11); --color-threat-contrast: var(--primitive-threat-12); --primitive-loss-1: var(--scale-purple-1); --primitive-loss-2: var(--scale-purple-2); --primitive-loss-3: var(--scale-purple-3); --primitive-loss-4: var(--scale-purple-4); --primitive-loss-5: var(--scale-purple-5); --primitive-loss-6: var(--scale-purple-6); --primitive-loss-7: var(--scale-purple-7); --primitive-loss-8: var(--scale-purple-8); --primitive-loss-9: var(--scale-purple-9); --primitive-loss-10: var(--scale-purple-10); --primitive-loss-11: var(--scale-purple-11); --primitive-loss-12: var(--scale-purple-12); --primitive-loss-a1: var(--scale-purple-a1); --primitive-loss-a2: var(--scale-purple-a2); --primitive-loss-a3: var(--scale-purple-a3); --primitive-loss-a4: var(--scale-purple-a4); --primitive-loss-a5: var(--scale-purple-a5); --primitive-loss-a6: var(--scale-purple-a6); --primitive-loss-a7: var(--scale-purple-a7); --primitive-loss-a8: var(--scale-purple-a8); --primitive-loss-a9: var(--scale-purple-a9); --primitive-loss-a10: var(--scale-purple-a10); --primitive-loss-a11: var(--scale-purple-a11); --primitive-loss-a12: var(--scale-purple-a12); --color-loss-track: var(--primitive-loss-1); --color-loss-element: var(--primitive-loss-3); --color-loss-hover: var(--primitive-loss-4); --color-loss-active: var(--primitive-loss-5); --color-loss-border: var(--primitive-loss-6); --color-loss-solid: var(--primitive-loss-9); --color-loss-solid-hover: var(--primitive-loss-10); --color-loss-text: var(--primitive-loss-11); --color-loss-contrast: var(--primitive-loss-12); --color-surface-default: var(--primitive-neutral-1); --color-surface-raised: var(--primitive-neutral-2); --color-surface-overlay: var(--primitive-neutral-3); --color-overlay: rgb(28 25 23 / 0.42); --color-content-primary: var(--primitive-neutral-12); --color-content-secondary: var(--primitive-neutral-11); --color-content-disabled: var(--primitive-neutral-8); --color-content-on-solid: #ffffff; --color-border-subtle: var(--primitive-neutral-4); --color-border-default: var(--primitive-neutral-6); --color-border-strong: var(--primitive-neutral-8); --focus-ring-color: color-mix(in srgb, var(--primitive-primary-8) 48%, transparent); --focus-ring-color-error: color-mix(in srgb, var(--primitive-risk-8) 52%, transparent); --shadow-1: 0 1px 2px rgb(15 23 42 / 0.08); --shadow-2: 0 4px 12px rgb(15 23 42 / 0.10); --shadow-3: 0 8px 24px rgb(15 23 42 / 0.12); --shadow-4: 0 14px 36px rgb(15 23 42 / 0.15); --shadow-5: 0 18px 48px rgb(15 23 42 / 0.18); --shadow-6: 0 28px 72px rgb(15 23 42 / 0.22); --shadow-none: none; --shadow-subtle: var(--shadow-1); --shadow-raised: var(--shadow-3); --shadow-overlay: var(--shadow-5); } [data-theme='base-dark'], [data-theme='dark'] { --scale-gray-1: #111111; --scale-gray-2: #191919; --scale-gray-3: #222222; --scale-gray-4: #2a2a2a; --scale-gray-5: #313131; --scale-gray-6: #3a3a3a; --scale-gray-7: #484848; --scale-gray-8: #606060; --scale-gray-9: #6e6e6e; --scale-gray-10: #7b7b7b; --scale-gray-11: #b4b4b4; --scale-gray-12: #eeeeee; --scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); --scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); --scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); --scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); --scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); --scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); --scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); --scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); --scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); --scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); --scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); --scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); --scale-slate-1: #111113; --scale-slate-2: #18191b; --scale-slate-3: #212225; --scale-slate-4: #272a2d; --scale-slate-5: #2e3135; --scale-slate-6: #363a3f; --scale-slate-7: #43484e; --scale-slate-8: #5a6169; --scale-slate-9: #696e77; --scale-slate-10: #777b84; --scale-slate-11: #b0b4ba; --scale-slate-12: #edeef0; --scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); --scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); --scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); --scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); --scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); --scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); --scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); --scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); --scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); --scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); --scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); --scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); --scale-blue-1: #0d1520; --scale-blue-2: #111927; --scale-blue-3: #0d2847; --scale-blue-4: #003362; --scale-blue-5: #004074; --scale-blue-6: #104d87; --scale-blue-7: #205d9e; --scale-blue-8: #2870bd; --scale-blue-9: #0090ff; --scale-blue-10: #3b9eff; --scale-blue-11: #70b8ff; --scale-blue-12: #c2e6ff; --scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); --scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); --scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); --scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); --scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); --scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); --scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); --scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); --scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); --scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); --scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); --scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); --scale-cyan-1: #0b161a; --scale-cyan-2: #101b20; --scale-cyan-3: #082c36; --scale-cyan-4: #003848; --scale-cyan-5: #004558; --scale-cyan-6: #045468; --scale-cyan-7: #12677e; --scale-cyan-8: #11809c; --scale-cyan-9: #00a2c7; --scale-cyan-10: #23afd0; --scale-cyan-11: #4ccce6; --scale-cyan-12: #b6ecf7; --scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); --scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); --scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); --scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); --scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); --scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); --scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); --scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); --scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); --scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); --scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); --scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); --scale-teal-1: #0d1514; --scale-teal-2: #111c1b; --scale-teal-3: #0d2d2a; --scale-teal-4: #023b37; --scale-teal-5: #084843; --scale-teal-6: #145750; --scale-teal-7: #1c6961; --scale-teal-8: #207e73; --scale-teal-9: #12a594; --scale-teal-10: #0eb39e; --scale-teal-11: #0bd8b6; --scale-teal-12: #adf0dd; --scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); --scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); --scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); --scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); --scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); --scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); --scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); --scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); --scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); --scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); --scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); --scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); --scale-green-1: #0e1512; --scale-green-2: #121b17; --scale-green-3: #132d21; --scale-green-4: #113b29; --scale-green-5: #174933; --scale-green-6: #20573e; --scale-green-7: #28684a; --scale-green-8: #2f7c57; --scale-green-9: #30a46c; --scale-green-10: #33b074; --scale-green-11: #3dd68c; --scale-green-12: #b1f1cb; --scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); --scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); --scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); --scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); --scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); --scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); --scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); --scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); --scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); --scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); --scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); --scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); --scale-yellow-1: #14120b; --scale-yellow-2: #1b180f; --scale-yellow-3: #2d2305; --scale-yellow-4: #362b00; --scale-yellow-5: #433500; --scale-yellow-6: #524202; --scale-yellow-7: #665417; --scale-yellow-8: #836a21; --scale-yellow-9: #ffe629; --scale-yellow-10: #ffff57; --scale-yellow-11: #f5e147; --scale-yellow-12: #f6eeb4; --scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); --scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); --scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); --scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); --scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); --scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); --scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); --scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); --scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); --scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); --scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); --scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); --scale-amber-1: #16120c; --scale-amber-2: #1d180f; --scale-amber-3: #302008; --scale-amber-4: #3f2700; --scale-amber-5: #4d3000; --scale-amber-6: #5c3d05; --scale-amber-7: #714f19; --scale-amber-8: #8f6424; --scale-amber-9: #ffc53d; --scale-amber-10: #ffd60a; --scale-amber-11: #ffca16; --scale-amber-12: #ffe7b3; --scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); --scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); --scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); --scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); --scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); --scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); --scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); --scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); --scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); --scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); --scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); --scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); --scale-orange-1: #17120e; --scale-orange-2: #1e160f; --scale-orange-3: #331e0b; --scale-orange-4: #462100; --scale-orange-5: #562800; --scale-orange-6: #66350c; --scale-orange-7: #7e451d; --scale-orange-8: #a35829; --scale-orange-9: #f76b15; --scale-orange-10: #ff801f; --scale-orange-11: #ffa057; --scale-orange-12: #ffe0c2; --scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); --scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); --scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); --scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); --scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); --scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); --scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); --scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); --scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); --scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); --scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); --scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); --scale-red-1: #191111; --scale-red-2: #201314; --scale-red-3: #3b1219; --scale-red-4: #500f1c; --scale-red-5: #611623; --scale-red-6: #72232d; --scale-red-7: #8c333a; --scale-red-8: #b54548; --scale-red-9: #e5484d; --scale-red-10: #ec5d5e; --scale-red-11: #ff9592; --scale-red-12: #ffd1d9; --scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); --scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); --scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); --scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); --scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); --scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); --scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); --scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); --scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); --scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); --scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); --scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); --scale-pink-1: #191117; --scale-pink-2: #21121d; --scale-pink-3: #37172f; --scale-pink-4: #4b143d; --scale-pink-5: #591c47; --scale-pink-6: #692955; --scale-pink-7: #833869; --scale-pink-8: #a84885; --scale-pink-9: #d6409f; --scale-pink-10: #de51a8; --scale-pink-11: #ff8dcc; --scale-pink-12: #fdd1ea; --scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); --scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); --scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); --scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); --scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); --scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); --scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); --scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); --scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); --scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); --scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); --scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); --scale-purple-1: #18111b; --scale-purple-2: #1e1523; --scale-purple-3: #301c3b; --scale-purple-4: #3d224e; --scale-purple-5: #48295c; --scale-purple-6: #54346b; --scale-purple-7: #664282; --scale-purple-8: #8457aa; --scale-purple-9: #8e4ec6; --scale-purple-10: #9a5cd0; --scale-purple-11: #d19dff; --scale-purple-12: #ecd9fa; --scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); --scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); --scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); --scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); --scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); --scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); --scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); --scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); --scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); --scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); --scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); --scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); --primitive-primary-1: var(--scale-purple-1); --primitive-primary-2: var(--scale-purple-2); --primitive-primary-3: var(--scale-purple-3); --primitive-primary-4: var(--scale-purple-4); --primitive-primary-5: var(--scale-purple-5); --primitive-primary-6: var(--scale-purple-6); --primitive-primary-7: var(--scale-purple-7); --primitive-primary-8: var(--scale-purple-8); --primitive-primary-9: var(--scale-purple-9); --primitive-primary-10: var(--scale-purple-10); --primitive-primary-11: var(--scale-purple-11); --primitive-primary-12: var(--scale-purple-12); --primitive-primary-a1: var(--scale-purple-a1); --primitive-primary-a2: var(--scale-purple-a2); --primitive-primary-a3: var(--scale-purple-a3); --primitive-primary-a4: var(--scale-purple-a4); --primitive-primary-a5: var(--scale-purple-a5); --primitive-primary-a6: var(--scale-purple-a6); --primitive-primary-a7: var(--scale-purple-a7); --primitive-primary-a8: var(--scale-purple-a8); --primitive-primary-a9: var(--scale-purple-a9); --primitive-primary-a10: var(--scale-purple-a10); --primitive-primary-a11: var(--scale-purple-a11); --primitive-primary-a12: var(--scale-purple-a12); --color-primary-track: var(--primitive-primary-1); --color-primary-element: var(--primitive-primary-3); --color-primary-hover: var(--primitive-primary-4); --color-primary-active: var(--primitive-primary-5); --color-primary-border: var(--primitive-primary-6); --color-primary-solid: var(--primitive-primary-9); --color-primary-solid-hover: var(--primitive-primary-10); --color-primary-text: var(--primitive-primary-11); --color-primary-contrast: var(--primitive-primary-12); --primitive-secondary-1: var(--scale-slate-1); --primitive-secondary-2: var(--scale-slate-2); --primitive-secondary-3: var(--scale-slate-3); --primitive-secondary-4: var(--scale-slate-4); --primitive-secondary-5: var(--scale-slate-5); --primitive-secondary-6: var(--scale-slate-6); --primitive-secondary-7: var(--scale-slate-7); --primitive-secondary-8: var(--scale-slate-8); --primitive-secondary-9: var(--scale-slate-9); --primitive-secondary-10: var(--scale-slate-10); --primitive-secondary-11: var(--scale-slate-11); --primitive-secondary-12: var(--scale-slate-12); --primitive-secondary-a1: var(--scale-slate-a1); --primitive-secondary-a2: var(--scale-slate-a2); --primitive-secondary-a3: var(--scale-slate-a3); --primitive-secondary-a4: var(--scale-slate-a4); --primitive-secondary-a5: var(--scale-slate-a5); --primitive-secondary-a6: var(--scale-slate-a6); --primitive-secondary-a7: var(--scale-slate-a7); --primitive-secondary-a8: var(--scale-slate-a8); --primitive-secondary-a9: var(--scale-slate-a9); --primitive-secondary-a10: var(--scale-slate-a10); --primitive-secondary-a11: var(--scale-slate-a11); --primitive-secondary-a12: var(--scale-slate-a12); --color-secondary-track: var(--primitive-secondary-1); --color-secondary-element: var(--primitive-secondary-3); --color-secondary-hover: var(--primitive-secondary-4); --color-secondary-active: var(--primitive-secondary-5); --color-secondary-border: var(--primitive-secondary-6); --color-secondary-solid: var(--primitive-secondary-9); --color-secondary-solid-hover: var(--primitive-secondary-10); --color-secondary-text: var(--primitive-secondary-11); --color-secondary-contrast: var(--primitive-secondary-12); --primitive-tertiary-1: var(--scale-gray-1); --primitive-tertiary-2: var(--scale-gray-2); --primitive-tertiary-3: var(--scale-gray-3); --primitive-tertiary-4: var(--scale-gray-4); --primitive-tertiary-5: var(--scale-gray-5); --primitive-tertiary-6: var(--scale-gray-6); --primitive-tertiary-7: var(--scale-gray-7); --primitive-tertiary-8: var(--scale-gray-8); --primitive-tertiary-9: var(--scale-gray-9); --primitive-tertiary-10: var(--scale-gray-10); --primitive-tertiary-11: var(--scale-gray-11); --primitive-tertiary-12: var(--scale-gray-12); --primitive-tertiary-a1: var(--scale-gray-a1); --primitive-tertiary-a2: var(--scale-gray-a2); --primitive-tertiary-a3: var(--scale-gray-a3); --primitive-tertiary-a4: var(--scale-gray-a4); --primitive-tertiary-a5: var(--scale-gray-a5); --primitive-tertiary-a6: var(--scale-gray-a6); --primitive-tertiary-a7: var(--scale-gray-a7); --primitive-tertiary-a8: var(--scale-gray-a8); --primitive-tertiary-a9: var(--scale-gray-a9); --primitive-tertiary-a10: var(--scale-gray-a10); --primitive-tertiary-a11: var(--scale-gray-a11); --primitive-tertiary-a12: var(--scale-gray-a12); --color-tertiary-track: var(--primitive-tertiary-1); --color-tertiary-element: var(--primitive-tertiary-3); --color-tertiary-hover: var(--primitive-tertiary-4); --color-tertiary-active: var(--primitive-tertiary-5); --color-tertiary-border: var(--primitive-tertiary-6); --color-tertiary-solid: var(--primitive-tertiary-9); --color-tertiary-solid-hover: var(--primitive-tertiary-10); --color-tertiary-text: var(--primitive-tertiary-11); --color-tertiary-contrast: var(--primitive-tertiary-12); --primitive-neutral-1: var(--scale-gray-1); --primitive-neutral-2: var(--scale-gray-2); --primitive-neutral-3: var(--scale-gray-3); --primitive-neutral-4: var(--scale-gray-4); --primitive-neutral-5: var(--scale-gray-5); --primitive-neutral-6: var(--scale-gray-6); --primitive-neutral-7: var(--scale-gray-7); --primitive-neutral-8: var(--scale-gray-8); --primitive-neutral-9: var(--scale-gray-9); --primitive-neutral-10: var(--scale-gray-10); --primitive-neutral-11: var(--scale-gray-11); --primitive-neutral-12: var(--scale-gray-12); --primitive-neutral-a1: var(--scale-gray-a1); --primitive-neutral-a2: var(--scale-gray-a2); --primitive-neutral-a3: var(--scale-gray-a3); --primitive-neutral-a4: var(--scale-gray-a4); --primitive-neutral-a5: var(--scale-gray-a5); --primitive-neutral-a6: var(--scale-gray-a6); --primitive-neutral-a7: var(--scale-gray-a7); --primitive-neutral-a8: var(--scale-gray-a8); --primitive-neutral-a9: var(--scale-gray-a9); --primitive-neutral-a10: var(--scale-gray-a10); --primitive-neutral-a11: var(--scale-gray-a11); --primitive-neutral-a12: var(--scale-gray-a12); --color-neutral-track: var(--primitive-neutral-1); --color-neutral-element: var(--primitive-neutral-3); --color-neutral-hover: var(--primitive-neutral-4); --color-neutral-active: var(--primitive-neutral-5); --color-neutral-border: var(--primitive-neutral-6); --color-neutral-solid: var(--primitive-neutral-9); --color-neutral-solid-hover: var(--primitive-neutral-10); --color-neutral-text: var(--primitive-neutral-11); --color-neutral-contrast: var(--primitive-neutral-12); --primitive-affirm-1: var(--scale-teal-1); --primitive-affirm-2: var(--scale-teal-2); --primitive-affirm-3: var(--scale-teal-3); --primitive-affirm-4: var(--scale-teal-4); --primitive-affirm-5: var(--scale-teal-5); --primitive-affirm-6: var(--scale-teal-6); --primitive-affirm-7: var(--scale-teal-7); --primitive-affirm-8: var(--scale-teal-8); --primitive-affirm-9: var(--scale-teal-9); --primitive-affirm-10: var(--scale-teal-10); --primitive-affirm-11: var(--scale-teal-11); --primitive-affirm-12: var(--scale-teal-12); --primitive-affirm-a1: var(--scale-teal-a1); --primitive-affirm-a2: var(--scale-teal-a2); --primitive-affirm-a3: var(--scale-teal-a3); --primitive-affirm-a4: var(--scale-teal-a4); --primitive-affirm-a5: var(--scale-teal-a5); --primitive-affirm-a6: var(--scale-teal-a6); --primitive-affirm-a7: var(--scale-teal-a7); --primitive-affirm-a8: var(--scale-teal-a8); --primitive-affirm-a9: var(--scale-teal-a9); --primitive-affirm-a10: var(--scale-teal-a10); --primitive-affirm-a11: var(--scale-teal-a11); --primitive-affirm-a12: var(--scale-teal-a12); --color-affirm-track: var(--primitive-affirm-1); --color-affirm-element: var(--primitive-affirm-3); --color-affirm-hover: var(--primitive-affirm-4); --color-affirm-active: var(--primitive-affirm-5); --color-affirm-border: var(--primitive-affirm-6); --color-affirm-solid: var(--primitive-affirm-9); --color-affirm-solid-hover: var(--primitive-affirm-10); --color-affirm-text: var(--primitive-affirm-11); --color-affirm-contrast: var(--primitive-affirm-12); --primitive-fulfill-1: var(--scale-green-1); --primitive-fulfill-2: var(--scale-green-2); --primitive-fulfill-3: var(--scale-green-3); --primitive-fulfill-4: var(--scale-green-4); --primitive-fulfill-5: var(--scale-green-5); --primitive-fulfill-6: var(--scale-green-6); --primitive-fulfill-7: var(--scale-green-7); --primitive-fulfill-8: var(--scale-green-8); --primitive-fulfill-9: var(--scale-green-9); --primitive-fulfill-10: var(--scale-green-10); --primitive-fulfill-11: var(--scale-green-11); --primitive-fulfill-12: var(--scale-green-12); --primitive-fulfill-a1: var(--scale-green-a1); --primitive-fulfill-a2: var(--scale-green-a2); --primitive-fulfill-a3: var(--scale-green-a3); --primitive-fulfill-a4: var(--scale-green-a4); --primitive-fulfill-a5: var(--scale-green-a5); --primitive-fulfill-a6: var(--scale-green-a6); --primitive-fulfill-a7: var(--scale-green-a7); --primitive-fulfill-a8: var(--scale-green-a8); --primitive-fulfill-a9: var(--scale-green-a9); --primitive-fulfill-a10: var(--scale-green-a10); --primitive-fulfill-a11: var(--scale-green-a11); --primitive-fulfill-a12: var(--scale-green-a12); --color-fulfill-track: var(--primitive-fulfill-1); --color-fulfill-element: var(--primitive-fulfill-3); --color-fulfill-hover: var(--primitive-fulfill-4); --color-fulfill-active: var(--primitive-fulfill-5); --color-fulfill-border: var(--primitive-fulfill-6); --color-fulfill-solid: var(--primitive-fulfill-9); --color-fulfill-solid-hover: var(--primitive-fulfill-10); --color-fulfill-text: var(--primitive-fulfill-11); --color-fulfill-contrast: var(--primitive-fulfill-12); --primitive-risk-1: var(--scale-orange-1); --primitive-risk-2: var(--scale-orange-2); --primitive-risk-3: var(--scale-orange-3); --primitive-risk-4: var(--scale-orange-4); --primitive-risk-5: var(--scale-orange-5); --primitive-risk-6: var(--scale-orange-6); --primitive-risk-7: var(--scale-orange-7); --primitive-risk-8: var(--scale-orange-8); --primitive-risk-9: var(--scale-orange-9); --primitive-risk-10: var(--scale-orange-10); --primitive-risk-11: var(--scale-orange-11); --primitive-risk-12: var(--scale-orange-12); --primitive-risk-a1: var(--scale-orange-a1); --primitive-risk-a2: var(--scale-orange-a2); --primitive-risk-a3: var(--scale-orange-a3); --primitive-risk-a4: var(--scale-orange-a4); --primitive-risk-a5: var(--scale-orange-a5); --primitive-risk-a6: var(--scale-orange-a6); --primitive-risk-a7: var(--scale-orange-a7); --primitive-risk-a8: var(--scale-orange-a8); --primitive-risk-a9: var(--scale-orange-a9); --primitive-risk-a10: var(--scale-orange-a10); --primitive-risk-a11: var(--scale-orange-a11); --primitive-risk-a12: var(--scale-orange-a12); --color-risk-track: var(--primitive-risk-1); --color-risk-element: var(--primitive-risk-3); --color-risk-hover: var(--primitive-risk-4); --color-risk-active: var(--primitive-risk-5); --color-risk-border: var(--primitive-risk-6); --color-risk-solid: var(--primitive-risk-9); --color-risk-solid-hover: var(--primitive-risk-10); --color-risk-text: var(--primitive-risk-11); --color-risk-contrast: var(--primitive-risk-12); --primitive-threat-1: var(--scale-red-1); --primitive-threat-2: var(--scale-red-2); --primitive-threat-3: var(--scale-red-3); --primitive-threat-4: var(--scale-red-4); --primitive-threat-5: var(--scale-red-5); --primitive-threat-6: var(--scale-red-6); --primitive-threat-7: var(--scale-red-7); --primitive-threat-8: var(--scale-red-8); --primitive-threat-9: var(--scale-red-9); --primitive-threat-10: var(--scale-red-10); --primitive-threat-11: var(--scale-red-11); --primitive-threat-12: var(--scale-red-12); --primitive-threat-a1: var(--scale-red-a1); --primitive-threat-a2: var(--scale-red-a2); --primitive-threat-a3: var(--scale-red-a3); --primitive-threat-a4: var(--scale-red-a4); --primitive-threat-a5: var(--scale-red-a5); --primitive-threat-a6: var(--scale-red-a6); --primitive-threat-a7: var(--scale-red-a7); --primitive-threat-a8: var(--scale-red-a8); --primitive-threat-a9: var(--scale-red-a9); --primitive-threat-a10: var(--scale-red-a10); --primitive-threat-a11: var(--scale-red-a11); --primitive-threat-a12: var(--scale-red-a12); --color-threat-track: var(--primitive-threat-1); --color-threat-element: var(--primitive-threat-3); --color-threat-hover: var(--primitive-threat-4); --color-threat-active: var(--primitive-threat-5); --color-threat-border: var(--primitive-threat-6); --color-threat-solid: var(--primitive-threat-9); --color-threat-solid-hover: var(--primitive-threat-10); --color-threat-text: var(--primitive-threat-11); --color-threat-contrast: var(--primitive-threat-12); --primitive-loss-1: var(--scale-purple-1); --primitive-loss-2: var(--scale-purple-2); --primitive-loss-3: var(--scale-purple-3); --primitive-loss-4: var(--scale-purple-4); --primitive-loss-5: var(--scale-purple-5); --primitive-loss-6: var(--scale-purple-6); --primitive-loss-7: var(--scale-purple-7); --primitive-loss-8: var(--scale-purple-8); --primitive-loss-9: var(--scale-purple-9); --primitive-loss-10: var(--scale-purple-10); --primitive-loss-11: var(--scale-purple-11); --primitive-loss-12: var(--scale-purple-12); --primitive-loss-a1: var(--scale-purple-a1); --primitive-loss-a2: var(--scale-purple-a2); --primitive-loss-a3: var(--scale-purple-a3); --primitive-loss-a4: var(--scale-purple-a4); --primitive-loss-a5: var(--scale-purple-a5); --primitive-loss-a6: var(--scale-purple-a6); --primitive-loss-a7: var(--scale-purple-a7); --primitive-loss-a8: var(--scale-purple-a8); --primitive-loss-a9: var(--scale-purple-a9); --primitive-loss-a10: var(--scale-purple-a10); --primitive-loss-a11: var(--scale-purple-a11); --primitive-loss-a12: var(--scale-purple-a12); --color-loss-track: var(--primitive-loss-1); --color-loss-element: var(--primitive-loss-3); --color-loss-hover: var(--primitive-loss-4); --color-loss-active: var(--primitive-loss-5); --color-loss-border: var(--primitive-loss-6); --color-loss-solid: var(--primitive-loss-9); --color-loss-solid-hover: var(--primitive-loss-10); --color-loss-text: var(--primitive-loss-11); --color-loss-contrast: var(--primitive-loss-12); --color-surface-default: var(--primitive-neutral-1); --color-surface-raised: var(--primitive-neutral-2); --color-surface-overlay: var(--primitive-neutral-4); --color-overlay: rgb(0 0 0 / 0.66); --color-content-primary: var(--primitive-neutral-12); --color-content-secondary: var(--primitive-neutral-11); --color-content-disabled: var(--primitive-neutral-8); --color-content-on-solid: #ffffff; --color-border-subtle: var(--primitive-neutral-4); --color-border-default: var(--primitive-neutral-6); --color-border-strong: var(--primitive-neutral-8); --focus-ring-color: color-mix(in srgb, var(--primitive-primary-8) 52%, transparent); --focus-ring-color-error: color-mix(in srgb, var(--primitive-risk-8) 56%, transparent); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.28); --shadow-2: 0 5px 16px rgb(0 0 0 / 0.34); --shadow-3: 0 10px 30px rgb(0 0 0 / 0.42); --shadow-4: 0 16px 44px rgb(0 0 0 / 0.48); --shadow-5: 0 22px 60px rgb(0 0 0 / 0.55); --shadow-6: 0 34px 88px rgb(0 0 0 / 0.62); --shadow-none: none; --shadow-subtle: var(--shadow-1); --shadow-raised: var(--shadow-3); --shadow-overlay: var(--shadow-5); }