/*
 * PORTL semantic tokens.
 *
 * Light mode is the seller portal's palette, ruling R2 of
 * obo-docs specs/obo-design-system-consolidation-spec.md (Sherman, 10/14/2026).
 */
:root {
  --colors-background-bg-primary: var(--colors-marketing-grey-50);
  --colors-background-bg-active: var(--colors-marketing-grey-200);
  --colors-background-bg-brand-solid: var(--colors-brand-500);
  --colors-background-bg-brand-solid-hover: var(--colors-tertiary-orange);
  --colors-background-bg-disabled: var(--colors-marketing-grey-300);
  --colors-background-bg-secondary: var(--colors-pale-blue);
  --colors-background-bg-tertiary: var(--colors-marketing-grey-500);
  --colors-foreground-fg-primary: var(--colors-text-strong-marketing);
  --colors-foreground-fg-secondary: var(--colors-text-heading-marketing);
  --colors-foreground-fg-tertiary: var(--colors-text-muted-marketing);
  --colors-foreground-fg-brand-primary: var(--colors-navy-600);
  --colors-foreground-fg-error-primary: var(--colors-error-500);
  --colors-foreground-fg-warning-primary: var(--colors-warning-600);
  --colors-foreground-fg-success-primary: var(--colors-success-500);
  --colors-foreground-fg-white: var(--colors-base-white);
  --colors-border-border-primary: var(--colors-marketing-grey-500);
  /* Dividers and tab rules: navy-25, a quiet blue-gray, not soft aqua
     (Sherman, 10/20/2026). */
  --colors-border-border-secondary: var(--colors-navy-25);
  --colors-border-border-tertiary: var(--colors-marketing-grey-300);
  --colors-border-border-brand: var(--colors-brand-500);
  --colors-border-border-disabled: var(--colors-gray-300);
  --colors-border-border-error: var(--colors-error-500);
  --colors-text-text-primary: var(--colors-text-heading-marketing);
  --colors-text-text-secondary: var(--colors-navy-500);
  --colors-text-text-tertiary: var(--colors-text-muted-marketing);
  --colors-text-text-brand-primary: var(--colors-text-heading-marketing);
  /* DA-new intentionally matches muted secondary text here; disabled controls
     still rely on component opacity and cursor affordances for state. */
  --colors-text-text-disabled: var(--colors-text-muted-marketing);
  --colors-text-text-error-primary: var(--colors-error-500);
  --colors-text-text-success-primary: var(--colors-success-500);
  --background: var(--colors-background-bg-primary);
  --foreground: var(--colors-text-text-primary);
  --surface: var(--colors-background-bg-primary);
  --surface-foreground: var(--colors-text-text-primary);
  --accent: var(--colors-background-bg-brand-solid);
  --accent-foreground: var(--colors-foreground-fg-white);
  --danger: var(--colors-error-500);
  --danger-foreground: var(--colors-foreground-fg-white);
  --warning: var(--colors-warning-500);
  --warning-foreground: var(--colors-gray-950);
  --success: var(--colors-success-500);
  --success-foreground: var(--colors-gray-950);
  --border: var(--colors-border-border-primary);
  --input: var(--colors-border-border-primary);
  --ring: var(--colors-foreground-fg-brand-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.default):not([data-theme="light"]):not(
      [data-theme="default"]
    ) {
    --colors-background-bg-active: var(--colors-gray-dark-800);
    --colors-background-bg-brand-solid: var(--colors-brand-600);
    --colors-background-bg-brand-solid-hover: var(--colors-brand-500);
    --colors-background-bg-disabled: var(--colors-gray-dark-800);
    --colors-background-bg-primary: var(--colors-gray-dark-950);
    --colors-background-bg-secondary: var(--colors-gray-dark-900);
    --colors-background-bg-tertiary: var(--colors-gray-dark-800);
    --colors-foreground-fg-primary: var(--colors-base-white);
    --colors-foreground-fg-secondary: var(--colors-gray-dark-300);
    --colors-foreground-fg-tertiary: var(--colors-gray-dark-400);
    --colors-foreground-fg-brand-primary: var(--colors-brand-500);
    --colors-foreground-fg-error-primary: var(--colors-error-500);
    --colors-foreground-fg-warning-primary: var(--colors-warning-500);
    --colors-foreground-fg-success-primary: var(--colors-success-500);
    --colors-border-border-primary: var(--colors-gray-dark-600);
    --colors-border-border-secondary: var(--colors-gray-dark-700);
    --colors-border-border-tertiary: var(--colors-gray-dark-800);
    --colors-border-border-brand: var(--colors-brand-400);
    --colors-border-border-disabled: var(--colors-gray-dark-700);
    --colors-border-border-error: var(--colors-error-400);
    --colors-text-text-primary: var(--colors-gray-dark-50);
    --colors-text-text-secondary: var(--colors-gray-dark-300);
    --colors-text-text-tertiary: var(--colors-gray-dark-400);
    --colors-text-text-brand-primary: var(--colors-gray-dark-50);
    --colors-text-text-disabled: var(--colors-gray-dark-500);
    --colors-text-text-error-primary: var(--colors-error-400);
    --colors-text-text-success-primary: var(--colors-success-400);
    --background: var(--colors-background-bg-primary);
    --foreground: var(--colors-text-text-primary);
    --surface: var(--colors-background-bg-primary);
    --surface-foreground: var(--colors-text-text-primary);
    --accent: var(--colors-background-bg-brand-solid);
    --accent-foreground: var(--colors-foreground-fg-white);
    --danger: var(--colors-error-500);
    --danger-foreground: var(--colors-foreground-fg-white);
    --warning: var(--colors-warning-500);
    --warning-foreground: var(--colors-gray-dark-950);
    --success: var(--colors-success-500);
    --success-foreground: var(--colors-gray-dark-950);
    --border: var(--colors-border-border-primary);
    --input: var(--colors-border-border-primary);
    --ring: var(--colors-foreground-fg-brand-primary);
  }
}