/* Carbon v11 theme tokens — packages/themes/src/white.ts (light) and g100.ts (dark).
   Default :root is the White theme. Apply data-carbon-theme="g100" to any
   container for the dark theme. */
:root,
[data-carbon-theme='white'] {
  color-scheme: light;

  /* Background */
  --background: var(--white);
  --background-inverse: var(--gray-80);
  --background-brand: var(--blue-60);
  --background-active: rgba(141, 141, 141, 0.5);
  --background-hover: rgba(141, 141, 141, 0.12);
  --background-selected: rgba(141, 141, 141, 0.2);
  --background-selected-hover: rgba(141, 141, 141, 0.32);
  --background-inverse-hover: #474747;

  /* Layer */
  --layer-01: var(--gray-10);
  --layer-02: var(--white);
  --layer-03: var(--gray-10);
  --layer-hover-01: var(--gray-10-hover);
  --layer-hover-02: var(--white-hover);
  --layer-hover-03: var(--gray-10-hover);
  --layer-active-01: var(--gray-30);
  --layer-selected-01: var(--gray-20);
  --layer-selected-hover-01: var(--gray-20-hover);
  --layer-selected-inverse: var(--gray-100);
  --layer-accent-01: var(--gray-20);
  --layer-accent-hover-01: var(--gray-20-hover);
  --layer-accent-active-01: var(--gray-40);

  /* Field */
  --field-01: var(--gray-10);
  --field-02: var(--white);
  --field-hover-01: var(--gray-10-hover);
  --field-hover-02: var(--white-hover);

  /* Border */
  --border-subtle-00: var(--gray-20);
  --border-subtle-01: var(--gray-30);
  --border-strong-01: var(--gray-50);
  --border-tile-01: var(--gray-30);
  --border-inverse: var(--gray-100);
  --border-interactive: var(--blue-60);
  --border-disabled: var(--gray-30);

  /* Text */
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-70);
  --text-placeholder: rgba(22, 22, 22, 0.4);
  --text-helper: var(--gray-60);
  --text-error: var(--red-60);
  --text-inverse: var(--white);
  --text-on-color: var(--white);
  --text-on-color-disabled: var(--gray-50);
  --text-disabled: rgba(22, 22, 22, 0.25);

  /* Link */
  --link-primary: var(--blue-60);
  --link-primary-hover: var(--blue-70);
  --link-secondary: var(--blue-70);
  --link-inverse: var(--blue-40);
  --link-visited: var(--purple-60);

  /* Icon */
  --icon-primary: var(--gray-100);
  --icon-secondary: var(--gray-70);
  --icon-inverse: var(--white);
  --icon-on-color: var(--white);
  --icon-disabled: rgba(22, 22, 22, 0.25);
  --icon-interactive: var(--blue-60);

  /* Support */
  --support-error: var(--red-60);
  --support-success: var(--green-50);
  --support-warning: var(--yellow-30);
  --support-info: var(--blue-70);
  --support-caution-major: var(--orange-40);

  /* Focus */
  --focus: var(--blue-60);
  --focus-inset: var(--white);
  --focus-inverse: var(--white);

  /* Misc */
  --interactive: var(--blue-60);
  --highlight: var(--blue-20);
  --overlay: rgba(0, 0, 0, 0.6);
  --toggle-off: var(--gray-50);
  --shadow: rgba(0, 0, 0, 0.3);
  --skeleton-background: var(--white-hover);
  --skeleton-element: var(--gray-30);
}

[data-carbon-theme='g100'] {
  color-scheme: dark;

  --background: var(--gray-100);
  --background-inverse: var(--gray-10);
  --background-brand: var(--blue-60);
  --background-active: rgba(141, 141, 141, 0.4);
  --background-hover: rgba(141, 141, 141, 0.16);
  --background-selected: rgba(141, 141, 141, 0.24);
  --background-selected-hover: rgba(141, 141, 141, 0.32);
  --background-inverse-hover: var(--gray-10-hover);

  --layer-01: var(--gray-90);
  --layer-02: var(--gray-80);
  --layer-03: var(--gray-70);
  --layer-hover-01: var(--gray-90-hover);
  --layer-hover-02: var(--gray-80-hover);
  --layer-hover-03: var(--gray-70-hover);
  --layer-active-01: var(--gray-70);
  --layer-selected-01: var(--gray-80);
  --layer-selected-hover-01: var(--gray-80-hover);
  --layer-selected-inverse: var(--gray-10);
  --layer-accent-01: var(--gray-80);
  --layer-accent-hover-01: var(--gray-80-hover);
  --layer-accent-active-01: var(--gray-60);

  --field-01: var(--gray-90);
  --field-02: var(--gray-80);
  --field-hover-01: var(--gray-90-hover);
  --field-hover-02: var(--gray-80-hover);

  --border-subtle-00: var(--gray-80);
  --border-subtle-01: var(--gray-70);
  --border-strong-01: var(--gray-60);
  --border-tile-01: var(--gray-70);
  --border-inverse: var(--gray-10);
  --border-interactive: var(--blue-50);
  --border-disabled: rgba(141, 141, 141, 0.5);

  --text-primary: var(--gray-10);
  --text-secondary: var(--gray-30);
  --text-placeholder: rgba(244, 244, 244, 0.4);
  --text-helper: var(--gray-40);
  --text-error: var(--red-40);
  --text-inverse: var(--gray-100);
  --text-on-color: var(--white);
  --text-on-color-disabled: rgba(255, 255, 255, 0.25);
  --text-disabled: rgba(244, 244, 244, 0.25);

  --link-primary: var(--blue-40);
  --link-primary-hover: var(--blue-30);
  --link-secondary: var(--blue-30);
  --link-inverse: var(--blue-60);
  --link-visited: var(--purple-40);

  --icon-primary: var(--gray-10);
  --icon-secondary: var(--gray-30);
  --icon-inverse: var(--gray-100);
  --icon-on-color: var(--white);
  --icon-disabled: rgba(244, 244, 244, 0.25);
  --icon-interactive: var(--white);

  --support-error: var(--red-50);
  --support-success: var(--green-40);
  --support-warning: var(--yellow-30);
  --support-info: var(--blue-50);
  --support-caution-major: var(--orange-40);

  --focus: var(--white);
  --focus-inset: var(--gray-100);
  --focus-inverse: var(--blue-60);

  --interactive: var(--blue-50);
  --highlight: var(--blue-90);
  --overlay: rgba(0, 0, 0, 0.6);
  --toggle-off: var(--gray-60);
  --shadow: rgba(0, 0, 0, 0.8);
  --skeleton-background: #292929;
  --skeleton-element: var(--gray-80);
}