/* Four brand colors from the DIZLOCK branding guide (p.5). Everything else is a derived neutral. */
:root{
/* base — exact guide values */
--black:#000000;
--blue:#163ae1;
--gray:#a6a8aa;
--white:#ffffff;

/* derived neutral ramp (tints/shades of --gray and --black; not in the guide, used for UI chrome) */
--gray-100:#f4f4f5;
--gray-200:#e6e7e8;
--gray-300:#d2d3d5;
--gray-400:#a6a8aa;
--gray-500:#85878a;
--gray-600:#5c5e61;
--gray-700:#3a3b3d;
--gray-800:#212223;
--gray-900:#131414;

/* derived accent states */
--blue-hover:#0f2cb5;
--blue-press:#0a1f88;
--blue-tint:#e8ecfd;

/* semantic — surfaces */
--surface-page:var(--white);
--surface-page-inverse:var(--black);
--surface-card:var(--white);
--surface-card-inverse:var(--gray-900);
--surface-subtle:var(--gray-100);
--surface-accent:var(--blue);
--surface-accent-subtle:var(--blue-tint);

/* semantic — text */
--text-primary:var(--black);
--text-secondary:var(--gray-600);
--text-muted:var(--gray-400);
--text-inverse:var(--white);
--text-inverse-muted:var(--gray-400);
--text-accent:var(--blue);
--text-link:var(--blue);
--text-link-hover:var(--blue-hover);

/* semantic — lines */
--border:var(--gray-200);
--border-strong:var(--black);
--border-inverse:var(--gray-800);
--rule:var(--gray-300);
--focus-ring:var(--blue);
}