/*
 * Theme "neutral" (contract W12.6, decision U-1 default (a)).
 *
 * A theme file sets tokens only (and color-scheme):
 *   light: :root[data-theme-set="<name>"]
 *   dark:  @media (prefers-color-scheme: dark) { :root[data-theme-set="<name>"]:not([data-theme="light"]) }
 *          and :root[data-theme-set="<name>"][data-theme="dark"]  - both blocks identical (checked by a test)
 *
 * Light "neutral" is the default of tokens.css, so its light block only names the colour scheme. A Momentum
 * theme (U-1 (b) or (c)) is another file of this form that sets the primitives and semantics of its own.
 */

:root[data-theme-set="neutral"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme-set="neutral"]:not([data-theme="light"]) {
    color-scheme: dark;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 14px 24px -6px rgb(0 0 0 / 0.6), 0 4px 8px -4px rgb(0 0 0 / 0.35);

    --color-text-primary: var(--gray-50);
    --color-text-secondary: var(--gray-200);
    --color-text-tertiary: var(--gray-300);
    --color-text-disabled: var(--gray-500);
    --color-text-placeholder: var(--gray-400);
    --color-text-white: #ffffff;
    --color-text-error: var(--error-300);
    --color-text-warning: var(--warning-300);
    --color-text-success: var(--success-300);
    --color-text-brand-primary: var(--brand-300);

    --color-bg-primary: var(--gray-900);
    --color-bg-secondary: var(--gray-950);
    --color-bg-tertiary: var(--gray-800);
    --color-bg-active: var(--brand-950);
    --color-bg-disabled: var(--gray-800);
    --color-bg-overlay: rgb(0 0 0 / 0.7);
    --color-bg-brand-subtle: var(--brand-950);
    --color-bg-error-subtle: var(--error-950);
    --color-bg-warning-subtle: var(--warning-950);
    --color-bg-success-subtle: var(--success-950);

    --color-border-primary: var(--gray-600);
    --color-border-secondary: var(--gray-700);
    --color-border-error: var(--error-400);
    --color-border-brand: var(--brand-400);

    --color-fg-primary: var(--gray-50);
    --color-fg-secondary: var(--gray-300);
    --color-fg-brand-primary: var(--brand-300);
    --color-fg-error-primary: var(--error-400);
    --color-fg-warning-primary: var(--warning-400);
    --color-fg-success-primary: var(--success-400);

    --button-primary-bg: var(--brand-600);
    --button-primary-bg-hover: var(--brand-500);
    --button-primary-fg: var(--color-text-white);
    --button-primary-border: var(--brand-500);
    --button-secondary-bg: var(--gray-800);
    --button-secondary-bg-hover: var(--gray-700);
    --button-secondary-fg: var(--gray-50);
    --button-secondary-border: var(--gray-600);
    --button-error-bg: var(--error-600);
    --button-error-bg-hover: var(--error-500);
    --button-error-fg: var(--color-text-white);
    --button-error-border: var(--error-500);

    --input-bg: var(--gray-950);
    --input-border: var(--gray-500);
    --input-border-hover: var(--gray-400);
    --input-border-focus: var(--brand-300);
    --input-text: var(--gray-50);
    --input-placeholder: var(--gray-400);
    --input-ring-focus: var(--ring-brand);
    --input-disabled-bg: var(--gray-800);

    --ring-brand: 0 0 0 3px rgb(99 179 195 / 0.45);
    --ring-error: 0 0 0 3px rgb(234 106 95 / 0.45);

    --badge-gray-bg: var(--gray-800);
    --badge-gray-fg: var(--gray-100);
    --badge-gray-border: var(--gray-600);
    --badge-brand-bg: var(--brand-950);
    --badge-brand-fg: var(--brand-200);
    --badge-brand-border: var(--brand-800);
    --badge-success-bg: var(--success-950);
    --badge-success-fg: var(--success-200);
    --badge-success-border: var(--success-800);
    --badge-warning-bg: var(--warning-950);
    --badge-warning-fg: var(--warning-200);
    --badge-warning-border: var(--warning-800);
    --badge-error-bg: var(--error-950);
    --badge-error-fg: var(--error-200);
    --badge-error-border: var(--error-800);

    --indicator-online: var(--success-400);
    --indicator-offline: var(--gray-500);
  }
}

