/* Compatibility names for product layouts; all materials belong to the DS. */
:root,
:host {
  --color-bg-0: var(--reddb-color-background);
  --color-bg-1: var(--reddb-color-elevation-base-surface);
  --color-bg-2: var(--reddb-color-muted);
  --color-bg-3: var(--reddb-color-elevation-raised-surface);
  --color-fg-0: var(--reddb-color-foreground);
  --color-fg-1: var(--reddb-color-foreground);
  --color-fg-2: var(--reddb-color-ink-muted);
  --color-fg-3: var(--reddb-color-ink-muted);
  --color-line-1: var(--reddb-color-border-subtle);
  --color-line-2: var(--reddb-color-control-edge);
  --color-line-3: var(--reddb-color-border-strong);
  --color-accent: var(--reddb-color-primary);
  --color-ok: var(--reddb-color-feedback-success-foreground);
  --color-warn: var(--reddb-color-feedback-warning-foreground);
  --color-danger: var(--reddb-color-feedback-danger-foreground);
  --color-info: var(--reddb-color-feedback-info-foreground);
  --color-role-primary: var(--reddb-color-primary-text);
  --color-role-replica: var(--reddb-color-feedback-info-foreground);
  --color-role-embedded: var(--reddb-color-feedback-success-foreground);
  --color-accent-soft: color-mix(
    in srgb,
    var(--reddb-color-primary) 12%,
    transparent
  );
  --color-accent-glow: color-mix(
    in srgb,
    var(--reddb-color-primary) 30%,
    transparent
  );
  --color-ambient-glow: color-mix(
    in srgb,
    var(--reddb-color-primary) 4%,
    transparent
  );
  --font-sans: var(--reddb-font-family-sans);
  --font-mono: var(--reddb-font-family-mono);
  --ease-out: var(--reddb-easing-entrance);
  --ease-snap: var(--reddb-easing-entrance);
  --shadow-md: var(--reddb-shadow-elevation-base);
  --shadow-lg: var(--reddb-shadow-elevation-raised);
  --radius-sm: var(--reddb-radius-sm);
  --radius-md: var(--reddb-radius-md);
  --radius-lg: var(--reddb-radius-lg);
  --radius-xl: var(--reddb-radius-xl);
  --bg-0: var(--color-bg-0);
  --bg-1: var(--color-bg-1);
  --bg-2: var(--color-bg-2);
  --bg-3: var(--color-bg-3);
  --fg-0: var(--color-fg-0);
  --fg-1: var(--color-fg-1);
  --fg-2: var(--color-fg-2);
  --fg-3: var(--color-fg-3);
  --line-1: var(--color-line-1);
  --line-2: var(--color-line-2);
  --line-3: var(--color-line-3);
  --accent: var(--color-accent);
  --ok: var(--color-ok);
  --warn: var(--color-warn);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --role-primary: var(--color-role-primary);
  --role-replica: var(--color-role-replica);
  --role-embedded: var(--color-role-embedded);
  --accent-soft: var(--color-accent-soft);
  --accent-glow: var(--color-accent-glow);
}