/* ============================================================
   Design Tokens — Portal Transparência Seropédica
   ============================================================ */

/* --- @font-face --- */
@font-face { font-family: 'Manrope'; src: url('/portal_transparencia/public/fonts/Manrope-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/portal_transparencia/public/fonts/Manrope-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/portal_transparencia/public/fonts/Manrope-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/portal_transparencia/public/fonts/Manrope-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/portal_transparencia/public/fonts/Manrope-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/portal_transparencia/public/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/portal_transparencia/public/fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* --- Color tokens --- */
:root {
    --magenta:     #E5326E;
    --magenta-600: #C71E5C;
    --magenta-50:  #FFF1F6;
    --cyan:        #14B8C9;
    --cyan-600:    #0E94A2;
    --cyan-50:     #ECFBFD;
    --ink:         #0F172A;
    --ink-2:       #334155;
    --muted:       #64748B;
    --bg:          #F7F8FA;
    --paper:       #FFFFFF;
    --line:        #E2E8F0;
    --green:       #16A34A;
    --amber:       #D97706;
    --red:         #DC2626;
    --radius:      10px;
    --radius-lg:   14px;
    --shadow-sm:   0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
    --shadow:      0 4px 14px rgba(15,23,42,.06);
    --font-body:   'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

    /* Aliases — vários CSS específicos usam estes nomes (--primary, --surface,
       --text, --border, --text-muted, --magenta-d). Mapeados aos tokens
       canônicos pra evitar variáveis "fantasma" que viravam transparente. */
    --primary:     var(--magenta);
    --primary-d:   var(--magenta-600);
    --magenta-d:   var(--magenta-600);
    --surface:     var(--paper);
    --surface-2:   #F8FAFC;
    --text:        var(--ink);
    --text-muted:  var(--muted);
    --border:      var(--line);
}

/* --- Alto contraste --- */
[data-theme="hc"] {
    --bg:          #000000;
    --paper:       #000000;
    --ink:         #FFFFFF;
    --ink-2:       #FFFFFF;
    --muted:       #DDDDDD;
    --line:        #FFFFFF;
    --magenta:     #FF4D8C;
    --magenta-600: #FF6B9D;
    --magenta-50:  #1A0008;
    --cyan:        #22D3EE;
    --cyan-600:    #67E8F9;
    --cyan-50:     #001A1F;
    --green:       #4ADE80;
    --amber:       #FBBF24;
    --red:         #F87171;
    --shadow-sm:   none;
    --shadow:      none;
    /* Aliases reutilizam os tokens já sobrescritos acima */
    --primary:     var(--magenta);
    --primary-d:   var(--magenta-600);
    --magenta-d:   var(--magenta-600);
    --surface:     var(--paper);
    --surface-2:   #1A1A1A;
    --text:        var(--ink);
    --text-muted:  var(--muted);
    --border:      var(--line);
}