:root{
/* ---- Brand palette ---- */
--color-primary:#EE0033;   /* viettel RED, PANTONE 185 */
--color-ink:#000000;       /* Deep black, PANTONE BLACK6 */
--color-charcoal:#44494D;  /* Charcoal grey, PANTONE 425 */
--color-grey:#B5B4B4;      /* Mid grey, PANTONE 421 */
--color-grey-light:#F2F2F2;
--color-canvas:#FFFFFF;

/* ---- Interaction tints/shades — 2 adjacent steps only.
   The ONLY case in which adjusting the tonal value of a brand colour is permitted. ---- */
--color-primary-shade:#C4132B;   /* :hover / :active of red on LIGHT surfaces */
--color-primary-tint:#EF404A;    /* DARK SURFACES ONLY. On light surfaces it differs from
                                    base by 1.175 (imperceptible) and drops white text 4.48->3.82 */
--color-ink-tint:#241D1E;
--color-charcoal-shade:#241D1E;
--color-charcoal-tint:#949595;
--color-grey-shade:#949595;
--color-grey-tint:#C8C8C7;
--color-grey-light-shade:#DDDDDD; /* :hover for #F2F2F2 surfaces */
--color-grey-light-tint:#F7F7F7;

/* ---- Semantic aliases ---- */
--surface-page:var(--color-canvas);
--surface-muted:var(--color-grey-light);
--surface-muted-hover:var(--color-grey-light-shade);
--surface-inverse:var(--color-ink);
--surface-accent:var(--color-primary);
--text-body:var(--color-ink);
--text-muted:var(--color-charcoal);
--text-accent:var(--color-primary);
--text-on-accent:var(--color-canvas);
--text-on-inverse:var(--color-canvas);
--border-hairline:var(--color-grey-light-shade);
--border-strong:var(--color-charcoal);
--border-accent:var(--color-primary);
--focus-ring:var(--color-ink);
--focus-ring-on-dark:var(--color-canvas);
--link:var(--color-primary);
--link-hover:var(--color-primary-shade);

/* ---- Alert frame — SHARED by all 4 roles ---- */
--alert-surface:#F2F2F2;
--alert-text:#000000;
--alert-bar-error:#EE0033;
--alert-bar-other:#44494D;

/* ---- Role colours — MAY ONLY FILL <svg>. Never background / border / text colour. ---- */
--icon-error:#EE0033;
--icon-success:#21832F;
--icon-warning:#8A6F23;
--icon-info:#4864D1;

/* ---- Chart palette. NOTE: chart red differs from brand red. Charts + icons only. ---- */
--color-chart-red:#ED0033;
}