/* ================================================================
   QualiObra Design System — Tokens
   Extensão do design system QualiApps. Mesma estrutura de tokens,
   mesma tipografia, mesma geometria — a única diferença canônica é
   que --brand aponta para qualiobra-mint por padrão.

   Fonte da verdade: https://github.com/qualiobra/qualiapps-design-system
   ================================================================ */

/* Fontes locais — Barlow (corpo), Poppins (títulos), Balloon (logotipo) */
@font-face{font-family:"Barlow";font-style:normal;font-weight:100;font-display:swap;src:url("assets/fonts/Barlow-Thin.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:100;font-display:swap;src:url("assets/fonts/Barlow-ThinItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:200;font-display:swap;src:url("assets/fonts/Barlow-ExtraLight.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:200;font-display:swap;src:url("assets/fonts/Barlow-ExtraLightItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/Barlow-Light.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:300;font-display:swap;src:url("assets/fonts/Barlow-LightItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Barlow-Regular.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/Barlow-Italic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Barlow-Medium.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:500;font-display:swap;src:url("assets/fonts/Barlow-MediumItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Barlow-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:600;font-display:swap;src:url("assets/fonts/Barlow-SemiBoldItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Barlow-Bold.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:700;font-display:swap;src:url("assets/fonts/Barlow-BoldItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/Barlow-ExtraBold.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:800;font-display:swap;src:url("assets/fonts/Barlow-ExtraBoldItalic.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:900;font-display:swap;src:url("assets/fonts/Barlow-Black.ttf") format("truetype")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:900;font-display:swap;src:url("assets/fonts/Barlow-BlackItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:100;font-display:swap;src:url("assets/fonts/Poppins-Thin.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:100;font-display:swap;src:url("assets/fonts/Poppins-ThinItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:200;font-display:swap;src:url("assets/fonts/Poppins-ExtraLight.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:200;font-display:swap;src:url("assets/fonts/Poppins-ExtraLightItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/Poppins-Light.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:300;font-display:swap;src:url("assets/fonts/Poppins-LightItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Poppins-Regular.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/Poppins-Italic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Poppins-Medium.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:500;font-display:swap;src:url("assets/fonts/Poppins-MediumItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Poppins-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:600;font-display:swap;src:url("assets/fonts/Poppins-SemiBoldItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Poppins-Bold.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:700;font-display:swap;src:url("assets/fonts/Poppins-BoldItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/Poppins-ExtraBold.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:800;font-display:swap;src:url("assets/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;src:url("assets/fonts/Poppins-Black.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:900;font-display:swap;src:url("assets/fonts/Poppins-BlackItalic.ttf") format("truetype")}
@font-face{font-family:"Balloon";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/Balloon-Light.otf") format("opentype")}
@font-face{font-family:"Balloon";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Balloon-Medium.otf") format("opentype")}
@font-face{font-family:"Balloon";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Balloon-Bold.otf") format("opentype")}

:root {
  /* ---------- Cores da família QualiApps ---------- */
  --qualiapps-cyan:        #45D7FF;   /* claro / decorativo */
  --qualiapps-cyan-deep:   #058FFE;   /* vivo / ações primárias */
  --qualigestao-green:     #13A655;
  --qualiobra-mint:        #5DD0A0;
  --qualiobra-mint:    #5DD0A0;
  --qualiclub-purple:      #863CCE;

  /* ---------- Escala Mint da QualiObra ----------
     Derivada do verde-menta oficial #5DD0A0. Use para hovers,
     fundos suaves, gradientes e estados de UI dentro do produto. */
  --mint-50:             #EFFBF5;
  --mint-100:            #D6F4E6;
  --mint-200:            #ABE8CE;
  --mint-300:            #82DDB7;
  --mint-400:            #5DD0A0;   /* = --qualiobra-mint (cor de marca) */
  --mint-500:            #3EB585;
  --mint-600:            #2C8F68;
  --mint-700:            #1F684C;

  /* ---------- Cor alvo da peça ----------
     QualiObra é a marca-mãe dentro deste repositório. */
  --brand:                 var(--qualiobra-mint);
  --brand-soft:            var(--mint-100);
  --brand-deep:            var(--mint-500);

  /* ---------- Neutros (idênticos ao DS QualiApps) ---------- */
  --ink:                   #0E1726;   /* texto principal */
  --ink-2:                 #2A3242;   /* texto secundário */
  --ink-3:                 #5A6376;   /* texto auxiliar / labels */
  --ink-4:                 #8E96A7;   /* placeholder / disabled */
  --line:                  #E4E8EF;   /* bordas */
  --line-soft:             #EEF1F6;   /* bordas suaves / divisores */
  --bg:                    #FFFFFF;
  --bg-soft:               #F5F7FA;   /* card background sobre branco */
  --bg-elev:               #FFFFFF;
  --bg-ink:                #0E1726;   /* fundo escuro / inverso */

  /* ---------- Status (semânticos) ---------- */
  --success:               var(--qualigestao-green);
  --warning:               #D97706;
  --danger:                #D6322B;
  --info:                  var(--qualiapps-cyan-deep);

  /* ---------- Tipografia ----------
     Balloon: logotipo (raster — não usar em texto corrido)
     Poppins: títulos, números, UI
     Barlow:  corpo de texto, parágrafos
     JetBrains Mono: códigos, metadata, números em tabelas
  */
  --font-logo:     "Balloon", "Poppins", system-ui, sans-serif;
  --font-display:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:     "Barlow",  system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica (modular ~1.250 — major third) */
  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-30:  1.875rem;
  --fs-36:  2.25rem;
  --fs-48:  3rem;
  --fs-60:  3.75rem;
  --fs-72:  4.5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Raios (eco do símbolo: quadrados arredondados) ---------- */
  --r-2:  6px;
  --r-3:  10px;
  --r-4:  14px;
  --r-5:  18px;
  --r-pill: 999px;

  /* ---------- Sombras (sutis, plano e geométrico) ---------- */
  --shadow-1: 0 1px 2px rgba(14, 23, 38, 0.04), 0 1px 1px rgba(14, 23, 38, 0.03);
  --shadow-2: 0 4px 12px rgba(14, 23, 38, 0.06), 0 1px 2px rgba(14, 23, 38, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 23, 38, 0.08), 0 2px 6px rgba(14, 23, 38, 0.04);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);

  /* ---------- Container ---------- */
  --container-w: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* ---------- Resets mínimos ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-48); font-weight: 800; }
h2 { font-size: var(--fs-36); font-weight: 800; }
h3 { font-size: var(--fs-24); font-weight: 700; }
h4 { font-size: var(--fs-20); font-weight: 600; }
p  { margin: 0; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-2); }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }


/* ---------------------------------------------------------------
   Mascote Quali — geometria oficial extraída do Illustrator
   (brand/mascote/favicon.geometry.json). Altura de referência 64px;
   para outra altura H, escala = H/64 nos dois eixos. Os módulos NÃO
   são quadrados; nunca reproduzir com border-radius — use os paths.
   --------------------------------------------------------------- */
:root{
  --quali-mascot-light:#A3EDD5;   /* topo do gradiente da superfície */
  --quali-mascot-base:#64D7B0;    /* meio (42%) */
  --quali-mascot-deep:#34B88C;    /* fim */
  --quali-face-ink:#0A0D12;       /* olhos e boca */
  --quali-height:64px;
  --quali-width:68.363015809px;
  --quali-small-x:0px;            --quali-small-y:43.626848806px;
  --quali-small-width:20.324299669px; --quali-small-height:19.966141567px;
  --quali-top-x:17.516013395px;   --quali-top-y:0px;
  --quali-top-width:25.471582182px;   --quali-top-height:23.939459859px;
  --quali-face-x:27.142742602px;  --quali-face-y:25.259053204px;
  --quali-face-width:41.220273207px;  --quali-face-height:38.740946796px;
}