/* ============================================================================
   SignallQ — Design Foundations (colors + type) — MD3 (Fluxo de Telas To-Be)
   Tokens locais do SignallQ Web.
   ----------------------------------------------------------------------------
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* ---- Primary (CTA, seleção, nav ativa) --------------------------------- */
  --accent:        #5B21D6;  /* era #6C2BFF — migração 2026-07-13 */
  --on-accent:     #FFFFFF;

  /* ---- Secondary (azul FIXO — não deriva mais do accent) ----------------- */
  --accent-blue:   #2851B8;  /* era #2563EB derivado da tríade HCT */

  /* ---- Status ----------------------------------------------------------- */
  --success:       #146C2E;  /* conexão boa, testes OK, ações bem-sucedidas    */
  --warning:       #8A5000;  /* alertas moderados, condições a monitorar       */
  --error:         #BA1A1A;  /* erros críticos, falhas de conexão              */

  /* ---- SpeedTest phase colors ------------------------------------------ */
  --phase-latencia: #2563EB;
  --phase-download: #146C2E;
  --phase-upload:   #8A5000;

  /* ---- Surface — Light (default) --------------------------------------- */
  --bg-primary:    #FFFFFF;  /* fundo principal de telas                       */
  --bg-secondary:  #F8F5FB;  /* superfícies secundárias / chips (surface-container-low) */
  --bg-card:       #FFFFFF;  /* cards, superfícies de conteúdo                 */
  --text-primary:  #1C1B1F;  /* título, corpo (on-surface)                     */
  --text-secondary:#49454F;  /* descrições (on-surface-variant)                */
  --text-tertiary: #49454F;  /* labels, captions, overlines, hints (2º degrau removido) */
  --border:        #79747E;  /* divisores, bordas leves (outline)              */

  /* container tokens (semânticos) — Light */
  --warning-container:    #FFDDB3;
  --on-warning-container:  #2B1700;
  --amber-surface:         #FFF3CD;
  --success-container:     #B6F2BE;
  --on-success-container:  #04210D;

  /* ---- SignallQ IA (DESCONTINUADA no To-Be — mantida só como registro
     histórico do As-Is; nenhuma rota/componente novo deve usar) ------------ */
  --SignallQ-black:                #0D0D1A;
  --SignallQ-dark-surface:         #1A0B2E;
  --SignallQ-dark-card:            #1E1130;
  --SignallQ-text-on-dark:         #F3F4F6;
  --SignallQ-text-secondary-on-dark:#B9B2C4;

  /* ---- Spacing — grid 8dp, 8 degraus ------------------------------------ */
  --space-xs:    4px;
  --space-sm:    8px;   /* unidade fundamental */
  --space-md:   12px;
  --space-base: 16px;   /* padding de telas + cardContent — era --space-lg */
  --space-lg:   20px;   /* NOVO degrau */
  --space-xl:   24px;
  --space-xxl:  32px;
  --space-xxxl: 40px;   /* NOVO degrau — CTA de onboarding, rodapés */

  /* ---- Radii por componente ---------------------------------------------- */
  --radius-card:   16px;
  --radius-button: 20px;  /* era 12px — Button ganhou radius próprio */
  --radius-field:  12px;  /* input/field */
  --radius-sheet:  28px;  /* SheetFrame */
  --radius-dialog: 24px;
  --radius-pill:  999px;

  /* ---- Type — fonte única do app (nenhuma segunda família em nenhuma tela) */
  --font-sans: 'Google Sans Flex', 'Google Sans', 'Roboto', system-ui, sans-serif;
}

/* ---- Surface — Dark (apply .dark to a container) ----------------------- */
.dark {
  --accent:        #D0BCFF;
  --on-accent:     #38137E;
  --accent-blue:   #AAC7FF;
  --success:       #83DA99;
  --warning:       #FFB870;
  --error:         #FFB4AB;
  --phase-latencia: #AAC7FF;
  --phase-download: #83DA99;
  --phase-upload:   #FFB870;
  --bg-primary:    #131217;
  --bg-secondary:  #1D1B20;
  --bg-card:       #211F26;
  --text-primary:  #E6E0E9;
  --text-secondary:#CAC4D0;
  --text-tertiary: #CAC4D0;
  --border:        #948F99;
  --warning-container:    #693D00;
  --on-warning-container:  #FFDDB3;
  --amber-surface:         #2E2000;
  --success-container:     #0A5321;
  --on-success-container:  #9DF4AC;
}

/* ============================================================================
   SEMANTIC TYPE — Material Design 3, escala do Fluxo de Telas (12 estilos).
   display-large, display-medium e headline-medium foram REMOVIDOS — nenhuma
   tela do Fluxo de Telas usa estilo maior que displaySmall (34px).
   ============================================================================ */
.display-small   { font: 700 34px/1.18 var(--font-sans); color: var(--text-primary); }

.headline-large  { font: 700 26px/1.23 var(--font-sans); color: var(--text-primary); }
.headline-small  { font: 600 22px/1.27 var(--font-sans); color: var(--text-primary); }

.title-large     { font: 600 20px/1.3  var(--font-sans); color: var(--text-primary); }
.title-medium    { font: 500 16px/1.38 var(--font-sans); color: var(--text-primary); }
.title-small     { font: 500 14px/1.43 var(--font-sans); color: var(--text-primary); }

.body-large      { font: 400 16px/1.5  var(--font-sans); color: var(--text-primary); }
.body-medium     { font: 400 14px/1.43 var(--font-sans); color: var(--text-secondary); }
.body-small      { font: 400 12px/1.33 var(--font-sans); color: var(--text-secondary); }

.label-large     { font: 500 14px/1.43 var(--font-sans); color: var(--text-primary); }
.label-medium    { font: 500 12px/1.33 var(--font-sans); color: var(--text-secondary); }
.label-small     { font: 500 11px/1.45 var(--font-sans); color: var(--text-secondary); }

/* Overline — padrão recorrente do produto (label-small + uppercase) */
.overline {
  font: 500 11px/1.45 var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}