:root{
/* Base — identidade */
--ma-yellow:#fcee21;
--ma-gray:#333333;
--ma-white:#ffffff;

/* Neutros derivados (apoio, nunca protagonistas) */
--ma-gray-900:#1c1c1c;
--ma-gray-700:#4a4a4a;
--ma-gray-500:#767676;
--ma-gray-300:#c9c9c9;
--ma-gray-150:#e6e6e4;
--ma-gray-050:#f4f4f2;

/* Amarelo — variações restritas a estados */
--ma-yellow-press:#e6d81c;
--ma-yellow-tint:#fefbd0;

/* Semânticos — superfícies */
--surface-page:var(--ma-white);
--surface-alt:var(--ma-gray-050);
--surface-card:var(--ma-white);
--surface-inverse:var(--ma-gray);
--surface-inverse-deep:var(--ma-gray-900);
--surface-accent:var(--ma-yellow);

/* Semânticos — texto */
--text-strong:var(--ma-gray);
--text-body:var(--ma-gray);
--text-muted:var(--ma-gray-500);
--text-on-inverse:var(--ma-white);
--text-on-inverse-muted:var(--ma-gray-300);
--text-on-accent:var(--ma-gray);
--text-accent-on-inverse:var(--ma-yellow);
--text-link:var(--ma-gray);
--text-link-hover:var(--ma-gray-700);

/* Semânticos — traços e foco */
--border-hairline:var(--ma-gray-150);
--border-strong:var(--ma-gray);
--border-on-inverse:#565656;
--focus-ring:var(--ma-gray);
--focus-ring-on-inverse:var(--ma-yellow);
--detail-accent:var(--ma-yellow);

/* Estados de feedback (herdam a paleta, sem cores novas) */
--state-info-bg:var(--ma-gray-050);
--state-info-fg:var(--ma-gray);
--state-attention-bg:var(--ma-yellow-tint);
--state-attention-fg:var(--ma-gray);
}