/* Semantic color roles. Always consume these in components, not the raw scales. */
:root{
/* Surfaces */
--surface-page:var(--grey-0);--surface-subtle:var(--grey-50);--surface-muted:var(--grey-100);--surface-card:var(--grey-0);--surface-card-subtle:var(--grey-50);--surface-brand:var(--blue-500);--surface-brand-strong:var(--blue-800);--surface-brand-subtle:var(--blue-50);--surface-accent:var(--orange-400);--surface-accent-subtle:var(--orange-50);--surface-inverse:var(--grey-950);--surface-overlay:var(--alpha-ink-56);
/* Text */
--text-heading:var(--blue-800);--text-body:var(--grey-800);--text-muted:var(--grey-600);--text-subtle:var(--grey-500);--text-brand:var(--blue-600);--text-accent:var(--orange-700);--text-on-brand:var(--grey-0);--text-on-accent:var(--grey-950);--text-on-inverse:var(--grey-0);--text-on-inverse-muted:var(--grey-300);--text-link:var(--blue-600);--text-link-hover:var(--blue-800);--text-disabled:var(--grey-400);
/* Borders */
--border-subtle:var(--grey-200);--border-default:var(--grey-300);--border-strong:var(--grey-400);--border-brand:var(--blue-500);--border-accent:var(--orange-400);--border-inverse:var(--alpha-white-16);--border-focus:var(--blue-500);
/* Interaction — primary (blue) */
--action-primary-bg:var(--blue-500);--action-primary-bg-hover:var(--blue-600);--action-primary-bg-active:var(--blue-700);--action-primary-fg:var(--grey-0);
/* Interaction — accent / conversion (orange, use sparingly: 1 per view) */
--action-accent-bg:var(--orange-400);--action-accent-bg-hover:var(--orange-500);--action-accent-bg-active:var(--orange-600);--action-accent-fg:var(--grey-950);
/* Interaction — secondary (outline) & text */
--action-secondary-border:var(--blue-500);--action-secondary-fg:var(--blue-600);--action-secondary-bg-hover:var(--blue-50);--action-secondary-bg-active:var(--blue-100);
--action-quiet-fg:var(--blue-600);--action-quiet-bg-hover:var(--blue-50);
--action-disabled-bg:var(--grey-200);--action-disabled-fg:var(--grey-400);--action-disabled-border:var(--grey-200);
/* Focus ring */
--focus-ring:0 0 0 3px var(--alpha-blue-16);--focus-ring-outline:2px solid var(--blue-500);--focus-ring-offset:2px;
/* Status */
--success-bg:var(--green-50);--success-border:var(--green-500);--success-fg:var(--green-700);--success-icon:var(--green-600);
--warning-bg:var(--amber-50);--warning-border:var(--amber-500);--warning-fg:var(--amber-700);--warning-icon:var(--amber-600);
--error-bg:var(--red-50);--error-border:var(--red-500);--error-fg:var(--red-700);--error-icon:var(--red-600);
--info-bg:var(--blue-50);--info-border:var(--blue-500);--info-fg:var(--blue-700);--info-icon:var(--blue-600);
/* Fields */
--field-bg:var(--grey-0);--field-bg-disabled:var(--grey-100);--field-border:var(--grey-300);--field-border-hover:var(--grey-400);--field-border-focus:var(--blue-500);--field-placeholder:var(--grey-400);--field-label:var(--grey-800);--field-help:var(--grey-600)
}