/* SipCode — Design Tokens (cores, fontes, radius, container) */
/* ============================================================
   TOKENS — SipCode Design System (Fase 1)
   ============================================================ */

/* ------------------------------------------------------------
   Fontes auto-hospedadas (Quicksand + Inter)
   Arquivos em assets/fonts/, extraídos dos pacotes oficiais
   @fontsource/quicksand e @fontsource/inter (licença SIL OFL 1.1).
   Nunca depender do CDN fonts.googleapis.com em produção
   (seção 11.4 do Plano Mestre v1.2).
   ------------------------------------------------------------ */
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/quicksand-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/quicksand-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/quicksand-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root{
  --teal:#0A6A87;
  --teal-dark:#0B2E3A;
  --laranja:#F37B28;
  --grafite:#313233;
  --branco:#FFFFFF;
  --cinza-claro:#F4F6F8;
  --cinza-medio:#5B6670;
  --font-head:'Quicksand',sans-serif;
  --font-body:'Inter',sans-serif;
  --radius-sm:8px;
  --radius-md:14px;
  --container:1280px;
}
html[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-alt:#F4F6F8;
  --bg-header:rgba(255,255,255,0.85);
  --bg-header-top:rgba(255,255,255,0);
  --text:#313233;
  --text-secondary:#5B6670;
  --accent:#0A6A87;
  --border:#E3E7EB;
  --card-bg:#FFFFFF;
  --card-shadow:0 2px 14px rgba(11,46,58,0.06);
  --hero-bg:#FFFFFF;
}
html[data-theme="dark"]{
  --bg:#0B2E3A;
  --bg-alt:#0F3A4A;
  --bg-header:rgba(11,46,58,0.85);
  --bg-header-top:rgba(11,46,58,0);
  --text:#F0F4F6;
  --text-secondary:#9FBAC4;
  --accent:#4FC3E0;
  --border:rgba(255,255,255,0.12);
  --card-bg:#123C4C;
  --card-shadow:0 2px 14px rgba(0,0,0,0.25);
  --hero-bg:#0B2E3A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  transition:background .3s ease, color .3s ease;
  overflow-x:hidden;
}
h1,h2,h3,.font-head{ font-family:var(--font-head); font-weight:700; color:var(--text); }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
.eyebrow{
  font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--laranja); margin-bottom:14px;
}
section{ padding:96px 0; }
@media (max-width:768px){ section{ padding:56px 0; } .container{ padding:0 20px; } }

/* Botões */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700;
  font-size:15px; padding:14px 28px; border-radius:10px; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--laranja); color:#fff; box-shadow:0 6px 18px rgba(243,123,40,0.32); }
.btn-primary:hover{ box-shadow:0 10px 24px rgba(243,123,40,0.4); }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--text); }
html[data-theme="light"] .btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
html[data-theme="dark"] .btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,0.4); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; }