/* =====================================================================
   Sprintum · kit de marca para tools.sprintum.tech (out/2026)
   Mesmos tokens do site (sprintum-2026/src/styles/global.css + docs/paleta-interface.md).
   Oficiais: petróleo #136E87 · ouro suave #C8A248
   Apoio: texto #142735 · secundário #586775 · superfície #F5F8F9
   Tema escuro é o padrão; [data-theme="light"] alterna.
   ===================================================================== */

/* ---------- Tokens: tema escuro (padrão) ---------- */
:root {
  color-scheme: dark;
  --bg: #0B171D;
  --bg-2: #0F1C23;
  --surface: #142735;
  --surface-2: #1B3242;
  --line: rgba(245, 248, 249, 0.10);
  --line-strong: rgba(245, 248, 249, 0.18);
  --text: #F5F8F9;
  --text-2: #B9C6CE;
  --text-3: #8FA0AB;
  --brand: #136E87;
  --brand-text: #5BB4CF;
  --brand-soft: rgba(19, 110, 135, 0.22);
  --accent: #C8A248;
  --accent-ink: #D9B867;
  --accent-soft: rgba(200, 162, 72, 0.14);
  --on-accent: #142735;
  --on-brand: #F5F8F9;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Comfortaa", ui-rounded, system-ui, sans-serif;
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rampas para o Tailwind (tripletas RGB) — neutros invertidos no escuro */
  --n-50: 15 28 35;      /* #0F1C23 */
  --n-100: 27 50 66;     /* #1B3242 */
  --n-200: 37 61 76;     /* #253D4C */
  --n-300: 51 80 95;     /* #33505F */
  --n-400: 110 130 144;  /* #6E8290 */
  --n-500: 143 160 171;  /* #8FA0AB */
  --n-600: 185 198 206;  /* #B9C6CE */
  --n-700: 205 214 220;  /* #CDD6DC */
  --n-800: 227 233 237;  /* #E3E9ED */
  --n-900: 245 248 249;  /* #F5F8F9 */
  --n-950: 255 255 255;

  --b-50: 16 48 62;      /* #10303E */
  --b-100: 20 60 77;     /* #143C4D */
  --b-200: 27 77 98;     /* #1B4D62 */
  --b-300: 36 103 129;   /* #246781 */
  --b-400: 63 162 188;   /* #3FA2BC */
  --b-500: 26 125 153;   /* #1A7D99 */
  --b-600: 19 110 135;   /* #136E87 petróleo */
  --b-700: 26 128 157;   /* #1A809D (hover, mais claro no escuro) */
  --b-800: 124 198 220;  /* #7CC6DC */
  --b-900: 169 219 232;  /* #A9DBE8 */
  --b-950: 200 232 240;

  --g-50: 13 46 37;  --g-100: 18 61 48;  --g-200: 26 90 69;
  --r-50: 58 21 24;  --r-100: 77 26 31;  --r-200: 107 35 41;
  --y-50: 58 46 14;  --y-100: 77 59 16;  --y-200: 107 83 22;
  --o-50: 61 34 16;  --o-100: 79 44 20;  --o-200: 107 59 26;
}

/* ---------- Tokens: tema claro ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F8F9;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #E9EFF2;
  --line: rgba(20, 39, 53, 0.10);
  --line-strong: rgba(20, 39, 53, 0.20);
  --text: #142735;
  --text-2: #586775;
  --text-3: #5D6D7E;
  --brand: #136E87;
  --brand-text: #136E87;
  --brand-soft: rgba(19, 110, 135, 0.10);
  --accent: #C8A248;
  --accent-ink: #8A6B1F;
  --accent-soft: rgba(200, 162, 72, 0.16);
  --on-accent: #142735;
  --on-brand: #F5F8F9;
  --shadow: 0 24px 60px -28px rgba(20, 39, 53, 0.35);

  --n-50: 245 248 249;   /* #F5F8F9 */
  --n-100: 233 239 242;  /* #E9EFF2 */
  --n-200: 216 225 230;  /* #D8E1E6 */
  --n-300: 195 207 214;  /* #C3CFD6 */
  --n-400: 138 151 163;  /* #8A97A3 */
  --n-500: 93 109 126;   /* #5D6D7E */
  --n-600: 88 103 117;   /* #586775 */
  --n-700: 62 79 94;     /* #3E4F5E */
  --n-800: 38 57 74;     /* #26394A */
  --n-900: 20 39 53;     /* #142735 */
  --n-950: 11 23 29;

  --b-50: 238 245 248;   /* #EEF5F8 */
  --b-100: 220 235 240;  /* #DCEBF0 */
  --b-200: 187 216 226;  /* #BBD8E2 */
  --b-300: 140 191 207;  /* #8CBFCF */
  --b-400: 63 162 188;   /* #3FA2BC */
  --b-500: 28 127 156;   /* #1C7F9C */
  --b-600: 19 110 135;   /* #136E87 */
  --b-700: 16 90 111;    /* #105A6F */
  --b-800: 13 74 91;     /* #0D4A5B */
  --b-900: 10 58 72;     /* #0A3A48 */
  --b-950: 7 42 52;

  --g-50: 240 253 244;  --g-100: 220 252 231;  --g-200: 187 247 208;
  --r-50: 254 242 242;  --r-100: 254 226 226;  --r-200: 254 202 202;
  --y-50: 254 252 232;  --y-100: 254 249 195;  --y-200: 254 240 138;
  --o-50: 255 247 237;  --o-100: 255 237 213;  --o-200: 254 215 170;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  min-height: 100%;
}
html h1, html h2, html h3, html h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Campos de formulário herdam o tema (Tailwind Preflight não define fundo de input) */
html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
html textarea,
html select {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--line-strong);
}
html input::placeholder, html textarea::placeholder { color: var(--text-3); }
html select option { background: var(--surface); color: var(--text); }
html input[type="range"] { accent-color: var(--brand); }
html input[type="checkbox"], html input[type="radio"] { accent-color: var(--brand); }

