opencode/packages/ui/src/styles/theme.css

:root {
  --font-family-sans: "Geist", "Geist Fallback";
  --font-family-sans--font-feature-settings: "ss03" 1;
  --font-family-mono: "Berkeley Mono", "Berkeley Mono Fallback";
  --font-family-mono--font-feature-settings: "ss01" 1;

  --font-size-small: 13px;
  --font-size-base: 14px;
  --font-size-large: 16px;
  --font-size-x-large: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --line-height-large: 20px;
  --line-height-x-large: 24px;
  --line-height-2x-large: 30px;
  --letter-spacing-normal: 0;
  --letter-spacing-tight: -0.1599999964237213;
  --letter-spacing-tightest: -0.3199999928474426;
  --paragraph-spacing-base: 0;

  --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;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;

  --shadow-xs:
    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-md:
    0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
  --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));

  color-scheme: light;
  --text-mix-blend-mode: multiply;

  /* OC-1-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: var(--cobalt-light-4);
  --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-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);
  --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;

    /* OC-1-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-light-3);
    --surface-interactive-hover: var(--cobalt-light-4);
    --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-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-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);
    --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-dark-5);
    --border-critical-hover: var(--ember-dark-7);
    --border-critical-selected: var(--ember-dark-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-dark-9);
    --icon-hover: var(--smoke-dark-10);
    --icon-active: var(--smoke-dark-11);
    --icon-selected: var(--smoke-dark-12);
    --icon-disabled: var(--smoke-dark-7);
    --icon-focus: var(--smoke-dark-12);
    --icon-invert-base: var(--smoke-dark-1);
    --icon-weak-base: var(--smoke-dark-6);
    --icon-weak-hover: var(--smoke-light-7);
    --icon-weak-active: var(--smoke-light-8);
    --icon-weak-selected: var(--smoke-light-9);
    --icon-weak-disabled: var(--smoke-light-4);
    --icon-weak-focus: var(--smoke-light-9);
    --icon-strong-base: var(--smoke-dark-12);
    --icon-strong-hover: #f6f3f3;
    --icon-strong-active: #fcfcfc;
    --icon-strong-selected: #fdfcfc;
    --icon-strong-disabled: var(--smoke-dark-8);
    --icon-strong-focus: #fdfcfc;
    --icon-brand-base: var(--white);
    --icon-interactive-base: var(--cobalt-dark-9);
    --icon-success-base: var(--apple-dark-7);
    --icon-success-hover: var(--apple-dark-8);
    --icon-success-active: var(--apple-dark-11);
    --icon-warning-base: var(--amber-dark-7);
    --icon-warning-hover: var(--amber-dark-8);
    --icon-warning-active: var(--amber-dark-11);
    --icon-critical-base: var(--ember-dark-9);
    --icon-critical-hover: var(--ember-dark-11);
    --icon-critical-active: var(--ember-dark-12);
    --icon-info-base: var(--lilac-dark-7);
    --icon-info-hover: var(--lilac-dark-8);
    --icon-info-active: var(--lilac-dark-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-dark-12);
    --icon-agent-plan-base: var(--purple-dark-9);
    --icon-agent-docs-base: var(--amber-dark-9);
    --icon-agent-ask-base: var(--cyan-dark-9);
    --icon-agent-build-base: var(--cobalt-dark-11);
    --icon-on-success-base: var(--apple-dark-alpha-9);
    --icon-on-success-hover: var(--apple-dark-alpha-10);
    --icon-on-success-selected: var(--apple-dark-alpha-11);
    --icon-on-warning-base: var(--amber-darkalpha-9);
    --icon-on-warning-hover: var(--amber-darkalpha-10);
    --icon-on-warning-selected: var(--amber-darkalpha-11);
    --icon-on-critical-base: var(--ember-dark-alpha-9);
    --icon-on-critical-hover: var(--ember-dark-alpha-10);
    --icon-on-critical-selected: var(--ember-dark-alpha-11);
    --icon-on-info-base: var(--lilac-dark-9);
    --icon-on-info-hover: var(--lilac-dark-alpha-10);
    --icon-on-info-selected: var(--lilac-dark-alpha-11);
    --icon-diff-add-base: var(--mint-dark-11);
    --icon-diff-add-hover: var(--mint-dark-10);
    --icon-diff-add-active: var(--mint-dark-11);
    --icon-diff-delete-base: var(--ember-dark-9);
    --icon-diff-delete-hover: var(--ember-dark-10);
    --syntax-comment: var(--text-weak);
    --syntax-regexp: var(--text-base);
    --syntax-string: #00ceb9;
    --syntax-keyword: var(--text-weak);
    --syntax-primitive: #ffba92;
    --syntax-operator: var(--text-weak);
    --syntax-variable: var(--text-strong);
    --syntax-property: #ff9ae2;
    --syntax-type: #ecf58c;
    --syntax-constant: #93e9f6;
    --syntax-punctuation: var(--text-weak);
    --syntax-object: var(--text-strong);
    --syntax-success: var(--apple-dark-10);
    --syntax-warning: var(--amber-dark-10);
    --syntax-critical: var(--ember-dark-10);
    --syntax-info: #93e9f6;
    --syntax-diff-add: var(--mint-dark-11);
    --syntax-diff-delete: var(--ember-dark-11);
    --syntax-diff-unknown: #ff0000;
    --markdown-heading: #9d7cd8;
    --markdown-text: #eeeeee;
    --markdown-link: #fab283;
    --markdown-link-text: #56b6c2;
    --markdown-code: #7fd88f;
    --markdown-block-quote: #e5c07b;
    --markdown-emph: #e5c07b;
    --markdown-strong: #f5a742;
    --markdown-horizontal-rule: #808080;
    --markdown-list-item: #fab283;
    --markdown-list-enumeration: #56b6c2;
    --markdown-image: #fab283;
    --markdown-image-text: #56b6c2;
    --markdown-code-block: #eeeeee;
    --border-color: #ffffff;
    --border-weaker-base: var(--smoke-dark-alpha-3);
    --border-weaker-hover: var(--smoke-dark-alpha-4);
    --border-weaker-active: var(--smoke-dark-alpha-6);
    --border-weaker-selected: var(--cobalt-dark-alpha-3);
    --border-weaker-disabled: var(--smoke-dark-alpha-2);
    --border-weaker-focus: var(--smoke-dark-alpha-6);
    --button-ghost-hover: var(--smoke-dark-alpha-2);
    --button-ghost-hover2: var(--smoke-dark-alpha-3);
    --avatar-background-pink: #501b3f;
    --avatar-background-mint: #033a34;
    --avatar-background-orange: #5f2a06;
    --avatar-background-purple: #432155;
    --avatar-background-cyan: #0f3058;
    --avatar-background-lime: #2b3711;
    --avatar-text-pink: #e34ba9;
    --avatar-text-mint: #95f3d9;
    --avatar-text-orange: #ff802b;
    --avatar-text-purple: #9d5bd2;
    --avatar-text-cyan: #369eff;
    --avatar-text-lime: #c4f042;
  }
}

html[data-theme="oc-2-paper"] {
  /* OC-2-paper */
  --background-base: #f7f8f8;
  --background-weak: var(--ink-light-3);
  --background-strong: var(--ink-light-1);
  --background-stronger: #fcfcfc;
  --surface-base: var(--ink-light-alpha-2);
  --base: var(--ink-light-alpha-2);
  --surface-base-hover: #0005050f;
  --surface-base-active: var(--ink-light-alpha-3);
  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
  --base2: var(--ink-light-alpha-2);
  --base3: var(--ink-light-alpha-2);
  --surface-inset-base: var(--ink-light-alpha-2);
  --surface-inset-base-hover: var(--ink-light-alpha-3);
  --surface-inset-strong: #001f1f17;
  --surface-inset-strong-hover: #001f1f17;
  --surface-raised-base: var(--ink-light-alpha-1);
  --surface-float-base: var(--ink-dark-1);
  --surface-float-base-hover: var(--ink-dark-2);
  --surface-raised-base-hover: var(--ink-light-alpha-2);
  --surface-raised-base-active: var(--ink-light-alpha-3);
  --surface-raised-strong: var(--ink-light-1);
  --surface-raised-strong-hover: var(--white);
  --surface-raised-stronger: var(--white);
  --surface-raised-stronger-hover: var(--white);
  --surface-weak: var(--ink-light-alpha-3);
  --surface-weaker: var(--ink-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: var(--cobalt-light-4);
  --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(--ink-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: var(--mint-light-3);
  --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);
  --text-base: var(--ink-light-11);
  --input-base: var(--ink-light-1);
  --input-hover: var(--ink-light-2);
  --input-active: var(--cobalt-light-1);
  --input-selected: var(--cobalt-light-4);
  --input-focus: var(--cobalt-light-1);
  --input-disabled: var(--ink-light-4);
  --text-weak: var(--ink-light-9);
  --text-weaker: var(--ink-light-8);
  --text-strong: var(--ink-light-12);
  --text-interactive-base: var(--cobalt-light-9);
  --text-on-brand-base: var(--ink-light-alpha-11);
  --text-on-interactive-base: var(--ink-light-1);
  --text-on-interactive-weak: var(--ink-light-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(--ink-dark-alpha-11);
  --text-on-info-base: var(--ink-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(--ink-dark-alpha-9);
  --text-on-info-strong: var(--ink-dark-alpha-12);
  --text-on-warning-weak: var(--ink-dark-alpha-9);
  --text-on-warning-strong: var(--ink-dark-alpha-12);
  --text-on-success-weak: var(--apple-light-6);
  --text-on-success-strong: var(--apple-light-12);
  --text-on-brand-weak: var(--ink-light-alpha-9);
  --text-on-brand-weaker: var(--ink-light-alpha-8);
  --text-on-brand-strong: var(--ink-light-alpha-12);
  --button-secondary-base: #fcfdfd;
  --button-secondary-hover: #f9fafa;
  --border-base: var(--ink-light-alpha-7);
  --border-hover: var(--ink-light-alpha-8);
  --border-active: var(--ink-light-alpha-9);
  --border-selected: var(--cobalt-light-alpha-9);
  --border-disabled: var(--ink-light-alpha-8);
  --border-focus: var(--ink-light-alpha-9);
  --border-weak-base: var(--ink-light-alpha-5);
  --border-strong-base: var(--ink-light-alpha-7);
  --border-strong-hover: var(--ink-light-alpha-8);
  --border-strong-active: var(--ink-light-alpha-7);
  --border-strong-selected: var(--cobalt-light-alpha-6);
  --border-strong-disabled: var(--ink-light-alpha-6);
  --border-strong-focus: var(--ink-light-alpha-7);
  --border-weak-hover: var(--ink-light-alpha-6);
  --border-weak-active: var(--ink-light-alpha-7);
  --border-weak-selected: var(--cobalt-light-alpha-5);
  --border-weak-disabled: var(--ink-light-alpha-6);
  --border-weak-focus: var(--ink-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(--ink-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(--ink-light-9);
  --icon-hover: var(--ink-light-11);
  --icon-active: var(--ink-light-12);
  --icon-selected: var(--ink-light-12);
  --icon-disabled: var(--ink-light-8);
  --icon-focus: var(--ink-light-12);
  --icon-invert-base: #ffffff;
  --icon-weak-base: var(--ink-light-7);
  --icon-weak-hover: var(--ink-light-8);
  --icon-weak-active: var(--ink-light-9);
  --icon-weak-selected: var(--ink-light-10);
  --icon-weak-disabled: var(--ink-light-6);
  --icon-weak-focus: var(--ink-light-9);
  --icon-strong-base: var(--ink-light-12);
  --icon-strong-hover: #131515;
  --icon-strong-active: #020202;
  --icon-strong-selected: #020202;
  --icon-strong-disabled: var(--ink-light-8);
  --icon-strong-focus: #020202;
  --icon-brand-base: var(--ink-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(--ink-light-alpha-11);
  --icon-on-brand-hover: var(--ink-light-alpha-12);
  --icon-on-brand-selected: var(--ink-light-alpha-12);
  --icon-on-interactive-base: var(--ink-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);
  --syntax-comment: var(--text-weak);
  --syntax-regexp: var(--text-base);
  --syntax-string: #007663;
  --syntax-keyword: var(--text-weak);
  --syntax-primitive: #fb7f51;
  --syntax-operator: var(--text-weak);
  --syntax-variable: var(--text-strong);
  --syntax-property: #ec6cc8;
  --syntax-type: #738400;
  --syntax-constant: #00b2b9;
  --syntax-punctuation: var(--text-weak);
  --syntax-object: var(--text-strong);
  --syntax-success: var(--apple-light-10);
  --syntax-warning: var(--amber-light-10);
  --syntax-critical: var(--ember-light-9);
  --syntax-info: #0091a7;
  --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(--ink-light-alpha-3);
  --border-weaker-hover: var(--ink-light-alpha-4);
  --border-weaker-active: var(--ink-light-alpha-6);
  --border-weaker-selected: var(--cobalt-light-alpha-4);
  --border-weaker-disabled: var(--ink-light-alpha-2);
  --border-weaker-focus: var(--ink-light-alpha-6);
  --button-ghost-hover: var(--ink-light-alpha-2);
  --button-ghost-hover2: var(--ink-light-alpha-3);

  @media (prefers-color-scheme: dark) {
    --background-base: var(--ink-dark-1);
    --background-weak: #171c1c;
    --background-strong: #131515;
    --background-stronger: #151919;
    --surface-base: var(--ink-dark-alpha-2);
    --base: var(--ink-dark-alpha-2);
    --surface-base-hover: #b8e0e00f;
    --surface-base-active: var(--ink-dark-alpha-3);
    --surface-base-interactive-active: var(--cobalt-light-alpha-3);
    --base2: var(--ink-dark-alpha-2);
    --base3: var(--ink-dark-alpha-2);
    --surface-inset-base: #0b0e0e7f;
    --surface-inset-base-hover: #0b0e0e7f;
    --surface-inset-strong: #050606cc;
    --surface-inset-strong-hover: #050606cc;
    --surface-raised-base: var(--ink-light-alpha-1);
    --surface-float-base: var(--ink-dark-1);
    --surface-float-base-hover: var(--ink-dark-2);
    --surface-raised-base-hover: var(--ink-light-alpha-2);
    --surface-raised-base-active: var(--ink-light-alpha-3);
    --surface-raised-strong: var(--ink-light-1);
    --surface-raised-strong-hover: var(--white);
    --surface-raised-stronger: var(--white);
    --surface-raised-stronger-hover: var(--white);
    --surface-weak: var(--ink-dark-alpha-4);
    --surface-weaker: var(--ink-dark-alpha-5);
    --surface-strong: var(--ink-dark-alpha-7);
    --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: var(--cobalt-light-4);
    --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(--ink-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: var(--mint-light-3);
    --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);
    --text-base: var(--ink-light-11);
    --input-base: var(--ink-light-1);
    --input-hover: var(--ink-light-2);
    --input-active: var(--cobalt-light-1);
    --input-selected: var(--cobalt-light-4);
    --input-focus: var(--cobalt-light-1);
    --input-disabled: var(--ink-light-4);
    --text-weak: var(--ink-light-9);
    --text-weaker: var(--ink-light-8);
    --text-strong: var(--ink-light-12);
    --text-interactive-base: var(--cobalt-light-9);
    --text-on-brand-base: var(--ink-light-alpha-11);
    --text-on-interactive-base: var(--ink-light-1);
    --text-on-interactive-weak: var(--ink-light-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(--ink-dark-alpha-11);
    --text-on-info-base: var(--ink-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(--ink-dark-alpha-9);
    --text-on-info-strong: var(--ink-dark-alpha-12);
    --text-on-warning-weak: var(--ink-dark-alpha-9);
    --text-on-warning-strong: var(--ink-dark-alpha-12);
    --text-on-success-weak: var(--apple-light-6);
    --text-on-success-strong: var(--apple-light-12);
    --text-on-brand-weak: var(--ink-light-alpha-9);
    --text-on-brand-weaker: var(--ink-light-alpha-8);
    --text-on-brand-strong: var(--ink-light-alpha-12);
    --button-secondary-base: #fcfdfd;
    --button-secondary-hover: #f9fafa;
    --border-base: var(--ink-light-alpha-7);
    --border-hover: var(--ink-light-alpha-8);
    --border-active: var(--ink-light-alpha-9);
    --border-selected: var(--cobalt-light-alpha-9);
    --border-disabled: var(--ink-light-alpha-8);
    --border-focus: var(--ink-light-alpha-9);
    --border-weak-base: var(--ink-light-alpha-5);
    --border-strong-base: var(--ink-light-alpha-7);
    --border-strong-hover: var(--ink-light-alpha-8);
    --border-strong-active: var(--ink-light-alpha-7);
    --border-strong-selected: var(--cobalt-light-alpha-6);
    --border-strong-disabled: var(--ink-light-alpha-6);
    --border-strong-focus: var(--ink-light-alpha-7);
    --border-weak-hover: var(--ink-light-alpha-6);
    --border-weak-active: var(--ink-light-alpha-7);
    --border-weak-selected: var(--cobalt-light-alpha-5);
    --border-weak-disabled: var(--ink-light-alpha-6);
    --border-weak-focus: var(--ink-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(--ink-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(--ink-light-9);
    --icon-hover: var(--ink-light-11);
    --icon-active: var(--ink-light-12);
    --icon-selected: var(--ink-light-12);
    --icon-disabled: var(--ink-light-8);
    --icon-focus: var(--ink-light-12);
    --icon-invert-base: #ffffff;
    --icon-weak-base: var(--ink-light-7);
    --icon-weak-hover: var(--ink-light-8);
    --icon-weak-active: var(--ink-light-9);
    --icon-weak-selected: var(--ink-light-10);
    --icon-weak-disabled: var(--ink-light-6);
    --icon-weak-focus: var(--ink-light-9);
    --icon-strong-base: var(--ink-light-12);
    --icon-strong-hover: #131515;
    --icon-strong-active: #020202;
    --icon-strong-selected: #020202;
    --icon-strong-disabled: var(--ink-light-8);
    --icon-strong-focus: #020202;
    --icon-brand-base: var(--ink-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(--ink-light-alpha-11);
    --icon-on-brand-hover: var(--ink-light-alpha-12);
    --icon-on-brand-selected: var(--ink-light-alpha-12);
    --icon-on-interactive-base: var(--ink-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);
    --syntax-comment: var(--text-weak);
    --syntax-regexp: var(--text-base);
    --syntax-string: #007663;
    --syntax-keyword: var(--text-weak);
    --syntax-primitive: #fb7f51;
    --syntax-operator: var(--text-weak);
    --syntax-variable: var(--text-strong);
    --syntax-property: #ec6cc8;
    --syntax-type: #738400;
    --syntax-constant: #00b2b9;
    --syntax-punctuation: var(--text-weak);
    --syntax-object: var(--text-strong);
    --syntax-success: var(--apple-light-10);
    --syntax-warning: var(--amber-light-10);
    --syntax-critical: var(--ember-light-9);
    --syntax-info: #0091a7;
    --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(--ink-light-alpha-3);
    --border-weaker-hover: var(--ink-light-alpha-4);
    --border-weaker-active: var(--ink-light-alpha-6);
    --border-weaker-selected: var(--cobalt-light-alpha-4);
    --border-weaker-disabled: var(--ink-light-alpha-2);
    --border-weaker-focus: var(--ink-light-alpha-6);
    --button-ghost-hover: var(--ink-light-alpha-2);
    --button-ghost-hover2: var(--ink-light-alpha-3);
  }
}