/*
 * Design tokens do SMS Facil.
 * Compartilhados pelo painel interno (internal.css) e pelo site externo (external.css).
 * Carregado antes de ambos em App.razor.
 */
:root {
    /* marca */
    --sms-primary: #3569b9;
    --sms-primary-dark: #285596;
    --sms-primary-soft: #eaf1fb;
    --sms-navy: #0b1f3a;
    --sms-green: #5b941d;
    --sms-green-dark: #487814;
    --sms-green-soft: #eef7e5;
    --sms-accent-green: #8fca4a;

    /* neutros */
    --sms-background: #f5f7fb;
    --sms-surface: #ffffff;
    --sms-border: #e3e8f0;
    --sms-hairline: #edf0f4;
    --sms-tint: #fafbfc;
    --sms-text: #172033;
    --sms-muted: #667085;

    /* superficies auxiliares */
    --sms-callout-bg: #f4f8fd;
    --sms-callout-border: #d8e3f3;

    /* Amostrados do logo.png. O visor do celular e ciano-azulado, nao verde:
       isso da um quarto matiz, que e o que tira o site do binario azul/verde. */
    --sms-amber: #f7d355;        /* arco do logo; so grafico, nunca texto */
    --sms-amber-soft: #fdf2cf;
    --sms-amber-ink: #8a5a08;    /* unica forma legivel do ambar sobre claro */
    --sms-lcd: #a3cfdc;          /* vidro do visor */
    --sms-lcd-soft: #c8e2ea;
    --sms-lcd-ink: #0e3945;
    --sms-periwinkle: #becbe6;   /* corpo do celular */
    --sms-blue-700: #24497f;     /* entre primary-dark e navy */
    --sms-paper: #eef3f9;        /* azulado; alterna com o branco */
    --sms-wire: #cdd9e8;         /* linha de transmissao sobre claro */

    /* tipografia */
    --sms-font: "Inter", "Roboto", sans-serif;
    --sms-font-display: "Space Grotesk", "Inter", sans-serif;
    --sms-font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

    /* forma */
    --sms-radius-lg: 1rem;
    --sms-radius-md: 0.875rem;
    --sms-radius-sm: 0.75rem;
    --sms-radius-btn: 0.625rem;
    --sms-shadow-surface: 0 8px 28px rgba(11, 31, 58, 0.055);
    --sms-shadow-raised: 0 16px 44px rgba(11, 31, 58, 0.1);
    --sms-focus-ring: 3px solid rgba(53, 105, 185, 0.3);

    /* superficie escura (documentacao para desenvolvedores) */
    --sms-dark-bg: #0b1f3a;
    --sms-dark-surface: #11294a;
    --sms-dark-raised: #0d1726;
    --sms-dark-text: #dce7f5;
    --sms-dark-muted: #9fb4d0;
    --sms-dark-border: rgba(220, 231, 245, 0.16);
}