/* ---------- Sobrescritas de utilitários Tailwind (specificidade html .classe > .classe) ---------- */
/* "white" continua branco para texto (botões petróleo); como fundo vira superfície do tema */
html .bg-white { background-color: var(--surface); }
html .bg-white\/90, html .bg-white\/95, html .bg-white\/80 { background-color: color-mix(in srgb, var(--surface) 90%, transparent); }
html .bg-white\/50 { background-color: color-mix(in srgb, var(--surface) 50%, transparent); }
html .border-white { border-color: var(--surface); }
html .shadow-sm, html .shadow, html .shadow-md, html .shadow-lg, html .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.35); --tw-shadow: var(--tw-shadow-colored); }
:root[data-theme="light"] .shadow-sm, :root[data-theme="light"] .shadow, :root[data-theme="light"] .shadow-md, :root[data-theme="light"] .shadow-lg, :root[data-theme="light"] .shadow-xl { --tw-shadow-color: rgba(20, 39, 53, 0.10); }
/* Fundo em gradiente do contêiner raiz das ferramentas: o tema cuida do fundo */
html #root > .min-h-screen[class*="bg-gradient"] { background-image: none; }

/* Texto em petróleo/semânticos sobre fundo escuro precisa das versões clareadas (WCAG AA) */
:root:not([data-theme="light"]) .text-blue-500,
:root:not([data-theme="light"]) .text-blue-600,
:root:not([data-theme="light"]) .text-indigo-600,
:root:not([data-theme="light"]) .text-purple-600,
:root:not([data-theme="light"]) .text-purple-500 { color: var(--brand-text); }
:root:not([data-theme="light"]) .text-blue-700,
:root:not([data-theme="light"]) .text-blue-800,
:root:not([data-theme="light"]) .text-blue-900,
:root:not([data-theme="light"]) .text-purple-700,
:root:not([data-theme="light"]) .text-purple-800 { color: #7CC6DC; }
:root:not([data-theme="light"]) .hover\:text-blue-700:hover,
:root:not([data-theme="light"]) .hover\:text-blue-800:hover { color: #A9DBE8; }
:root:not([data-theme="light"]) .text-green-600, :root:not([data-theme="light"]) .text-green-700 { color: #4ADE80; }
:root:not([data-theme="light"]) .text-green-800, :root:not([data-theme="light"]) .text-green-900 { color: #86EFAC; }
:root:not([data-theme="light"]) .text-red-600, :root:not([data-theme="light"]) .text-red-700 { color: #F87171; }
:root:not([data-theme="light"]) .text-red-800, :root:not([data-theme="light"]) .text-red-900 { color: #FCA5A5; }
:root:not([data-theme="light"]) .text-yellow-600, :root:not([data-theme="light"]) .text-yellow-700 { color: #FACC15; }
:root:not([data-theme="light"]) .text-yellow-800, :root:not([data-theme="light"]) .text-yellow-900 { color: #FDE047; }
:root:not([data-theme="light"]) .text-amber-600, :root:not([data-theme="light"]) .text-amber-700 { color: #FBBF24; }
:root:not([data-theme="light"]) .text-amber-800, :root:not([data-theme="light"]) .text-amber-900 { color: #FCD34D; }
:root:not([data-theme="light"]) .text-orange-600, :root:not([data-theme="light"]) .text-orange-700 { color: #FB923C; }
:root:not([data-theme="light"]) .text-orange-800 { color: #FDBA74; }
:root:not([data-theme="light"]) .text-black { color: var(--text); }

/* ---------- Barra Sprintum (header compartilhado) ---------- */
.sp-bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.sp-wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.sp-bar .sp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.sp-logo { display: inline-flex; align-items: center; height: 2rem; flex-shrink: 0; }
.sp-logo img { height: 100%; width: auto; display: block; }
.sp-logo img.sp-logo-light, .sp-footer-logo img.sp-logo-light { display: none; }
:root[data-theme="light"] .sp-logo img.sp-logo-light, :root[data-theme="light"] .sp-footer-logo img.sp-logo-light { display: block; }
:root[data-theme="light"] .sp-logo img.sp-logo-dark, :root[data-theme="light"] .sp-footer-logo img.sp-logo-dark { display: none; }
.sp-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; margin-right: .5rem; }
.sp-nav a { position: relative; color: var(--text-2); font-weight: 700; font-size: .95rem; text-decoration: none; transition: color .3s; white-space: nowrap; }
.sp-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out-expo); }
.sp-nav a:hover, .sp-nav a[aria-current="page"] { color: var(--text); }
.sp-nav a:hover::after, .sp-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sp-actions { display: flex; align-items: center; gap: .5rem; }
.sp-iconbtn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: background .25s, color .25s; }
.sp-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.sp-iconbtn svg { display: block; }
.sp-iconbtn .sp-hide { display: none; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; font-weight: 700; padding: .7rem 1.15rem; font-size: .9375rem; line-height: 1; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: transform .45s var(--ease-out-expo), background-color .3s, color .3s, box-shadow .45s, border-color .3s; }
.sp-btn-primary { background: var(--accent); color: var(--on-accent); }
.sp-btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); transform: translateY(-2px); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.sp-btn-secondary { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 28%, transparent); }
.sp-btn-secondary:hover { border-color: var(--text); transform: translateY(-2px); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sp-btn-brand { background: var(--brand); color: var(--on-brand); }
.sp-btn-brand:hover { background: color-mix(in srgb, var(--brand) 85%, white); transform: translateY(-2px); }
@media (max-width: 767px) {
  .sp-actions .sp-only-md { display: none; }
}

/* Menu mobile: abaixo de 1024px os sete itens não cabem na barra */
.sp-menu-btn { display: none; color: var(--text); }
.sp-mobile-nav {
  position: fixed; inset: 4rem 0 0 0; z-index: 55; display: flex; flex-direction: column; overflow-y: auto; padding: 1.5rem 1.5rem 2.5rem;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .3s, transform .3s, visibility .3s;
}
.sp-mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.sp-mobile-nav nav { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.5rem; }
.sp-mobile-nav nav a { border-radius: .75rem; padding: .85rem .75rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); text-decoration: none; transition: background .3s; }
.sp-mobile-nav nav a:hover { background: var(--surface-2); }
.sp-mobile-nav .sp-btn { margin-top: auto; justify-content: center; }
@media (max-width: 1023px) {
  .sp-nav { display: none; }
  .sp-menu-btn { display: grid; }
}
@media (min-width: 1024px) {
  .sp-mobile-nav { display: none; }
}

/* ---------- Cabeçalho da ferramenta (dentro do app React) ---------- */
html .sp-toolhead { background: transparent; border-bottom: 1px solid var(--line); }
html .sp-toolhead > div { padding-top: 1.1rem; padding-bottom: 1.1rem; }
html .sp-tooltitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 2.2vw, 1.5rem); color: var(--text); line-height: 1.2; }
html .sp-lang { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: 9999px; padding: .35rem .6rem; font-size: .9rem; min-width: 0; cursor: pointer; }
html .sp-lang:focus { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 4px var(--brand-soft); }

/* ---------- Rodapé Sprintum ---------- */
.sp-footer { position: relative; overflow: hidden; background: var(--bg-2); border-top: 1px solid var(--line); margin-top: 3rem; font-family: var(--font-sans); }
.sp-footer .sp-wrap { padding-block: 4rem; }
.sp-footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .sp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .sp-footer .sp-wrap { padding-block: 5rem; } }
.sp-footer-logo { display: inline-block; height: 3.5rem; }
.sp-footer-logo img { height: 100%; width: auto; display: block; }
.sp-footer p { margin: 0; }
.sp-footer .sp-desc { margin-top: 1.5rem; max-width: 24rem; color: var(--text-2); line-height: 1.6; }
.sp-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1rem; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sp-link { color: var(--brand-text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .3s, color .3s; }
.sp-link:hover { text-decoration-color: currentColor; }
.sp-footer .sp-muted { color: var(--text-3); }
.sp-footer-bottom { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; color: var(--text-3); }
@media (min-width: 768px) { .sp-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.sp-signature { font-family: var(--font-display); font-weight: 700; color: var(--text-2); }

/* Seletor de idioma com bandeiras (substitui o <select> com emoji; o emoji vira letras no Windows). */
html .sp-lang-flags { display: inline-flex; align-items: center; gap: .15rem; }
html .sp-flag { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; border: 1px solid transparent; background: transparent; cursor: pointer; opacity: .6; transition: opacity .2s, background-color .2s, border-color .2s; }
html .sp-flag:hover { opacity: 1; background: var(--surface-2); }
html .sp-flag.is-active { opacity: 1; background: var(--surface-2); border-color: var(--accent); }
html .sp-flag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
html .sp-flag img { width: 1.25rem; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }