/**
 * Compatibility aliases for page styles that predate the shared token system.
 *
 * New work should use the --color-* tokens defined in design-system.css.
 */
:root {
    --color-accent-strong: var(--color-secondary);
    --color-accent: var(--color-primary);
    --color-accent-600: var(--color-primary);
    --color-accent-500: var(--color-primary);
    --color-accent-400: var(--color-primary-light);
    --color-accent-300: var(--color-bg-primary);
    --color-accent-soft: var(--color-secondary-bg);
    --color-teal-500: var(--color-primary);
    --color-teal-400: var(--color-bg-primary);
    --color-lilac-500: var(--color-nostr);
    --color-lilac-400: var(--color-nostr);

    --primary-color: var(--color-primary);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --border-color: var(--color-border);
    --card-bg: var(--color-bg-light);
    --hover-bg: var(--color-bg-primary);
    --placeholder-bg: var(--color-bg-muted);
    --surface-1: var(--color-bg-light);
    --surface-2: var(--color-bg-primary);
    --surface: var(--color-bg-light);
    --surface-dark: var(--color-bg-primary);
    --background: var(--color-bg);
    --text-1: var(--color-text);
    --text-2: var(--color-text-muted);
    --primary: var(--color-primary);
    --hover: var(--color-bg-primary);
    --code-bg: var(--color-bg-muted);
    --gutter: var(--spacing-4);
}