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

@layer theme {
  :root {
    color-scheme: light;

    /* ── Background ── */
    --v2-background-bg-base: var(--v2-grey-50);
    --v2-background-bg-deep: var(--v2-grey-100);
    --v2-background-bg-layer-01: var(--v2-grey-100);
    --v2-background-bg-layer-02: var(--v2-grey-200);
    --v2-background-bg-layer-03: var(--v2-grey-300);
    --v2-background-bg-layer-04: var(--v2-grey-400);
    --v2-background-bg-inverse: var(--v2-grey-1100);
    --v2-background-bg-contrast: var(--v2-grey-1000);
    --v2-background-bg-button-neutral: var(--v2-grey-50);
    --v2-background-bg-accent: var(--v2-blue-600);

    /* ── Text ── */
    --v2-text-text-base: var(--v2-grey-1100);
    --v2-text-text-muted: var(--v2-grey-700);
    --v2-text-text-faint: var(--v2-grey-600);
    --v2-text-text-inverse: var(--v2-grey-50);
    --v2-text-text-contrast: var(--v2-grey-50);
    --v2-text-text-accent: var(--v2-blue-600);
    --v2-text-text-accent-hover: var(--v2-blue-700);

    /* ── Icon ── */
    --v2-icon-icon-base: var(--v2-grey-800);
    --v2-icon-icon-muted: var(--v2-grey-600);
    --v2-icon-icon-inverse: var(--v2-grey-50);
    --v2-icon-icon-contrast: var(--v2-grey-100);
    --v2-icon-icon-accent: var(--v2-blue-600);
    --v2-icon-icon-accent-hover: var(--v2-blue-700);

    /* ── Border ── */
    --v2-border-border-muted: var(--v2-alpha-dark-8);
    --v2-border-border-base: var(--v2-alpha-dark-10);
    --v2-border-border-strong: var(--v2-alpha-dark-20);
    --v2-border-border-inverse: var(--v2-grey-1000);
    --v2-border-border-focus: var(--v2-blue-500);

    /* ── Overlay ── */
    --v2-overlay-simple-overlay-hover: var(--v2-alpha-dark-4);
    --v2-overlay-simple-overlay-pressed: var(--v2-alpha-dark-8);
    --v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-light-12);
    --v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-light-24);
    --v2-overlay-simple-overlay-scrim: var(--v2-alpha-dark-40);
    --v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
    --v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
    --v2-overlay-simple-tab-active-scrim: #fafafa00;
    --v2-overlay-simple-tab-hover-scrim: #eeeeee00;
    --v2-overlay-simple-tab-scrim: #fafafa00;

    /* ── State ── */
    --v2-state-bg-success: var(--v2-green-100);
    --v2-state-fg-success: var(--v2-green-800);
    --v2-state-border-success: var(--v2-green-300);
    --v2-state-bg-warning: var(--v2-yellow-100);
    --v2-state-fg-warning: var(--v2-yellow-800);
    --v2-state-border-warning: var(--v2-yellow-300);
    --v2-state-bg-danger: var(--v2-red-100);
    --v2-state-fg-danger: var(--v2-red-800);
    --v2-state-border-danger: var(--v2-red-300);
    --v2-state-bg-info: var(--v2-blue-100);
    --v2-state-fg-info: var(--v2-blue-800);
    --v2-state-border-info: var(--v2-blue-300);

    /* ── Project avatar (fixed; theme-independent) ── */
    --v2-avatar-fg: #ffffffff;
    --v2-avatar-bg-orange: #ee7330ff;
    --v2-avatar-border-orange: #d16427ff;
    --v2-avatar-bg-yellow: #e7af36ff;
    --v2-avatar-border-yellow: #cb9f34ff;
    --v2-avatar-bg-cyan: #0096b8ff;
    --v2-avatar-border-cyan: #007d9bff;
    --v2-avatar-bg-green: #2eaf5aff;
    --v2-avatar-border-green: #198b43ff;
    --v2-avatar-bg-red: #d92e3cff;
    --v2-avatar-border-red: #b82d35ff;
    --v2-avatar-bg-pink: #e4429eff;
    --v2-avatar-border-pink: #c83d8bff;
    --v2-avatar-bg-blue: #3250dfff;
    --v2-avatar-border-blue: #2c47c8ff;
    --v2-avatar-bg-purple: #623be2ff;
    --v2-avatar-border-purple: #5230c2ff;
    --v2-avatar-bg-gray: #5c5c5cff;
    --v2-avatar-border-gray: #3a3a3aff;

    /* ── Elevation ── */
    --v2-elevation-raised:
      0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
      0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-floating:
      0px 8px 16px 0px var(--v2-alpha-dark-4), 0px 4px 8px 0px var(--v2-alpha-dark-8),
      0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-overlay:
      0px 16px 32px 0px var(--v2-alpha-dark-4), 0px 8px 16px 0px var(--v2-alpha-dark-8),
      0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-button-neutral:
      0px 1px 1.5px 0px var(--v2-alpha-dark-10), 0px 0px 0px 0.5px var(--v2-alpha-dark-14),
      0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-button-contrast:
      0px 1px 1.5px 0px var(--v2-alpha-dark-20), 0px 0px 0px 0.5px var(--v2-grey-800),
      inset 0px 1px 2px 0px var(--v2-alpha-light-14), inset 0px -1px 2px 0px var(--v2-alpha-dark-6),
      0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-elements: 0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
    --v2-elevation-switch-off:
      inset 0px 1px 1px 0px var(--v2-alpha-dark-8), inset 0px 0.5px 0.5px 0px var(--v2-alpha-dark-8),
      inset 0px 0px 0px 0.5px var(--v2-alpha-dark-10);
    --v2-elevation-switch-on:
      inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10),
      inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20);

    /* ── Illustration ── */
    --v2-illustration-illustration-layer-01: var(--v2-grey-300);
    --v2-illustration-illustration-layer-02: var(--v2-grey-400);
    --v2-illustration-illustration-layer-03: var(--v2-grey-500);

    --font-family-text: "Inter", sans-serif;
    --v2-font-family-sans: "Inter", sans-serif;
  }

  /* OS preference fallback (no JS needed) */
  /*@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --v2-background-bg-base: var(--v2-grey-1000);
      --v2-background-bg-deep: var(--v2-grey-1100);
      --v2-background-bg-layer-01: var(--v2-grey-900);
      --v2-background-bg-layer-02: var(--v2-grey-800);
      --v2-background-bg-layer-03: var(--v2-grey-700);
      --v2-background-bg-inverse: var(--v2-grey-100);
      --v2-background-bg-contrast: var(--v2-grey-700);
      --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
      --v2-background-bg-accent: var(--v2-blue-600);

      --v2-text-text-base: var(--v2-grey-200);
      --v2-text-text-muted: var(--v2-grey-500);
      --v2-text-text-faint: var(--v2-grey-600);
      --v2-text-text-inverse: var(--v2-grey-1000);
      --v2-text-text-contrast: var(--v2-grey-100);
      --v2-text-text-accent: var(--v2-blue-400);
      --v2-text-text-accent-hover: var(--v2-blue-300);

      --v2-icon-icon-base: var(--v2-grey-400);
      --v2-icon-icon-muted: var(--v2-grey-600);
      --v2-icon-icon-inverse: var(--v2-grey-1000);
      --v2-icon-icon-contrast: var(--v2-grey-200);
      --v2-icon-icon-accent: var(--v2-blue-400);
      --v2-icon-icon-accent-hover: var(--v2-blue-300);

      --v2-border-border-muted: var(--v2-alpha-light-8);
      --v2-border-border-base: var(--v2-alpha-light-10);
      --v2-border-border-strong: var(--v2-alpha-light-20);
      --v2-border-border-inverse: var(--v2-grey-100);
      --v2-border-border-focus: var(--v2-blue-500);

      --v2-overlay-simple-overlay-hover: var(--v2-alpha-light-6);
      --v2-overlay-simple-overlay-pressed: var(--v2-alpha-light-10);
      --v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-dark-24);
      --v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-dark-40);
      --v2-overlay-simple-overlay-scrim: var(--v2-alpha-light-30);
      --v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
      --v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
      --v2-overlay-simple-tab-active-scrim: #24242400;
      --v2-overlay-simple-tab-hover-scrim: #3A3A3A00;
      --v2-overlay-simple-tab-scrim: #08080800;

      --v2-state-bg-success: var(--v2-green-1200);
      --v2-state-fg-success: var(--v2-green-500);
      --v2-state-border-success: var(--v2-green-900);
      --v2-state-bg-warning: var(--v2-yellow-1200);
      --v2-state-fg-warning: var(--v2-yellow-500);
      --v2-state-border-warning: var(--v2-yellow-900);
      --v2-state-bg-danger: var(--v2-red-1200);
      --v2-state-fg-danger: var(--v2-red-500);
      --v2-state-border-danger: var(--v2-red-900);
      --v2-state-bg-info: var(--v2-blue-1200);
      --v2-state-fg-info: var(--v2-blue-500);
      --v2-state-border-info: var(--v2-blue-900);

      --v2-elevation-raised:
        0px 2px 4px 0px var(--v2-alpha-dark-30),
        0px 1px 2px 0px var(--v2-alpha-dark-30),
        0px 0px 0px 0.5px var(--v2-alpha-light-16),
        0px -0.5px 0px 0px var(--v2-alpha-light-6);
      --v2-elevation-floating:
        0px 8px 16px 0px var(--v2-alpha-dark-30),
        0px 4px 8px 0px var(--v2-alpha-dark-30),
        0px 0px 0px 0.5px var(--v2-alpha-light-16),
        0px -0.5px 0px 0px var(--v2-alpha-light-6);
      --v2-elevation-overlay:
        0px 16px 32px 0px var(--v2-alpha-dark-30),
        0px 8px 16px 0px var(--v2-alpha-dark-30),
        0px 0px 0px 0.5px var(--v2-alpha-light-16),
        0px -0.5px 0px 0px var(--v2-alpha-light-6);
      --v2-elevation-button-neutral:
        0px 1px 2px 0px var(--v2-alpha-dark-40),
        0px 0px 0px 0.5px var(--v2-alpha-light-20),
        0px -0.5px 0px 0px var(--v2-alpha-light-10);
      --v2-elevation-button-contrast:
        0px 1px 2px 0px var(--v2-alpha-dark-40),
        0px 0px 0px 0.5px var(--v2-alpha-light-40),
        inset 0px 0px 0px 0px var(--v2-alpha-light-0),
        inset 0px 0px 0px 0px var(--v2-alpha-light-0),
        0px -0.5px 0px 0px var(--v2-alpha-light-30);
      --v2-elevation-elements:
        0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
      --v2-elevation-switch-off:
        inset 0px -0.5px 0px 0px var(--v2-alpha-light-10),
        inset 0px 0px 0px 0px var(--v2-alpha-light-0),
        inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);
      --v2-elevation-switch-on:
        inset 0px -0.5px 0px 0px var(--v2-alpha-light-10),
        inset 0px 0px 0px 0px var(--v2-alpha-light-0),
        inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);

      --v2-illustration-illustration-layer-01: var(--v2-grey-900);
      --v2-illustration-illustration-layer-02: var(--v2-grey-800);
      --v2-illustration-illustration-layer-03: var(--v2-grey-700);
    }
  }
*/
  /* Explicit light mode via data attribute (overrides OS dark preference) */
  [data-color-scheme="light"] {
    color-scheme: light;

    --v2-background-bg-base: var(--v2-grey-50);
    --v2-background-bg-deep: var(--v2-grey-100);
    --v2-background-bg-layer-01: var(--v2-grey-100);
    --v2-background-bg-layer-02: var(--v2-grey-200);
    --v2-background-bg-layer-03: var(--v2-grey-300);
    --v2-background-bg-layer-04: var(--v2-grey-400);
    --v2-background-bg-inverse: var(--v2-grey-1100);
    --v2-background-bg-contrast: var(--v2-grey-1000);
    --v2-background-bg-button-neutral: var(--v2-grey-50);
    --v2-background-bg-accent: var(--v2-blue-600);

    --v2-text-text-base: var(--v2-grey-1100);
    --v2-text-text-muted: var(--v2-grey-700);
    --v2-text-text-faint: var(--v2-grey-600);
    --v2-text-text-inverse: var(--v2-grey-50);
    --v2-text-text-contrast: var(--v2-grey-50);
    --v2-text-text-accent: var(--v2-blue-600);
    --v2-text-text-accent-hover: var(--v2-blue-700);

    --v2-icon-icon-base: var(--v2-grey-800);
    --v2-icon-icon-muted: var(--v2-grey-600);
    --v2-icon-icon-inverse: var(--v2-grey-50);
    --v2-icon-icon-contrast: var(--v2-grey-100);
    --v2-icon-icon-accent: var(--v2-blue-600);
    --v2-icon-icon-accent-hover: var(--v2-blue-700);

    --v2-border-border-muted: var(--v2-alpha-dark-8);
    --v2-border-border-base: var(--v2-alpha-dark-10);
    --v2-border-border-strong: var(--v2-alpha-dark-20);
    --v2-border-border-inverse: var(--v2-grey-1000);
    --v2-border-border-focus: var(--v2-blue-500);

    --v2-overlay-simple-overlay-hover: var(--v2-alpha-dark-4);
    --v2-overlay-simple-overlay-pressed: var(--v2-alpha-dark-8);
    --v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-light-12);
    --v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-light-24);
    --v2-overlay-simple-overlay-scrim: var(--v2-alpha-dark-40);
    --v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
    --v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
    --v2-overlay-simple-tab-active-scrim: #fafafa00;
    --v2-overlay-simple-tab-hover-scrim: #eeeeee00;
    --v2-overlay-simple-tab-scrim: #fafafa00;

    --v2-state-bg-success: var(--v2-green-100);
    --v2-state-fg-success: var(--v2-green-800);
    --v2-state-border-success: var(--v2-green-300);
    --v2-state-bg-warning: var(--v2-yellow-100);
    --v2-state-fg-warning: var(--v2-yellow-800);
    --v2-state-border-warning: var(--v2-yellow-300);
    --v2-state-bg-danger: var(--v2-red-100);
    --v2-state-fg-danger: var(--v2-red-800);
    --v2-state-border-danger: var(--v2-red-300);
    --v2-state-bg-info: var(--v2-blue-100);
    --v2-state-fg-info: var(--v2-blue-800);
    --v2-state-border-info: var(--v2-blue-300);

    --v2-elevation-raised:
      0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
      0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-floating:
      0px 8px 16px 0px var(--v2-alpha-dark-4), 0px 4px 8px 0px var(--v2-alpha-dark-8),
      0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-overlay:
      0px 16px 32px 0px var(--v2-alpha-dark-4), 0px 8px 16px 0px var(--v2-alpha-dark-8),
      0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-button-neutral:
      0px 1px 1.5px 0px var(--v2-alpha-dark-10), 0px 0px 0px 0.5px var(--v2-alpha-dark-14),
      0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-button-contrast:
      0px 1px 1.5px 0px var(--v2-alpha-dark-20), 0px 0px 0px 0.5px var(--v2-grey-800),
      inset 0px 1px 2px 0px var(--v2-alpha-light-14), inset 0px -1px 2px 0px var(--v2-alpha-dark-6),
      0px 0px 0px 0px var(--v2-alpha-dark-0);
    --v2-elevation-elements: 0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
    --v2-elevation-switch-off:
      inset 0px 1px 1px 0px var(--v2-alpha-dark-8), inset 0px 0.5px 0.5px 0px var(--v2-alpha-dark-8),
      inset 0px 0px 0px 0.5px var(--v2-alpha-dark-10);
    --v2-elevation-switch-on:
      inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10),
      inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20);

    --v2-illustration-illustration-layer-01: var(--v2-grey-300);
    --v2-illustration-illustration-layer-02: var(--v2-grey-400);
    --v2-illustration-illustration-layer-03: var(--v2-grey-500);

    --v2-avatar-fg: #ffffffff;
    --v2-avatar-bg-orange: #ee7330ff;
    --v2-avatar-border-orange: #d16427ff;
    --v2-avatar-bg-yellow: #e7af36ff;
    --v2-avatar-border-yellow: #cb9f34ff;
    --v2-avatar-bg-cyan: #0096b8ff;
    --v2-avatar-border-cyan: #007d9bff;
    --v2-avatar-bg-green: #2eaf5aff;
    --v2-avatar-border-green: #198b43ff;
    --v2-avatar-bg-red: #d92e3cff;
    --v2-avatar-border-red: #b82d35ff;
    --v2-avatar-bg-pink: #e4429eff;
    --v2-avatar-border-pink: #c83d8bff;
    --v2-avatar-bg-blue: #3250dfff;
    --v2-avatar-border-blue: #2c47c8ff;
    --v2-avatar-bg-purple: #623be2ff;
    --v2-avatar-border-purple: #5230c2ff;
    --v2-avatar-bg-gray: #5c5c5cff;
    --v2-avatar-border-gray: #3a3a3aff;
  }

  /* Explicit dark mode via data attribute (Storybook toggle, runtime JS) */
  [data-color-scheme="dark"] {
    color-scheme: dark;

    --v2-background-bg-base: var(--v2-grey-1100);
    --v2-background-bg-deep: var(--v2-grey-1200);
    --v2-background-bg-layer-01: var(--v2-grey-1000);
    --v2-background-bg-layer-02: var(--v2-grey-900);
    --v2-background-bg-layer-03: var(--v2-grey-800);
    --v2-background-bg-layer-04: var(--v2-grey-700);
    --v2-background-bg-inverse: var(--v2-grey-50);
    --v2-background-bg-contrast: var(--v2-grey-700);
    --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
    --v2-background-bg-accent: var(--v2-blue-600);

    --v2-text-text-base: var(--v2-grey-100);
    --v2-text-text-muted: var(--v2-grey-500);
    --v2-text-text-faint: var(--v2-grey-600);
    --v2-text-text-inverse: var(--v2-grey-1100);
    --v2-text-text-contrast: var(--v2-grey-50);
    --v2-text-text-accent: var(--v2-blue-400);
    --v2-text-text-accent-hover: var(--v2-blue-300);

    --v2-icon-icon-base: var(--v2-grey-400);
    --v2-icon-icon-muted: var(--v2-grey-600);
    --v2-icon-icon-inverse: var(--v2-grey-1100);
    --v2-icon-icon-contrast: var(--v2-grey-100);
    --v2-icon-icon-accent: var(--v2-blue-400);
    --v2-icon-icon-accent-hover: var(--v2-blue-300);

    --v2-border-border-muted: var(--v2-alpha-light-8);
    --v2-border-border-base: var(--v2-alpha-light-10);
    --v2-border-border-strong: var(--v2-alpha-light-20);
    --v2-border-border-inverse: var(--v2-grey-100);
    --v2-border-border-focus: var(--v2-blue-500);

    --v2-overlay-simple-overlay-hover: var(--v2-alpha-light-6);
    --v2-overlay-simple-overlay-pressed: var(--v2-alpha-light-10);
    --v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-dark-24);
    --v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-dark-40);
    --v2-overlay-simple-overlay-scrim: var(--v2-alpha-light-30);
    --v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
    --v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
    --v2-overlay-simple-tab-active-scrim: #24242400;
    --v2-overlay-simple-tab-hover-scrim: #3a3a3a00;
    --v2-overlay-simple-tab-scrim: #08080800;

    --v2-state-bg-success: var(--v2-green-1200);
    --v2-state-fg-success: var(--v2-green-500);
    --v2-state-border-success: var(--v2-green-900);
    --v2-state-bg-warning: var(--v2-yellow-1200);
    --v2-state-fg-warning: var(--v2-yellow-500);
    --v2-state-border-warning: var(--v2-yellow-900);
    --v2-state-bg-danger: var(--v2-red-1200);
    --v2-state-fg-danger: var(--v2-red-500);
    --v2-state-border-danger: var(--v2-red-900);
    --v2-state-bg-info: var(--v2-blue-1200);
    --v2-state-fg-info: var(--v2-blue-500);
    --v2-state-border-info: var(--v2-blue-900);

    --v2-avatar-fg: #ffffffff;
    --v2-avatar-bg-orange: #723d22ff;
    --v2-avatar-border-orange: #ff8648ff;
    --v2-avatar-bg-yellow: #68552bff;
    --v2-avatar-border-yellow: #e7af36ff;
    --v2-avatar-bg-cyan: #005a6eff;
    --v2-avatar-border-cyan: #0096b8ff;
    --v2-avatar-bg-green: #196130ff;
    --v2-avatar-border-green: #49c970ff;
    --v2-avatar-bg-red: #7a1f23ff;
    --v2-avatar-border-red: #d92e3cff;
    --v2-avatar-bg-pink: #8c2d61ff;
    --v2-avatar-border-pink: #e4429eff;
    --v2-avatar-bg-blue: #263fa9ff;
    --v2-avatar-border-blue: #7698fdff;
    --v2-avatar-bg-purple: #361f83ff;
    --v2-avatar-border-purple: #7152f4ff;
    --v2-avatar-bg-gray: #5c5c5cff;
    --v2-avatar-border-gray: #aeaeaeff;

    --v2-elevation-raised:
      0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30),
      0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);
    --v2-elevation-floating:
      0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 4px 8px 0px var(--v2-alpha-dark-30),
      0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);
    --v2-elevation-overlay:
      0px 16px 32px 0px var(--v2-alpha-dark-30), 0px 8px 16px 0px var(--v2-alpha-dark-30),
      0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);
    --v2-elevation-button-neutral:
      0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-20),
      0px -0.5px 0px 0px var(--v2-alpha-light-10);
    --v2-elevation-button-contrast:
      0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-40),
      inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0px var(--v2-alpha-light-0),
      0px -0.5px 0px 0px var(--v2-alpha-light-30);
    --v2-elevation-elements: 0px 0.5px 0.5px 0px var(--v2-alpha-dark-40);
    --v2-elevation-switch-off:
      inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0),
      inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);
    --v2-elevation-switch-on:
      inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0),
      inset 0px 0px 0px 0.5px var(--v2-alpha-light-16);

    --v2-illustration-illustration-layer-01: var(--v2-grey-900);
    --v2-illustration-illustration-layer-02: var(--v2-grey-800);
    --v2-illustration-illustration-layer-03: var(--v2-grey-700);
  }
}