/* ============================================================ Handshake Design System v2.0.0-alpha.1 GENERATED FILE — do not edit. Source: design-system/tokens/primitives.json design-system/tokens/semantic.json Rebuild: node design-system/build/build-tokens.mjs Opt in per page or per subtree: Component CSS may only reference the SEMANTIC roles (--hs-bg-*, --hs-fg-*, --hs-border-*, --hs-accent-*, --hs-success-*, ...) plus the non-colour primitives (--hs-space-*, --hs-radius-*, --hs-text-*, ...). Referencing a raw palette step from a component is a review failure — it is what made v1 impossible to retheme. ============================================================ */ /* ---------- Layer 1: primitives ---------- */ [data-hs="2"] { /* palette */ --hs-aqua-50: #EFFFF8; --hs-aqua-100: #D2FBEA; --hs-aqua-200: #B2FFE0; --hs-aqua-300: #7DF1C6; --hs-aqua-400: #43E5A4; --hs-aqua-500: #22C286; --hs-aqua-600: #12996A; --hs-aqua-700: #0B7350; --hs-forest-50: #F3F7F5; --hs-forest-100: #E3EDE8; --hs-forest-200: #C2D6CC; --hs-forest-300: #93B3A3; --hs-forest-400: #5F8672; --hs-forest-500: #3C5F4D; --hs-forest-600: #2A4C3C; --hs-forest-700: #1D4032; --hs-forest-800: #122920; --hs-forest-900: #0E1B11; --hs-forest-950: #071009; --hs-jasmine-50: #FDFAFE; --hs-jasmine-100: #F6ECFD; --hs-jasmine-200: #DFBFF7; --hs-jasmine-300: #C388F1; --hs-jasmine-400: #AD70DB; --hs-jasmine-500: #A347EA; --hs-jasmine-600: #7C16CA; --hs-jasmine-700: #502373; --hs-jasmine-800: #391650; --hs-jasmine-900: #220D30; --hs-neutral-0: #FFFFFF; --hs-neutral-25: #FCFBFA; --hs-neutral-50: #F7F8F6; --hs-neutral-100: #EFF1EE; --hs-neutral-200: #E2E5E1; --hs-neutral-300: #CBD1C9; --hs-neutral-400: #8A938C; --hs-neutral-500: #606963; --hs-neutral-600: #565E58; --hs-neutral-700: #414843; --hs-neutral-800: #2C322E; --hs-neutral-900: #1A1E1B; --hs-neutral-950: #0D100E; --hs-red-50: #FEF4F4; --hs-red-100: #FDE4E3; --hs-red-200: #FAC3C2; --hs-red-500: #E5484D; --hs-red-600: #CC3A3F; --hs-red-700: #A82B30; --hs-amber-50: #FFFAEF; --hs-amber-100: #FEF0D6; --hs-amber-200: #FBDCA4; --hs-amber-500: #F2B544; --hs-amber-600: #D2921F; --hs-amber-700: #9C6A0F; --hs-amber-800: #7A5209; --hs-blue-50: #F2F7FE; --hs-blue-100: #E1EDFD; --hs-blue-200: #BCD6F9; --hs-blue-500: #6FA8F0; --hs-blue-600: #3E7FD1; --hs-blue-700: #2A5DA0; --hs-alpha-black-04: rgba(13, 16, 14, 0.04); --hs-alpha-black-08: rgba(13, 16, 14, 0.08); --hs-alpha-black-16: rgba(13, 16, 14, 0.16); --hs-alpha-black-40: rgba(13, 16, 14, 0.40); --hs-alpha-black-64: rgba(13, 16, 14, 0.64); --hs-alpha-white-08: rgba(255, 255, 255, 0.08); --hs-alpha-white-16: rgba(255, 255, 255, 0.16); --hs-alpha-white-36: rgba(255, 255, 255, 0.36); --hs-alpha-white-64: rgba(255, 255, 255, 0.64); --hs-alpha-aqua-16: rgba(67, 229, 164, 0.16); --hs-alpha-aqua-28: rgba(67, 229, 164, 0.28); --hs-alpha-jasmine-12: rgba(163, 71, 234, 0.12); --hs-alpha-jasmine-20: rgba(163, 71, 234, 0.20); /* font */ --hs-font-display: "Lexend", "Plus Jakarta Sans", system-ui, sans-serif; --hs-font-ui: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --hs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --hs-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* text */ --hs-text-2xs: 11px; --hs-text-xs: 12px; --hs-text-sm: 14px; --hs-text-base: 16px; --hs-text-lg: 18px; --hs-text-xl: clamp(20px, 0.6vw + 18px, 22px); --hs-text-2xl: clamp(22px, 1.2vw + 18px, 26px); --hs-text-3xl: clamp(26px, 2vw + 19px, 32px); --hs-text-4xl: clamp(30px, 3vw + 20px, 40px); --hs-text-5xl: clamp(34px, 4.4vw + 20px, 48px); --hs-text-6xl: clamp(40px, 6vw + 21px, 60px); --hs-text-7xl: clamp(46px, 7.6vw + 22px, 72px); --hs-text-hero: clamp(52px, 9vw + 22px, 92px); /* leading */ --hs-leading-none: 1; --hs-leading-tight: 1.12; --hs-leading-snug: 1.28; --hs-leading-normal: 1.5; --hs-leading-body: 1.6; --hs-leading-loose: 1.75; /* tracking */ --hs-tracking-tighter: -0.022em; --hs-tracking-tight: -0.012em; --hs-tracking-normal: 0; --hs-tracking-wide: 0.02em; --hs-tracking-caps: 0.08em; /* weight */ --hs-weight-regular: 400; --hs-weight-medium: 500; --hs-weight-semibold: 600; --hs-weight-bold: 700; /* space */ --hs-space-0: 0px; --hs-space-1: 4px; --hs-space-2: 8px; --hs-space-3: 12px; --hs-space-4: 16px; --hs-space-5: 20px; --hs-space-6: 24px; --hs-space-7: 28px; --hs-space-8: 32px; --hs-space-10: 40px; --hs-space-12: 48px; --hs-space-16: 64px; --hs-space-20: 80px; --hs-space-24: 96px; --hs-space-32: 128px; --hs-space-px: 1px; /* radius */ --hs-radius-xs: 6px; --hs-radius-sm: 8px; --hs-radius-md: 12px; --hs-radius-lg: 16px; --hs-radius-xl: 20px; --hs-radius-2xl: 28px; --hs-radius-pill: 999px; --hs-radius-circle: 50%; /* shadow */ --hs-shadow-none: none; --hs-shadow-e1: 0 1px 2px rgba(13, 16, 14, 0.05); --hs-shadow-e2: 0 1px 3px rgba(13, 16, 14, 0.06), 0 4px 10px -2px rgba(13, 16, 14, 0.05); --hs-shadow-e3: 0 2px 6px rgba(13, 16, 14, 0.06), 0 12px 28px -6px rgba(13, 16, 14, 0.08); --hs-shadow-e4: 0 4px 12px rgba(13, 16, 14, 0.07), 0 24px 56px -12px rgba(13, 16, 14, 0.12); --hs-shadow-e5: 0 8px 24px rgba(13, 16, 14, 0.10), 0 40px 96px -20px rgba(13, 16, 14, 0.18); --hs-shadow-glow-aqua: 0 0 0 1px rgba(67, 229, 164, 0.35), 0 8px 32px rgba(67, 229, 164, 0.28); --hs-shadow-inset-hair: inset 0 -1px 0 rgba(13, 16, 14, 0.06); /* motion */ --hs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --hs-ease-out: cubic-bezier(0, 0, 0.2, 1); --hs-ease-in: cubic-bezier(0.4, 0, 1, 1); --hs-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --hs-ease-expand: cubic-bezier(0.22, 1, 0.36, 1); --hs-duration-instant: 80ms; --hs-duration-fast: 120ms; --hs-duration-base: 200ms; --hs-duration-slow: 320ms; --hs-duration-expand: 420ms; /* layer */ --hs-layer-base: 0; --hs-layer-raised: 10; --hs-layer-sticky: 100; --hs-layer-dock: 200; --hs-layer-overlay: 300; --hs-layer-modal: 400; --hs-layer-toast: 500; --hs-layer-tooltip: 600; /* size */ --hs-size-control-sm: 28px; --hs-size-control-md: 36px; --hs-size-control-lg: 44px; --hs-size-target-min: 24px; --hs-size-icon-sm: 14px; --hs-size-icon-md: 16px; --hs-size-icon-lg: 20px; --hs-size-avatar-sm: 24px; --hs-size-avatar-md: 32px; --hs-size-avatar-lg: 40px; --hs-size-focus-ring: 2px; --hs-size-focus-offset: 2px; --hs-size-hairline: 1px; --hs-size-container: 1200px; --hs-size-prose: 68ch; } /* ---------- Layer 2: semantic roles ---------- */ /* light is the default — no data-hs-theme needed */ [data-hs="2"], [data-hs="2"][data-hs-theme="light"] { --hs-bg-canvas: var(--hs-neutral-50); --hs-bg-raised: var(--hs-neutral-0); --hs-bg-sunken: var(--hs-neutral-100); --hs-bg-inset: var(--hs-neutral-25); --hs-bg-inverse: var(--hs-forest-900); --hs-bg-scrim: var(--hs-alpha-black-40); --hs-bg-glass: var(--hs-alpha-white-64); --hs-fg-primary: var(--hs-forest-900); --hs-fg-secondary: var(--hs-neutral-600); --hs-fg-tertiary: var(--hs-neutral-500); --hs-fg-disabled: var(--hs-neutral-400); --hs-fg-inverse: var(--hs-neutral-25); --hs-fg-inverse-secondary: var(--hs-forest-200); --hs-fg-link: var(--hs-forest-700); --hs-fg-on-accent: var(--hs-forest-900); --hs-fg-on-solid: var(--hs-neutral-0); --hs-border-subtle: var(--hs-neutral-100); --hs-border-default: var(--hs-neutral-200); --hs-border-strong: var(--hs-neutral-300); --hs-border-control: var(--hs-neutral-400); --hs-border-inverse: var(--hs-forest-700); --hs-border-accent: var(--hs-aqua-400); --hs-border-focus: var(--hs-forest-700); --hs-accent-solid: var(--hs-aqua-400); --hs-accent-solid-hover: var(--hs-aqua-300); --hs-accent-solid-active: var(--hs-aqua-500); --hs-accent-muted: var(--hs-aqua-100); --hs-accent-subtle: var(--hs-aqua-50); --hs-accent-ink: var(--hs-aqua-700); --hs-accent-ring: var(--hs-alpha-aqua-28); --hs-accent2-solid: var(--hs-jasmine-500); --hs-accent2-solid-hover: var(--hs-jasmine-400); --hs-accent2-muted: var(--hs-jasmine-100); --hs-accent2-subtle: var(--hs-jasmine-50); --hs-accent2-ink: var(--hs-jasmine-700); --hs-accent2-ring: var(--hs-alpha-jasmine-20); --hs-dock-bg: rgba(255,255,255,0.36); --hs-dock-border: rgba(255,255,255,0.34); --hs-dock-lift: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(14,27,17,0.04), 0 10px 28px rgba(14,27,17,0.14), 0 2px 8px rgba(14,27,17,0.06); --hs-dock-fg: var(--hs-neutral-600); --hs-dock-fg-active: var(--hs-aqua-700); --hs-glass-card: rgba(255,255,255,0.72); --hs-glass-control: rgba(255,255,255,0.88); --hs-glass-control-quiet: rgba(255,255,255,0.76); --hs-glass-control-ghost: rgba(255,255,255,0.62); --hs-glass-card-border: rgba(255,255,255,0.65); --hs-glass-raised: rgba(255,255,255,0.58); --hs-glass-sunken: rgba(255,255,255,0.40); --hs-glass-recessed: rgba(13,16,14,0.05); --hs-glass-recessed-border: rgba(13,16,14,0.13); --hs-glass-rim: rgba(255,255,255,0.55); --hs-glass-blur: blur(24px) saturate(1.7); --hs-glass-lift: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 20px rgba(14,27,17,0.10); --hs-glass-lift-strong: inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 34px rgba(14,27,17,0.16); --hs-success-fg: var(--hs-aqua-700); --hs-success-bg: var(--hs-aqua-50); --hs-success-border: var(--hs-aqua-200); --hs-success-solid: var(--hs-aqua-600); --hs-warning-fg: var(--hs-amber-800); --hs-warning-bg: var(--hs-amber-50); --hs-warning-border: var(--hs-amber-200); --hs-warning-solid: var(--hs-amber-500); --hs-danger-fg: var(--hs-red-700); --hs-danger-bg: var(--hs-red-50); --hs-danger-border: var(--hs-red-200); --hs-danger-solid: var(--hs-red-600); --hs-info-fg: var(--hs-blue-700); --hs-info-bg: var(--hs-blue-50); --hs-info-border: var(--hs-blue-200); --hs-info-solid: var(--hs-blue-500); --hs-elevation-flat: var(--hs-shadow-none); --hs-elevation-raised: var(--hs-shadow-e2); --hs-elevation-overlay: var(--hs-shadow-e3); --hs-elevation-modal: var(--hs-shadow-e4); --hs-elevation-popover: var(--hs-shadow-e5); } [data-hs="2"][data-hs-theme="dark"] { --hs-bg-canvas: var(--hs-forest-900); --hs-bg-raised: var(--hs-forest-800); --hs-bg-sunken: var(--hs-forest-950); --hs-bg-inset: var(--hs-forest-800); --hs-bg-inverse: var(--hs-neutral-25); --hs-bg-scrim: var(--hs-alpha-black-64); --hs-bg-glass: var(--hs-alpha-white-08); --hs-fg-primary: var(--hs-neutral-25); --hs-fg-secondary: var(--hs-forest-200); --hs-fg-tertiary: var(--hs-forest-300); --hs-fg-disabled: var(--hs-forest-400); --hs-fg-inverse: var(--hs-forest-900); --hs-fg-inverse-secondary: var(--hs-neutral-600); --hs-fg-link: var(--hs-aqua-300); --hs-fg-on-accent: var(--hs-forest-900); --hs-fg-on-solid: var(--hs-forest-900); --hs-border-subtle: var(--hs-forest-800); --hs-border-default: var(--hs-forest-700); --hs-border-strong: var(--hs-forest-600); --hs-border-control: var(--hs-forest-400); --hs-border-inverse: var(--hs-neutral-200); --hs-border-accent: var(--hs-aqua-400); --hs-border-focus: var(--hs-aqua-400); --hs-accent-solid: var(--hs-aqua-400); --hs-accent-solid-hover: var(--hs-aqua-300); --hs-accent-solid-active: var(--hs-aqua-500); --hs-accent-muted: var(--hs-forest-700); --hs-accent-subtle: var(--hs-forest-800); --hs-accent-ink: var(--hs-aqua-200); --hs-accent-ring: var(--hs-alpha-aqua-28); --hs-accent2-solid: var(--hs-jasmine-400); --hs-accent2-solid-hover: var(--hs-jasmine-300); --hs-accent2-muted: var(--hs-jasmine-800); --hs-accent2-subtle: var(--hs-jasmine-900); --hs-accent2-ink: var(--hs-jasmine-200); --hs-accent2-ring: var(--hs-alpha-jasmine-20); --hs-dock-bg: rgba(255,255,255,0.07); --hs-dock-border: rgba(255,255,255,0.14); --hs-dock-lift: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.2), 0 10px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3); --hs-dock-fg: var(--hs-forest-300); --hs-dock-fg-active: var(--hs-aqua-300); --hs-glass-card: rgba(255,255,255,0.10); --hs-glass-control: rgba(255,255,255,0.18); --hs-glass-control-quiet: rgba(255,255,255,0.13); --hs-glass-control-ghost: rgba(255,255,255,0.09); --hs-glass-card-border: rgba(255,255,255,0.16); --hs-glass-raised: rgba(255,255,255,0.14); --hs-glass-sunken: rgba(0,0,0,0.18); --hs-glass-recessed: rgba(0,0,0,0.26); --hs-glass-recessed-border: rgba(255,255,255,0.14); --hs-glass-rim: rgba(255,255,255,0.18); --hs-glass-blur: blur(24px) saturate(1.7); --hs-glass-lift: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,0.4); --hs-glass-lift-strong: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 34px rgba(0,0,0,0.5); --hs-success-fg: var(--hs-aqua-300); --hs-success-bg: var(--hs-forest-800); --hs-success-border: var(--hs-aqua-700); --hs-success-solid: var(--hs-aqua-400); --hs-warning-fg: var(--hs-amber-200); --hs-warning-bg: var(--hs-forest-800); --hs-warning-border: var(--hs-amber-700); --hs-warning-solid: var(--hs-amber-500); --hs-danger-fg: var(--hs-red-200); --hs-danger-bg: var(--hs-forest-800); --hs-danger-border: var(--hs-red-700); --hs-danger-solid: var(--hs-red-500); --hs-info-fg: var(--hs-blue-200); --hs-info-bg: var(--hs-forest-800); --hs-info-border: var(--hs-blue-700); --hs-info-solid: var(--hs-blue-500); --hs-elevation-flat: var(--hs-shadow-none); --hs-elevation-raised: 0 1px 3px rgba(0, 0, 0, 0.4); --hs-elevation-overlay: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 28px -6px rgba(0, 0, 0, 0.5); --hs-elevation-modal: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 56px -12px rgba(0, 0, 0, 0.6); --hs-elevation-popover: 0 8px 24px rgba(0, 0, 0, 0.55), 0 40px 96px -20px rgba(0, 0, 0, 0.65); } @media (prefers-color-scheme: dark) { [data-hs="2"]:not([data-hs-theme]) { --hs-bg-canvas: var(--hs-forest-900); --hs-bg-raised: var(--hs-forest-800); --hs-bg-sunken: var(--hs-forest-950); --hs-bg-inset: var(--hs-forest-800); --hs-bg-inverse: var(--hs-neutral-25); --hs-bg-scrim: var(--hs-alpha-black-64); --hs-bg-glass: var(--hs-alpha-white-08); --hs-fg-primary: var(--hs-neutral-25); --hs-fg-secondary: var(--hs-forest-200); --hs-fg-tertiary: var(--hs-forest-300); --hs-fg-disabled: var(--hs-forest-400); --hs-fg-inverse: var(--hs-forest-900); --hs-fg-inverse-secondary: var(--hs-neutral-600); --hs-fg-link: var(--hs-aqua-300); --hs-fg-on-accent: var(--hs-forest-900); --hs-fg-on-solid: var(--hs-forest-900); --hs-border-subtle: var(--hs-forest-800); --hs-border-default: var(--hs-forest-700); --hs-border-strong: var(--hs-forest-600); --hs-border-control: var(--hs-forest-400); --hs-border-inverse: var(--hs-neutral-200); --hs-border-accent: var(--hs-aqua-400); --hs-border-focus: var(--hs-aqua-400); --hs-accent-solid: var(--hs-aqua-400); --hs-accent-solid-hover: var(--hs-aqua-300); --hs-accent-solid-active: var(--hs-aqua-500); --hs-accent-muted: var(--hs-forest-700); --hs-accent-subtle: var(--hs-forest-800); --hs-accent-ink: var(--hs-aqua-200); --hs-accent-ring: var(--hs-alpha-aqua-28); --hs-accent2-solid: var(--hs-jasmine-400); --hs-accent2-solid-hover: var(--hs-jasmine-300); --hs-accent2-muted: var(--hs-jasmine-800); --hs-accent2-subtle: var(--hs-jasmine-900); --hs-accent2-ink: var(--hs-jasmine-200); --hs-accent2-ring: var(--hs-alpha-jasmine-20); --hs-dock-bg: rgba(255,255,255,0.07); --hs-dock-border: rgba(255,255,255,0.14); --hs-dock-lift: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.2), 0 10px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3); --hs-dock-fg: var(--hs-forest-300); --hs-dock-fg-active: var(--hs-aqua-300); --hs-glass-card: rgba(255,255,255,0.10); --hs-glass-control: rgba(255,255,255,0.18); --hs-glass-control-quiet: rgba(255,255,255,0.13); --hs-glass-control-ghost: rgba(255,255,255,0.09); --hs-glass-card-border: rgba(255,255,255,0.16); --hs-glass-raised: rgba(255,255,255,0.14); --hs-glass-sunken: rgba(0,0,0,0.18); --hs-glass-recessed: rgba(0,0,0,0.26); --hs-glass-recessed-border: rgba(255,255,255,0.14); --hs-glass-rim: rgba(255,255,255,0.18); --hs-glass-blur: blur(24px) saturate(1.7); --hs-glass-lift: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,0.4); --hs-glass-lift-strong: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 34px rgba(0,0,0,0.5); --hs-success-fg: var(--hs-aqua-300); --hs-success-bg: var(--hs-forest-800); --hs-success-border: var(--hs-aqua-700); --hs-success-solid: var(--hs-aqua-400); --hs-warning-fg: var(--hs-amber-200); --hs-warning-bg: var(--hs-forest-800); --hs-warning-border: var(--hs-amber-700); --hs-warning-solid: var(--hs-amber-500); --hs-danger-fg: var(--hs-red-200); --hs-danger-bg: var(--hs-forest-800); --hs-danger-border: var(--hs-red-700); --hs-danger-solid: var(--hs-red-500); --hs-info-fg: var(--hs-blue-200); --hs-info-bg: var(--hs-forest-800); --hs-info-border: var(--hs-blue-700); --hs-info-solid: var(--hs-blue-500); --hs-elevation-flat: var(--hs-shadow-none); --hs-elevation-raised: 0 1px 3px rgba(0, 0, 0, 0.4); --hs-elevation-overlay: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 28px -6px rgba(0, 0, 0, 0.5); --hs-elevation-modal: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 56px -12px rgba(0, 0, 0, 0.6); --hs-elevation-popover: 0 8px 24px rgba(0, 0, 0, 0.55), 0 40px 96px -20px rgba(0, 0, 0, 0.65); } } /* brand gradients */ [data-hs="2"] { --hs-gradient-hero: linear-gradient(90deg, #D4F7E6 0%, #CFE6F9 50%, #E5D4F7 100%); --hs-gradient-jasmine: linear-gradient(180deg, var(--hs-jasmine-400) 0%, var(--hs-jasmine-200) 100%); --hs-gradient-jasmine-soft: linear-gradient(180deg, var(--hs-jasmine-300) 0%, var(--hs-jasmine-200) 84%, var(--hs-jasmine-100) 100%); --hs-gradient-aqua-jasmine: linear-gradient(135deg, var(--hs-alpha-aqua-28), var(--hs-alpha-jasmine-12)); --hs-gradient-signal-bar: linear-gradient(90deg, var(--hs-aqua-400), var(--hs-jasmine-500)); } /* ---------- Layer 2b: surface personalities ---------- */ [data-hs="2"][data-hs-surface="console"], [data-hs="2"][data-hs-theme="light"] [data-hs-surface="console"] { --hs-bg-canvas: #F7F8F4; --hs-bg-tint: linear-gradient(192deg, rgba(67,229,164,0.32) 0%, rgba(67,229,164,0.26) 28%, rgba(133,180,222,0.24) 50%, rgba(163,71,234,0.22) 76%, rgba(163,71,234,0.20) 100%); --hs-bg-texture: repeating-radial-gradient(78% 62% at 18% 116%, transparent 0 38px, rgba(255,255,255,0.30) 38px 40px), repeating-radial-gradient(66% 54% at 92% -12%, transparent 0 46px, rgba(255,255,255,0.20) 46px 48px); } [data-hs="2"][data-hs-theme="dark"][data-hs-surface="console"], [data-hs="2"][data-hs-theme="dark"] [data-hs-surface="console"] { --hs-bg-canvas: var(--hs-forest-900); --hs-bg-tint: linear-gradient(192deg, rgba(67,229,164,0.16) 0%, rgba(67,229,164,0.13) 28%, rgba(133,180,222,0.12) 50%, rgba(163,71,234,0.11) 76%, rgba(163,71,234,0.10) 100%); --hs-bg-texture: repeating-radial-gradient(78% 62% at 18% 116%, transparent 0 38px, rgba(255,255,255,0.07) 38px 40px), repeating-radial-gradient(66% 54% at 92% -12%, transparent 0 46px, rgba(255,255,255,0.05) 46px 48px); } [data-hs="2"][data-hs-surface="studio"], [data-hs="2"][data-hs-theme="light"] [data-hs-surface="studio"] { --hs-bg-canvas: #F4F7F3; --hs-bg-tint: linear-gradient(168deg, rgba(67,229,164,0.36) 0%, rgba(67,229,164,0.30) 26%, rgba(120,214,196,0.26) 44%, rgba(111,168,240,0.24) 62%, rgba(140,150,232,0.22) 80%, rgba(163,71,234,0.20) 100%); --hs-bg-texture: repeating-radial-gradient(78% 62% at 18% 116%, transparent 0 38px, rgba(255,255,255,0.30) 38px 40px), repeating-radial-gradient(66% 54% at 92% -12%, transparent 0 46px, rgba(255,255,255,0.20) 46px 48px); } [data-hs="2"][data-hs-theme="dark"][data-hs-surface="studio"], [data-hs="2"][data-hs-theme="dark"] [data-hs-surface="studio"] { --hs-bg-canvas: var(--hs-forest-900); --hs-bg-tint: linear-gradient(168deg, rgba(67,229,164,0.17) 0%, rgba(67,229,164,0.14) 26%, rgba(120,214,196,0.13) 44%, rgba(111,168,240,0.12) 62%, rgba(140,150,232,0.11) 80%, rgba(163,71,234,0.10) 100%); --hs-bg-texture: repeating-radial-gradient(78% 62% at 18% 116%, transparent 0 38px, rgba(255,255,255,0.07) 38px 40px), repeating-radial-gradient(66% 54% at 92% -12%, transparent 0 46px, rgba(255,255,255,0.05) 46px 48px); } [data-hs="2"][data-hs-surface="brand"], [data-hs="2"][data-hs-theme="light"] [data-hs-surface="brand"] { --hs-bg-canvas: var(--hs-neutral-25); --hs-bg-tint: linear-gradient(172deg, rgba(212,247,230,0.76) 0%, rgba(212,247,230,0.60) 30%, rgba(207,230,249,0.50) 58%, rgba(229,212,247,0.44) 84%, rgba(229,212,247,0.40) 100%); --hs-bg-texture: repeating-radial-gradient(78% 62% at 18% 116%, transparent 0 38px, rgba(255,255,255,0.30) 38px 40px), repeating-radial-gradient(66% 54% at 92% -12%, transparent 0 46px, rgba(255,255,255,0.20) 46px 48px); } [data-hs="2"][data-hs-theme="dark"][data-hs-surface="brand"], [data-hs="2"][data-hs-theme="dark"] [data-hs-surface="brand"] { --hs-bg-canvas: var(--hs-forest-950); --hs-bg-tint: none; --hs-bg-texture: repeating-radial-gradient(78% 62% at 18% 116%, transparent 0 38px, rgba(255,255,255,0.30) 38px 40px), repeating-radial-gradient(66% 54% at 92% -12%, transparent 0 46px, rgba(255,255,255,0.20) 46px 48px); } @media (prefers-reduced-motion: reduce) { [data-hs="2"] { --hs-duration-instant: 1ms; --hs-duration-fast: 1ms; --hs-duration-base: 1ms; --hs-duration-slow: 1ms; --hs-duration-expand: 1ms; } }