:root { /* Computer Modern (Latin Modern Roman) is the single UI typeface across the whole product — sans AND serif resolve to it so nothing in the shared UI drifts to a different family. Keep this in lockstep with FONT_SANS/SERIF in frontend/workspace/src/styles/tokens.ts. NEVER swap the family; only sizes change. */ --font-family-sans: "Computer Modern", "Latin Modern Roman", Georgia, "Times New Roman", serif; --font-family-sans--font-feature-settings: normal; --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback"; --font-family-mono--font-feature-settings: "ss01" 1; --font-family-serif: "Computer Modern", "Latin Modern Roman", Georgia, "Times New Roman", serif; --font-family-serif--font-feature-settings: normal; --font-size-2x-small: 10px; --font-size-x-small: 11px; --font-size-small: 12px; --font-size-base: 13px; --font-size-large: 15px; --font-size-x-large: 18px; --font-weight-regular: 400; --font-weight-medium: 500; --line-height-normal: 140%; --line-height-large: 150%; --line-height-x-large: 180%; --line-height-2x-large: 200%; --letter-spacing-normal: 0; --letter-spacing-tight: -0.16px; --letter-spacing-tightest: -0.32px; --paragraph-spacing-base: 0; /* Motion — two durations, two easings. Hover/highlight uses fast+standard; movement (popups, drawers, reveals) uses slow+out-expo. */ --duration-fast: 120ms; --duration-slow: 200ms; --ease-standard: ease; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; /* Sharpened scale — converges on the app's 2px "instrument-readout" language so shared @synsci/ui components (buttons, cards, dialogs) stop reading soft. */ --radius-xs: 0.25rem; /* 4px — unified control tier (buttons/tabs/selectors) */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.25rem; /* 4px */ --radius-lg: 0.375rem; /* 6px — cards */ --radius-xl: 0.5rem; /* 8px — dialogs */ --shadow-xs: 0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)), 0 0.5px 1.5px 0 light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.08)), 0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)); --shadow-md: 0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.1)), 0 4px 8px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)), 0 1px 2px light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.15)); --shadow-lg: 0 16px 48px -6px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.15)), 0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1)), 0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1)); --shadow-xxs-border: 0 0 0 0.5px var(--border-weak-base, rgba(0, 0, 0, 0.07)); --shadow-xs-border: 0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); --shadow-xs-border-base: 0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); --shadow-xs-border-select: 0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)), 0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12); --shadow-xs-border-focus: 0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0), 0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99)); --shadow-xs-border-hover: 0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); --shadow-xs-border-critical-base: 0 0 0 1px var(--border-critical-selected, #fc543a); --shadow-xs-border-critical-focus: 0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #fc543a), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12); --shadow-lg-border-base: 0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03), 0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05), 0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09); color-scheme: light; --text-mix-blend-mode: multiply; /* State aliases — mode-agnostic (they resolve through mode-aware tokens). These names are consumed by switch/checkbox/button/toast CSS; without them the declarations were invalid and the states rendered transparent. */ --surface-hover: var(--surface-base-hover); --surface-focus: var(--border-selected); --surface-disabled: var(--input-disabled); --text-error: var(--text-on-critical-base); --border-error: var(--border-critical-base); --text-invert-stronger: var(--text-invert-strong); --color-primary: var(--surface-brand-base); /* OpenScience fallback variables (light) */ --background-base: #f8f7f7; --background-weak: var(--smoke-light-3); --background-strong: var(--smoke-light-1); --background-stronger: #fcfcfc; --surface-base: var(--smoke-light-alpha-2); --base: var(--smoke-light-alpha-2); --surface-base-hover: #0500000f; --surface-base-active: var(--smoke-light-alpha-3); --surface-base-interactive-active: var(--cobalt-light-alpha-3); --base2: var(--smoke-light-alpha-2); --base3: var(--smoke-light-alpha-2); --surface-inset-base: var(--smoke-light-alpha-2); --surface-inset-base-hover: var(--smoke-light-alpha-3); --surface-inset-strong: #1f000017; --surface-inset-strong-hover: #1f000017; --surface-raised-base: var(--smoke-light-alpha-1); --surface-float-base: var(--smoke-dark-1); --surface-float-base-hover: var(--smoke-dark-2); --surface-raised-base-hover: var(--smoke-light-alpha-2); --surface-raised-base-active: var(--smoke-light-alpha-3); --surface-raised-strong: var(--smoke-light-1); --surface-raised-strong-hover: var(--white); --surface-raised-stronger: var(--white); --surface-raised-stronger-hover: var(--white); --surface-weak: var(--smoke-light-alpha-3); --surface-weaker: var(--smoke-light-alpha-4); --surface-strong: #ffffff; --surface-raised-stronger-non-alpha: var(--white); --surface-brand-base: var(--yuzu-light-9); --surface-brand-hover: var(--yuzu-light-10); --surface-interactive-base: var(--cobalt-light-3); --surface-interactive-hover: #e5f0ff; --surface-interactive-weak: var(--cobalt-light-2); --surface-interactive-weak-hover: var(--cobalt-light-3); --surface-success-base: var(--apple-light-3); --surface-success-weak: var(--apple-light-2); --surface-success-strong: var(--apple-light-9); --surface-warning-base: var(--solaris-light-3); --surface-warning-weak: var(--solaris-light-2); --surface-warning-strong: var(--solaris-light-9); --surface-critical-base: var(--ember-light-3); --surface-critical-weak: var(--ember-light-2); --surface-critical-strong: var(--ember-light-9); --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); --surface-diff-unchanged-base: #ffffff00; --surface-diff-skip-base: var(--smoke-light-2); --surface-diff-hidden-base: var(--blue-light-3); --surface-diff-hidden-weak: var(--blue-light-2); --surface-diff-hidden-weaker: var(--blue-light-1); --surface-diff-hidden-strong: var(--blue-light-5); --surface-diff-hidden-stronger: var(--blue-light-9); --surface-diff-add-base: #dafbe0; --surface-diff-add-weak: var(--mint-light-2); --surface-diff-add-weaker: var(--mint-light-1); --surface-diff-add-strong: var(--mint-light-5); --surface-diff-add-stronger: var(--mint-light-9); --surface-diff-delete-base: var(--ember-light-3); --surface-diff-delete-weak: var(--ember-light-2); --surface-diff-delete-weaker: var(--ember-light-1); --surface-diff-delete-strong: var(--ember-light-6); --surface-diff-delete-stronger: var(--ember-light-9); --input-base: var(--smoke-light-1); --input-hover: var(--smoke-light-2); --input-active: var(--cobalt-light-1); --input-selected: var(--cobalt-light-4); --input-focus: var(--cobalt-light-1); --input-disabled: var(--smoke-light-4); --text-base: var(--smoke-light-11); --text-weak: var(--smoke-light-9); --text-weaker: var(--smoke-light-8); --text-strong: var(--smoke-light-12); --text-invert-base: var(--smoke-dark-alpha-11); --text-invert-weak: var(--smoke-dark-alpha-9); --text-invert-weaker: var(--smoke-dark-alpha-8); --text-invert-strong: var(--smoke-dark-alpha-12); --text-interactive-base: var(--cobalt-light-9); --text-on-brand-base: var(--smoke-light-alpha-11); --text-on-interactive-base: var(--smoke-light-1); --text-on-interactive-weak: var(--smoke-dark-alpha-11); --text-on-success-base: var(--apple-light-10); --text-on-critical-base: var(--ember-light-10); --text-on-critical-weak: var(--ember-light-8); --text-on-critical-strong: var(--ember-light-12); --text-on-warning-base: var(--smoke-dark-alpha-11); --text-on-info-base: var(--smoke-dark-alpha-11); --text-diff-add-base: var(--mint-light-11); --text-diff-delete-base: var(--ember-light-10); --text-diff-delete-strong: var(--ember-light-12); --text-diff-add-strong: var(--mint-light-12); --text-on-info-weak: var(--smoke-dark-alpha-9); --text-on-info-strong: var(--smoke-dark-alpha-12); --text-on-warning-weak: var(--smoke-dark-alpha-9); --text-on-warning-strong: var(--smoke-dark-alpha-12); --text-on-success-weak: var(--apple-light-6); --text-on-success-strong: var(--apple-light-12); --text-on-brand-weak: var(--smoke-light-alpha-9); --text-on-brand-weaker: var(--smoke-light-alpha-8); --text-on-brand-strong: var(--smoke-light-alpha-12); --button-primary-base: var(--smoke-light-12); --button-secondary-base: #fdfcfc; --button-secondary-hover: #faf9f9; --border-base: var(--smoke-light-alpha-7); --border-hover: var(--smoke-light-alpha-8); --border-active: var(--smoke-light-alpha-9); --border-selected: var(--cobalt-light-alpha-9); --border-disabled: var(--smoke-light-alpha-8); --border-focus: var(--smoke-light-alpha-9); --border-weak-base: var(--smoke-light-alpha-5); --border-strong-base: var(--smoke-light-alpha-7); --border-strong-hover: var(--smoke-light-alpha-8); --border-strong-active: var(--smoke-light-alpha-7); --border-strong-selected: var(--cobalt-light-alpha-6); --border-strong-disabled: var(--smoke-light-alpha-6); --border-strong-focus: var(--smoke-light-alpha-7); --border-weak-hover: var(--smoke-light-alpha-6); --border-weak-active: var(--smoke-light-alpha-7); --border-weak-selected: var(--cobalt-light-alpha-5); --border-weak-disabled: var(--smoke-light-alpha-6); --border-weak-focus: var(--smoke-light-alpha-7); --border-interactive-base: var(--cobalt-light-7); --border-interactive-hover: var(--cobalt-light-8); --border-interactive-active: var(--cobalt-light-9); --border-interactive-selected: var(--cobalt-light-9); --border-interactive-disabled: var(--smoke-light-8); --border-interactive-focus: var(--cobalt-light-9); --border-success-base: var(--apple-light-6); --border-success-hover: var(--apple-light-7); --border-success-selected: var(--apple-light-9); --border-warning-base: var(--solaris-light-6); --border-warning-hover: var(--solaris-light-7); --border-warning-selected: var(--solaris-light-9); --border-critical-base: var(--ember-light-6); --border-critical-hover: var(--ember-light-7); --border-critical-selected: var(--ember-light-9); --border-info-base: var(--lilac-light-6); --border-info-hover: var(--lilac-light-7); --border-info-selected: var(--lilac-light-9); --icon-base: var(--smoke-light-9); --icon-hover: var(--smoke-light-11); --icon-active: var(--smoke-light-12); --icon-selected: var(--smoke-light-12); --icon-disabled: var(--smoke-light-8); --icon-focus: var(--smoke-light-12); --icon-invert-base: #ffffff; --icon-weak-base: var(--smoke-light-7); --icon-weak-hover: var(--smoke-light-8); --icon-weak-active: var(--smoke-light-9); --icon-weak-selected: var(--smoke-light-10); --icon-weak-disabled: var(--smoke-light-6); --icon-weak-focus: var(--smoke-light-9); --icon-strong-base: var(--smoke-light-12); --icon-strong-hover: #151313; --icon-strong-active: #020202; --icon-strong-selected: #020202; --icon-strong-disabled: var(--smoke-light-8); --icon-strong-focus: #020202; --icon-brand-base: var(--smoke-light-12); --icon-interactive-base: var(--cobalt-light-9); --icon-success-base: var(--apple-light-7); --icon-success-hover: var(--apple-light-8); --icon-success-active: var(--apple-light-11); --icon-warning-base: var(--amber-light-7); --icon-warning-hover: var(--amber-light-8); --icon-warning-active: var(--amber-light-11); --icon-critical-base: var(--ember-light-10); --icon-critical-hover: var(--ember-light-11); --icon-critical-active: var(--ember-light-12); --icon-info-base: var(--lilac-light-7); --icon-info-hover: var(--lilac-light-8); --icon-info-active: var(--lilac-light-11); --icon-on-brand-base: var(--smoke-light-alpha-11); --icon-on-brand-hover: var(--smoke-light-alpha-12); --icon-on-brand-selected: var(--smoke-light-alpha-12); --icon-on-interactive-base: var(--smoke-light-1); --icon-agent-plan-base: var(--purple-light-9); --icon-agent-docs-base: var(--amber-light-9); --icon-agent-ask-base: var(--cyan-light-9); --icon-agent-build-base: var(--cobalt-light-9); --icon-on-success-base: var(--apple-light-alpha-9); --icon-on-success-hover: var(--apple-light-alpha-10); --icon-on-success-selected: var(--apple-light-alpha-11); --icon-on-warning-base: var(--amber-lightalpha-9); --icon-on-warning-hover: var(--amber-lightalpha-10); --icon-on-warning-selected: var(--amber-lightalpha-11); --icon-on-critical-base: var(--ember-light-alpha-9); --icon-on-critical-hover: var(--ember-light-alpha-10); --icon-on-critical-selected: var(--ember-light-alpha-11); --icon-on-info-base: var(--lilac-light-9); --icon-on-info-hover: var(--lilac-light-alpha-10); --icon-on-info-selected: var(--lilac-light-alpha-11); --icon-diff-add-base: var(--mint-light-11); --icon-diff-add-hover: var(--mint-light-12); --icon-diff-add-active: var(--mint-light-12); --icon-diff-delete-base: var(--ember-light-10); --icon-diff-delete-hover: var(--ember-light-11); --icon-diff-modified-base: var(--icon-warning-base); --syntax-comment: var(--text-weak); --syntax-regexp: var(--text-base); --syntax-string: #006656; --syntax-keyword: var(--text-weak); --syntax-primitive: #fb4804; --syntax-operator: var(--text-base); --syntax-variable: var(--text-strong); --syntax-property: #ed6dc8; --syntax-type: #596600; --syntax-constant: #007b80; --syntax-punctuation: var(--text-base); --syntax-object: var(--text-strong); --syntax-success: var(--apple-light-10); --syntax-warning: var(--amber-light-10); --syntax-critical: var(--ember-light-10); --syntax-info: #0092a8; --syntax-diff-add: var(--mint-light-11); --syntax-diff-delete: var(--ember-light-11); --syntax-diff-unknown: #ff0000; --markdown-heading: #d68c27; --markdown-text: #1a1a1a; --markdown-link: #3b7dd8; --markdown-link-text: #318795; --markdown-code: #3d9a57; --markdown-block-quote: #b0851f; --markdown-emph: #b0851f; --markdown-strong: #d68c27; --markdown-horizontal-rule: #8a8a8a; --markdown-list-item: #3b7dd8; --markdown-list-enumeration: #318795; --markdown-image: #3b7dd8; --markdown-image-text: #318795; --markdown-code-block: #1a1a1a; --border-color: #ffffff; --border-weaker-base: var(--smoke-light-alpha-3); --border-weaker-hover: var(--smoke-light-alpha-4); --border-weaker-active: var(--smoke-light-alpha-6); --border-weaker-selected: var(--cobalt-light-alpha-4); --border-weaker-disabled: var(--smoke-light-alpha-2); --border-weaker-focus: var(--smoke-light-alpha-6); --button-ghost-hover: var(--smoke-light-alpha-2); --button-ghost-hover2: var(--smoke-light-alpha-3); --avatar-background-pink: #feeef8; --avatar-background-mint: #e1fbf4; --avatar-background-orange: #fff1e7; --avatar-background-purple: #f9f1fe; --avatar-background-cyan: #e7f9fb; --avatar-background-lime: #eefadc; --avatar-text-pink: #cd1d8d; --avatar-text-mint: #147d6f; --avatar-text-orange: #ed5f00; --avatar-text-purple: #8445bc; --avatar-text-cyan: #0894b3; --avatar-text-lime: #5d770d; @media (prefers-color-scheme: dark) { color-scheme: dark; --text-mix-blend-mode: plus-lighter; /* OpenScience fallback variables (dark) */ --background-base: var(--smoke-dark-1); --background-weak: #1c1717; --background-strong: #151313; --background-stronger: #191515; --surface-base: var(--smoke-dark-alpha-2); --base: var(--smoke-dark-alpha-2); --surface-base-hover: #e0b7b716; --surface-base-active: var(--smoke-dark-alpha-3); --surface-base-interactive-active: var(--cobalt-dark-alpha-2); --base2: var(--smoke-dark-alpha-2); --base3: var(--smoke-dark-alpha-2); --surface-inset-base: #0e0b0b7f; --surface-inset-base-hover: #0e0b0b7f; --surface-inset-strong: #060505cc; --surface-inset-strong-hover: #060505cc; --surface-raised-base: var(--smoke-dark-alpha-3); --surface-float-base: var(--smoke-dark-1); --surface-float-base-hover: var(--smoke-dark-2); --surface-raised-base-hover: var(--smoke-dark-alpha-4); --surface-raised-base-active: var(--smoke-dark-alpha-5); --surface-raised-strong: var(--smoke-dark-alpha-4); --surface-raised-strong-hover: var(--smoke-dark-alpha-6); --surface-raised-stronger: var(--smoke-dark-alpha-6); --surface-raised-stronger-hover: var(--smoke-dark-alpha-7); --surface-weak: var(--smoke-dark-alpha-4); --surface-weaker: var(--smoke-dark-alpha-5); --surface-strong: var(--smoke-dark-alpha-7); --surface-raised-stronger-non-alpha: var(--smoke-dark-3); --surface-brand-base: var(--yuzu-light-9); --surface-brand-hover: var(--yuzu-light-10); --surface-interactive-base: var(--cobalt-dark-3); --surface-interactive-hover: #0a1d4d; --surface-interactive-weak: var(--cobalt-dark-2); --surface-interactive-weak-hover: var(--cobalt-light-3); --surface-success-base: var(--apple-light-3); --surface-success-weak: var(--apple-light-2); --surface-success-strong: var(--apple-light-9); --surface-warning-base: var(--solaris-light-3); --surface-warning-weak: var(--solaris-light-2); --surface-warning-strong: var(--solaris-light-9); --surface-critical-base: var(--ember-dark-3); --surface-critical-weak: var(--ember-dark-2); --surface-critical-strong: var(--ember-dark-9); --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); --surface-diff-unchanged-base: var(--smoke-dark-1); --surface-diff-skip-base: var(--smoke-dark-alpha-1); --surface-diff-hidden-base: var(--blue-dark-2); --surface-diff-hidden-weak: var(--blue-dark-1); --surface-diff-hidden-weaker: var(--blue-dark-3); --surface-diff-hidden-strong: var(--blue-dark-5); --surface-diff-hidden-stronger: var(--blue-dark-11); --surface-diff-add-base: var(--mint-dark-3); --surface-diff-add-weak: var(--mint-dark-4); --surface-diff-add-weaker: var(--mint-dark-3); --surface-diff-add-strong: var(--mint-dark-5); --surface-diff-add-stronger: var(--mint-dark-11); --surface-diff-delete-base: var(--ember-dark-3); --surface-diff-delete-weak: var(--ember-dark-4); --surface-diff-delete-weaker: var(--ember-dark-3); --surface-diff-delete-strong: var(--ember-dark-5); --surface-diff-delete-stronger: var(--ember-dark-11); --input-base: var(--smoke-dark-2); --input-hover: var(--smoke-dark-2); --input-active: var(--cobalt-dark-1); --input-selected: var(--cobalt-dark-2); --input-focus: var(--cobalt-dark-1); --input-disabled: var(--smoke-dark-4); --text-base: var(--smoke-dark-alpha-11); --text-weak: var(--smoke-dark-alpha-9); --text-weaker: var(--smoke-dark-alpha-8); --text-strong: var(--smoke-dark-alpha-12); --text-invert-base: var(--smoke-dark-alpha-11); --text-invert-weak: var(--smoke-dark-alpha-9); --text-invert-weaker: var(--smoke-dark-alpha-8); --text-invert-strong: var(--smoke-dark-alpha-12); --text-interactive-base: var(--cobalt-dark-11); --text-on-brand-base: var(--smoke-dark-alpha-11); --text-on-interactive-base: var(--smoke-dark-12); --text-on-interactive-weak: var(--smoke-dark-alpha-11); --text-on-success-base: var(--apple-dark-9); --text-on-critical-base: var(--ember-dark-9); --text-on-critical-weak: var(--ember-dark-8); --text-on-critical-strong: var(--ember-dark-12); --text-on-warning-base: var(--smoke-dark-alpha-11); --text-on-info-base: var(--smoke-dark-alpha-11); --text-diff-add-base: var(--mint-dark-11); --text-diff-delete-base: var(--ember-dark-9); --text-diff-delete-strong: var(--ember-dark-12); --text-diff-add-strong: var(--mint-dark-8); --text-on-info-weak: var(--smoke-dark-alpha-9); --text-on-info-strong: var(--smoke-dark-alpha-12); --text-on-warning-weak: var(--smoke-dark-alpha-9); --text-on-warning-strong: var(--smoke-dark-alpha-12); --text-on-success-weak: var(--apple-dark-8); --text-on-success-strong: var(--apple-dark-12); --text-on-brand-weak: var(--smoke-dark-alpha-9); --text-on-brand-weaker: var(--smoke-dark-alpha-8); --text-on-brand-strong: var(--smoke-dark-alpha-12); --button-primary-base: var(--smoke-dark-12); --button-secondary-base: #231f1f; --button-secondary-hover: #2a2727; --border-base: var(--smoke-dark-alpha-7); --border-hover: var(--smoke-dark-alpha-8); --border-active: var(--smoke-dark-alpha-9); --border-selected: var(--cobalt-dark-alpha-11); --border-disabled: var(--smoke-dark-alpha-8); --border-focus: var(--smoke-dark-alpha-9); --border-weak-base: var(--smoke-dark-alpha-6); --border-strong-base: var(--smoke-dark-alpha-8); --border-strong-hover: var(--smoke-dark-alpha-7); --border-strong-active: var(--smoke-dark-alpha-8); --border-strong-selected: var(--cobalt-dark-alpha-6); --border-strong-disabled: var(--smoke-dark-alpha-6); --border-strong-focus: var(--smoke-dark-alpha-8); --border-weak-hover: var(--smoke-dark-alpha-7); --border-weak-active: var(--smoke-dark-alpha-8); --border-weak-selected: var(--cobalt-dark-alpha-6); --border-weak-disabled: var(--smoke-dark-alpha-6); --border-weak-focus: var(--smoke-dark-alpha-8); --border-interactive-base: var(--cobalt-light-7);Lines 1–500 of 632. Load more
:root { /* Computer Modern (Latin Modern Roman) is the single UI typeface across the whole product — sans AND serif resolve to it so nothing in the shared UI drifts to a different family. Keep this in lockstep with FONT_SANS/SERIF in frontend/workspace/src/styles/tokens.ts. NEVER swap the family; only sizes change. */ --font-family-sans: "Computer Modern", "Latin Modern Roman", Georgia, "Times New Roman", serif; --font-family-sans--font-feature-settings: normal; --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback"; --font-family-mono--font-feature-settings: "ss01" 1; --font-family-serif: "Computer Modern", "Latin Modern Roman", Georgia, "Times New Roman", serif; --font-family-serif--font-feature-settings: normal; --font-size-2x-small: 10px; --font-size-x-small: 11px; --font-size-small: 12px; --font-size-base: 13px; --font-size-large: 15px; --font-size-x-large: 18px; --font-weight-regular: 400; --font-weight-medium: 500; --line-height-normal: 140%; --line-height-large: 150%; --line-height-x-large: 180%; --line-height-2x-large: 200%; --letter-spacing-normal: 0; --letter-spacing-tight: -0.16px; --letter-spacing-tightest: -0.32px; --paragraph-spacing-base: 0; /* Motion — two durations, two easings. Hover/highlight uses fast+standard; movement (popups, drawers, reveals) uses slow+out-expo. */ --duration-fast: 120ms; --duration-slow: 200ms; --ease-standard: ease; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; /* Sharpened scale — converges on the app's 2px "instrument-readout" language so shared @synsci/ui components (buttons, cards, dialogs) stop reading soft. */ --radius-xs: 0.25rem; /* 4px — unified control tier (buttons/tabs/selectors) */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.25rem; /* 4px */ --radius-lg: 0.375rem; /* 6px — cards */ --radius-xl: 0.5rem; /* 8px — dialogs */ --shadow-xs: 0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)), 0 0.5px 1.5px 0 light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.08)), 0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)); --shadow-md: 0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.1)), 0 4px 8px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)), 0 1px 2px light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.15)); --shadow-lg: 0 16px 48px -6px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.15)), 0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1)), 0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1)); --shadow-xxs-border: 0 0 0 0.5px var(--border-weak-base, rgba(0, 0, 0, 0.07)); --shadow-xs-border: 0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); --shadow-xs-border-base: 0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); --shadow-xs-border-select: 0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)), 0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12); --shadow-xs-border-focus: 0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0), 0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99)); --shadow-xs-border-hover: 0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); --shadow-xs-border-critical-base: 0 0 0 1px var(--border-critical-selected, #fc543a); --shadow-xs-border-critical-focus: 0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #fc543a), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12); --shadow-lg-border-base: 0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03), 0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05), 0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09); color-scheme: light; --text-mix-blend-mode: multiply; /* State aliases — mode-agnostic (they resolve through mode-aware tokens). These names are consumed by switch/checkbox/button/toast CSS; without them the declarations were invalid and the states rendered transparent. */ --surface-hover: var(--surface-base-hover); --surface-focus: var(--border-selected); --surface-disabled: var(--input-disabled); --text-error: var(--text-on-critical-base); --border-error: var(--border-critical-base); --text-invert-stronger: var(--text-invert-strong); --color-primary: var(--surface-brand-base); /* OpenScience fallback variables (light) */ --background-base: #f8f7f7; --background-weak: var(--smoke-light-3); --background-strong: var(--smoke-light-1); --background-stronger: #fcfcfc; --surface-base: var(--smoke-light-alpha-2); --base: var(--smoke-light-alpha-2); --surface-base-hover: #0500000f; --surface-base-active: var(--smoke-light-alpha-3); --surface-base-interactive-active: var(--cobalt-light-alpha-3); --base2: var(--smoke-light-alpha-2); --base3: var(--smoke-light-alpha-2); --surface-inset-base: var(--smoke-light-alpha-2); --surface-inset-base-hover: var(--smoke-light-alpha-3); --surface-inset-strong: #1f000017; --surface-inset-strong-hover: #1f000017; --surface-raised-base: var(--smoke-light-alpha-1); --surface-float-base: var(--smoke-dark-1); --surface-float-base-hover: var(--smoke-dark-2); --surface-raised-base-hover: var(--smoke-light-alpha-2); --surface-raised-base-active: var(--smoke-light-alpha-3); --surface-raised-strong: var(--smoke-light-1); --surface-raised-strong-hover: var(--white); --surface-raised-stronger: var(--white); --surface-raised-stronger-hover: var(--white); --surface-weak: var(--smoke-light-alpha-3); --surface-weaker: var(--smoke-light-alpha-4); --surface-strong: #ffffff; --surface-raised-stronger-non-alpha: var(--white); --surface-brand-base: var(--yuzu-light-9); --surface-brand-hover: var(--yuzu-light-10); --surface-interactive-base: var(--cobalt-light-3); --surface-interactive-hover: #e5f0ff; --surface-interactive-weak: var(--cobalt-light-2); --surface-interactive-weak-hover: var(--cobalt-light-3); --surface-success-base: var(--apple-light-3); --surface-success-weak: var(--apple-light-2); --surface-success-strong: var(--apple-light-9); --surface-warning-base: var(--solaris-light-3); --surface-warning-weak: var(--solaris-light-2); --surface-warning-strong: var(--solaris-light-9); --surface-critical-base: var(--ember-light-3); --surface-critical-weak: var(--ember-light-2); --surface-critical-strong: var(--ember-light-9); --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); --surface-diff-unchanged-base: #ffffff00; --surface-diff-skip-base: var(--smoke-light-2); --surface-diff-hidden-base: var(--blue-light-3); --surface-diff-hidden-weak: var(--blue-light-2); --surface-diff-hidden-weaker: var(--blue-light-1); --surface-diff-hidden-strong: var(--blue-light-5); --surface-diff-hidden-stronger: var(--blue-light-9); --surface-diff-add-base: #dafbe0; --surface-diff-add-weak: var(--mint-light-2); --surface-diff-add-weaker: var(--mint-light-1); --surface-diff-add-strong: var(--mint-light-5); --surface-diff-add-stronger: var(--mint-light-9); --surface-diff-delete-base: var(--ember-light-3); --surface-diff-delete-weak: var(--ember-light-2); --surface-diff-delete-weaker: var(--ember-light-1); --surface-diff-delete-strong: var(--ember-light-6); --surface-diff-delete-stronger: var(--ember-light-9); --input-base: var(--smoke-light-1); --input-hover: var(--smoke-light-2); --input-active: var(--cobalt-light-1); --input-selected: var(--cobalt-light-4); --input-focus: var(--cobalt-light-1); --input-disabled: var(--smoke-light-4); --text-base: var(--smoke-light-11); --text-weak: var(--smoke-light-9); --text-weaker: var(--smoke-light-8); --text-strong: var(--smoke-light-12); --text-invert-base: var(--smoke-dark-alpha-11); --text-invert-weak: var(--smoke-dark-alpha-9); --text-invert-weaker: var(--smoke-dark-alpha-8); --text-invert-strong: var(--smoke-dark-alpha-12); --text-interactive-base: var(--cobalt-light-9); --text-on-brand-base: var(--smoke-light-alpha-11); --text-on-interactive-base: var(--smoke-light-1); --text-on-interactive-weak: var(--smoke-dark-alpha-11); --text-on-success-base: var(--apple-light-10); --text-on-critical-base: var(--ember-light-10); --text-on-critical-weak: var(--ember-light-8); --text-on-critical-strong: var(--ember-light-12); --text-on-warning-base: var(--smoke-dark-alpha-11); --text-on-info-base: var(--smoke-dark-alpha-11); --text-diff-add-base: var(--mint-light-11); --text-diff-delete-base: var(--ember-light-10); --text-diff-delete-strong: var(--ember-light-12); --text-diff-add-strong: var(--mint-light-12); --text-on-info-weak: var(--smoke-dark-alpha-9); --text-on-info-strong: var(--smoke-dark-alpha-12); --text-on-warning-weak: var(--smoke-dark-alpha-9); --text-on-warning-strong: var(--smoke-dark-alpha-12); --text-on-success-weak: var(--apple-light-6); --text-on-success-strong: var(--apple-light-12); --text-on-brand-weak: var(--smoke-light-alpha-9); --text-on-brand-weaker: var(--smoke-light-alpha-8); --text-on-brand-strong: var(--smoke-light-alpha-12); --button-primary-base: var(--smoke-light-12); --button-secondary-base: #fdfcfc; --button-secondary-hover: #faf9f9; --border-base: var(--smoke-light-alpha-7); --border-hover: var(--smoke-light-alpha-8); --border-active: var(--smoke-light-alpha-9); --border-selected: var(--cobalt-light-alpha-9); --border-disabled: var(--smoke-light-alpha-8); --border-focus: var(--smoke-light-alpha-9); --border-weak-base: var(--smoke-light-alpha-5); --border-strong-base: var(--smoke-light-alpha-7); --border-strong-hover: var(--smoke-light-alpha-8); --border-strong-active: var(--smoke-light-alpha-7); --border-strong-selected: var(--cobalt-light-alpha-6); --border-strong-disabled: var(--smoke-light-alpha-6); --border-strong-focus: var(--smoke-light-alpha-7); --border-weak-hover: var(--smoke-light-alpha-6); --border-weak-active: var(--smoke-light-alpha-7); --border-weak-selected: var(--cobalt-light-alpha-5); --border-weak-disabled: var(--smoke-light-alpha-6); --border-weak-focus: var(--smoke-light-alpha-7); --border-interactive-base: var(--cobalt-light-7); --border-interactive-hover: var(--cobalt-light-8); --border-interactive-active: var(--cobalt-light-9); --border-interactive-selected: var(--cobalt-light-9); --border-interactive-disabled: var(--smoke-light-8); --border-interactive-focus: var(--cobalt-light-9); --border-success-base: var(--apple-light-6); --border-success-hover: var(--apple-light-7); --border-success-selected: var(--apple-light-9); --border-warning-base: var(--solaris-light-6); --border-warning-hover: var(--solaris-light-7); --border-warning-selected: var(--solaris-light-9); --border-critical-base: var(--ember-light-6); --border-critical-hover: var(--ember-light-7); --border-critical-selected: var(--ember-light-9); --border-info-base: var(--lilac-light-6); --border-info-hover: var(--lilac-light-7); --border-info-selected: var(--lilac-light-9); --icon-base: var(--smoke-light-9); --icon-hover: var(--smoke-light-11); --icon-active: var(--smoke-light-12); --icon-selected: var(--smoke-light-12); --icon-disabled: var(--smoke-light-8); --icon-focus: var(--smoke-light-12); --icon-invert-base: #ffffff; --icon-weak-base: var(--smoke-light-7); --icon-weak-hover: var(--smoke-light-8); --icon-weak-active: var(--smoke-light-9); --icon-weak-selected: var(--smoke-light-10); --icon-weak-disabled: var(--smoke-light-6); --icon-weak-focus: var(--smoke-light-9); --icon-strong-base: var(--smoke-light-12); --icon-strong-hover: #151313; --icon-strong-active: #020202; --icon-strong-selected: #020202; --icon-strong-disabled: var(--smoke-light-8); --icon-strong-focus: #020202; --icon-brand-base: var(--smoke-light-12); --icon-interactive-base: var(--cobalt-light-9); --icon-success-base: var(--apple-light-7); --icon-success-hover: var(--apple-light-8); --icon-success-active: var(--apple-light-11); --icon-warning-base: var(--amber-light-7); --icon-warning-hover: var(--amber-light-8); --icon-warning-active: var(--amber-light-11); --icon-critical-base: var(--ember-light-10); --icon-critical-hover: var(--ember-light-11); --icon-critical-active: var(--ember-light-12); --icon-info-base: var(--lilac-light-7); --icon-info-hover: var(--lilac-light-8); --icon-info-active: var(--lilac-light-11); --icon-on-brand-base: var(--smoke-light-alpha-11); --icon-on-brand-hover: var(--smoke-light-alpha-12); --icon-on-brand-selected: var(--smoke-light-alpha-12); --icon-on-interactive-base: var(--smoke-light-1); --icon-agent-plan-base: var(--purple-light-9); --icon-agent-docs-base: var(--amber-light-9); --icon-agent-ask-base: var(--cyan-light-9); --icon-agent-build-base: var(--cobalt-light-9); --icon-on-success-base: var(--apple-light-alpha-9); --icon-on-success-hover: var(--apple-light-alpha-10); --icon-on-success-selected: var(--apple-light-alpha-11); --icon-on-warning-base: var(--amber-lightalpha-9); --icon-on-warning-hover: var(--amber-lightalpha-10); --icon-on-warning-selected: var(--amber-lightalpha-11); --icon-on-critical-base: var(--ember-light-alpha-9); --icon-on-critical-hover: var(--ember-light-alpha-10); --icon-on-critical-selected: var(--ember-light-alpha-11); --icon-on-info-base: var(--lilac-light-9); --icon-on-info-hover: var(--lilac-light-alpha-10); --icon-on-info-selected: var(--lilac-light-alpha-11); --icon-diff-add-base: var(--mint-light-11); --icon-diff-add-hover: var(--mint-light-12); --icon-diff-add-active: var(--mint-light-12); --icon-diff-delete-base: var(--ember-light-10); --icon-diff-delete-hover: var(--ember-light-11); --icon-diff-modified-base: var(--icon-warning-base); --syntax-comment: var(--text-weak); --syntax-regexp: var(--text-base); --syntax-string: #006656; --syntax-keyword: var(--text-weak); --syntax-primitive: #fb4804; --syntax-operator: var(--text-base); --syntax-variable: var(--text-strong); --syntax-property: #ed6dc8; --syntax-type: #596600; --syntax-constant: #007b80; --syntax-punctuation: var(--text-base); --syntax-object: var(--text-strong); --syntax-success: var(--apple-light-10); --syntax-warning: var(--amber-light-10); --syntax-critical: var(--ember-light-10); --syntax-info: #0092a8; --syntax-diff-add: var(--mint-light-11); --syntax-diff-delete: var(--ember-light-11); --syntax-diff-unknown: #ff0000; --markdown-heading: #d68c27; --markdown-text: #1a1a1a; --markdown-link: #3b7dd8; --markdown-link-text: #318795; --markdown-code: #3d9a57; --markdown-block-quote: #b0851f; --markdown-emph: #b0851f; --markdown-strong: #d68c27; --markdown-horizontal-rule: #8a8a8a; --markdown-list-item: #3b7dd8; --markdown-list-enumeration: #318795; --markdown-image: #3b7dd8; --markdown-image-text: #318795; --markdown-code-block: #1a1a1a; --border-color: #ffffff; --border-weaker-base: var(--smoke-light-alpha-3); --border-weaker-hover: var(--smoke-light-alpha-4); --border-weaker-active: var(--smoke-light-alpha-6); --border-weaker-selected: var(--cobalt-light-alpha-4); --border-weaker-disabled: var(--smoke-light-alpha-2); --border-weaker-focus: var(--smoke-light-alpha-6); --button-ghost-hover: var(--smoke-light-alpha-2); --button-ghost-hover2: var(--smoke-light-alpha-3); --avatar-background-pink: #feeef8; --avatar-background-mint: #e1fbf4; --avatar-background-orange: #fff1e7; --avatar-background-purple: #f9f1fe; --avatar-background-cyan: #e7f9fb; --avatar-background-lime: #eefadc; --avatar-text-pink: #cd1d8d; --avatar-text-mint: #147d6f; --avatar-text-orange: #ed5f00; --avatar-text-purple: #8445bc; --avatar-text-cyan: #0894b3; --avatar-text-lime: #5d770d; @media (prefers-color-scheme: dark) { color-scheme: dark; --text-mix-blend-mode: plus-lighter; /* OpenScience fallback variables (dark) */ --background-base: var(--smoke-dark-1); --background-weak: #1c1717; --background-strong: #151313; --background-stronger: #191515; --surface-base: var(--smoke-dark-alpha-2); --base: var(--smoke-dark-alpha-2); --surface-base-hover: #e0b7b716; --surface-base-active: var(--smoke-dark-alpha-3); --surface-base-interactive-active: var(--cobalt-dark-alpha-2); --base2: var(--smoke-dark-alpha-2); --base3: var(--smoke-dark-alpha-2); --surface-inset-base: #0e0b0b7f; --surface-inset-base-hover: #0e0b0b7f; --surface-inset-strong: #060505cc; --surface-inset-strong-hover: #060505cc; --surface-raised-base: var(--smoke-dark-alpha-3); --surface-float-base: var(--smoke-dark-1); --surface-float-base-hover: var(--smoke-dark-2); --surface-raised-base-hover: var(--smoke-dark-alpha-4); --surface-raised-base-active: var(--smoke-dark-alpha-5); --surface-raised-strong: var(--smoke-dark-alpha-4); --surface-raised-strong-hover: var(--smoke-dark-alpha-6); --surface-raised-stronger: var(--smoke-dark-alpha-6); --surface-raised-stronger-hover: var(--smoke-dark-alpha-7); --surface-weak: var(--smoke-dark-alpha-4); --surface-weaker: var(--smoke-dark-alpha-5); --surface-strong: var(--smoke-dark-alpha-7); --surface-raised-stronger-non-alpha: var(--smoke-dark-3); --surface-brand-base: var(--yuzu-light-9); --surface-brand-hover: var(--yuzu-light-10); --surface-interactive-base: var(--cobalt-dark-3); --surface-interactive-hover: #0a1d4d; --surface-interactive-weak: var(--cobalt-dark-2); --surface-interactive-weak-hover: var(--cobalt-light-3); --surface-success-base: var(--apple-light-3); --surface-success-weak: var(--apple-light-2); --surface-success-strong: var(--apple-light-9); --surface-warning-base: var(--solaris-light-3); --surface-warning-weak: var(--solaris-light-2); --surface-warning-strong: var(--solaris-light-9); --surface-critical-base: var(--ember-dark-3); --surface-critical-weak: var(--ember-dark-2); --surface-critical-strong: var(--ember-dark-9); --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); --surface-diff-unchanged-base: var(--smoke-dark-1); --surface-diff-skip-base: var(--smoke-dark-alpha-1); --surface-diff-hidden-base: var(--blue-dark-2); --surface-diff-hidden-weak: var(--blue-dark-1); --surface-diff-hidden-weaker: var(--blue-dark-3); --surface-diff-hidden-strong: var(--blue-dark-5); --surface-diff-hidden-stronger: var(--blue-dark-11); --surface-diff-add-base: var(--mint-dark-3); --surface-diff-add-weak: var(--mint-dark-4); --surface-diff-add-weaker: var(--mint-dark-3); --surface-diff-add-strong: var(--mint-dark-5); --surface-diff-add-stronger: var(--mint-dark-11); --surface-diff-delete-base: var(--ember-dark-3); --surface-diff-delete-weak: var(--ember-dark-4); --surface-diff-delete-weaker: var(--ember-dark-3); --surface-diff-delete-strong: var(--ember-dark-5); --surface-diff-delete-stronger: var(--ember-dark-11); --input-base: var(--smoke-dark-2); --input-hover: var(--smoke-dark-2); --input-active: var(--cobalt-dark-1); --input-selected: var(--cobalt-dark-2); --input-focus: var(--cobalt-dark-1); --input-disabled: var(--smoke-dark-4); --text-base: var(--smoke-dark-alpha-11); --text-weak: var(--smoke-dark-alpha-9); --text-weaker: var(--smoke-dark-alpha-8); --text-strong: var(--smoke-dark-alpha-12); --text-invert-base: var(--smoke-dark-alpha-11); --text-invert-weak: var(--smoke-dark-alpha-9); --text-invert-weaker: var(--smoke-dark-alpha-8); --text-invert-strong: var(--smoke-dark-alpha-12); --text-interactive-base: var(--cobalt-dark-11); --text-on-brand-base: var(--smoke-dark-alpha-11); --text-on-interactive-base: var(--smoke-dark-12); --text-on-interactive-weak: var(--smoke-dark-alpha-11); --text-on-success-base: var(--apple-dark-9); --text-on-critical-base: var(--ember-dark-9); --text-on-critical-weak: var(--ember-dark-8); --text-on-critical-strong: var(--ember-dark-12); --text-on-warning-base: var(--smoke-dark-alpha-11); --text-on-info-base: var(--smoke-dark-alpha-11); --text-diff-add-base: var(--mint-dark-11); --text-diff-delete-base: var(--ember-dark-9); --text-diff-delete-strong: var(--ember-dark-12); --text-diff-add-strong: var(--mint-dark-8); --text-on-info-weak: var(--smoke-dark-alpha-9); --text-on-info-strong: var(--smoke-dark-alpha-12); --text-on-warning-weak: var(--smoke-dark-alpha-9); --text-on-warning-strong: var(--smoke-dark-alpha-12); --text-on-success-weak: var(--apple-dark-8); --text-on-success-strong: var(--apple-dark-12); --text-on-brand-weak: var(--smoke-dark-alpha-9); --text-on-brand-weaker: var(--smoke-dark-alpha-8); --text-on-brand-strong: var(--smoke-dark-alpha-12); --button-primary-base: var(--smoke-dark-12); --button-secondary-base: #231f1f; --button-secondary-hover: #2a2727; --border-base: var(--smoke-dark-alpha-7); --border-hover: var(--smoke-dark-alpha-8); --border-active: var(--smoke-dark-alpha-9); --border-selected: var(--cobalt-dark-alpha-11); --border-disabled: var(--smoke-dark-alpha-8); --border-focus: var(--smoke-dark-alpha-9); --border-weak-base: var(--smoke-dark-alpha-6); --border-strong-base: var(--smoke-dark-alpha-8); --border-strong-hover: var(--smoke-dark-alpha-7); --border-strong-active: var(--smoke-dark-alpha-8); --border-strong-selected: var(--cobalt-dark-alpha-6); --border-strong-disabled: var(--smoke-dark-alpha-6); --border-strong-focus: var(--smoke-dark-alpha-8); --border-weak-hover: var(--smoke-dark-alpha-7); --border-weak-active: var(--smoke-dark-alpha-8); --border-weak-selected: var(--cobalt-dark-alpha-6); --border-weak-disabled: var(--smoke-dark-alpha-6); --border-weak-focus: var(--smoke-dark-alpha-8); --border-interactive-base: var(--cobalt-light-7);