:root[data-theme-set="neutral"][data-theme="dark"] {
  color-scheme: dark;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 14px 24px -6px rgb(0 0 0 / 0.6), 0 4px 8px -4px rgb(0 0 0 / 0.35);

  --color-text-primary: var(--gray-50);
  --color-text-secondary: var(--gray-200);
  --color-text-tertiary: var(--gray-300);
  --color-text-disabled: var(--gray-500);
  --color-text-placeholder: var(--gray-400);
  --color-text-white: #ffffff;
  --color-text-error: var(--error-300);
  --color-text-warning: var(--warning-300);
  --color-text-success: var(--success-300);
  --color-text-brand-primary: var(--brand-300);

  --color-bg-primary: var(--gray-900);
  --color-bg-secondary: var(--gray-950);
  --color-bg-tertiary: var(--gray-800);
  --color-bg-active: var(--brand-950);
  --color-bg-disabled: var(--gray-800);
  --color-bg-overlay: rgb(0 0 0 / 0.7);
  --color-bg-brand-subtle: var(--brand-950);
  --color-bg-error-subtle: var(--error-950);
  --color-bg-warning-subtle: var(--warning-950);
  --color-bg-success-subtle: var(--success-950);

  --color-border-primary: var(--gray-600);
  --color-border-secondary: var(--gray-700);
  --color-border-error: var(--error-400);
  --color-border-brand: var(--brand-400);

  --color-fg-primary: var(--gray-50);
  --color-fg-secondary: var(--gray-300);
  --color-fg-brand-primary: var(--brand-300);
  --color-fg-error-primary: var(--error-400);
  --color-fg-warning-primary: var(--warning-400);
  --color-fg-success-primary: var(--success-400);

  --button-primary-bg: var(--brand-600);
  --button-primary-bg-hover: var(--brand-500);
  --button-primary-fg: var(--color-text-white);
  --button-primary-border: var(--brand-500);
  --button-secondary-bg: var(--gray-800);
  --button-secondary-bg-hover: var(--gray-700);
  --button-secondary-fg: var(--gray-50);
  --button-secondary-border: var(--gray-600);
  --button-error-bg: var(--error-600);
  --button-error-bg-hover: var(--error-500);
  --button-error-fg: var(--color-text-white);
  --button-error-border: var(--error-500);

  --input-bg: var(--gray-950);
  --input-border: var(--gray-500);
  --input-border-hover: var(--gray-400);
  --input-border-focus: var(--brand-300);
  --input-text: var(--gray-50);
  --input-placeholder: var(--gray-400);
  --input-ring-focus: var(--ring-brand);
  --input-disabled-bg: var(--gray-800);

  --ring-brand: 0 0 0 3px rgb(99 179 195 / 0.45);
  --ring-error: 0 0 0 3px rgb(234 106 95 / 0.45);

  --badge-gray-bg: var(--gray-800);
  --badge-gray-fg: var(--gray-100);
  --badge-gray-border: var(--gray-600);
  --badge-brand-bg: var(--brand-950);
  --badge-brand-fg: var(--brand-200);
  --badge-brand-border: var(--brand-800);
  --badge-success-bg: var(--success-950);
  --badge-success-fg: var(--success-200);
  --badge-success-border: var(--success-800);
  --badge-warning-bg: var(--warning-950);
  --badge-warning-fg: var(--warning-200);
  --badge-warning-border: var(--warning-800);
  --badge-error-bg: var(--error-950);
  --badge-error-fg: var(--error-200);
  --badge-error-border: var(--error-800);

  --indicator-online: var(--success-400);
  --indicator-offline: var(--gray-500);
}
