/* =============================================================
   UniTech | Projeto Banhado Seguro
   assets/css/base.css
   Fundação: variáveis, reset, tipografia, elementos base.
   ============================================================= */

/* -------------------------------------------------------------
   1. Variáveis (design tokens)
   ------------------------------------------------------------- */
:root {
    /* Cores principais */
    --cor-verde-floresta:     #1f3d2b;
    --cor-verde-floresta-2:   #2a5239;
    --cor-verde-salgia:       #7fa88b;
    --cor-verde-salgia-claro: #b9cfbf;
    --cor-verde-menta:        #e6f0e8;

    /* Acentos */
    --cor-agua:               #3d7ea6;
    --cor-agua-claro:         #d7e7f0;
    --cor-terra:              #8a6a4a;
    --cor-terra-claro:        #efe3d3;

    /* Neutros */
    --cor-branco:             #ffffff;
    --cor-fundo:              #f7faf7;
    --cor-fundo-alt:          #eef4ee;
    --cor-borda:              #d9e2da;
    --cor-borda-forte:        #b9c6bc;

    /* Texto */
    --cor-texto:              #1c2520;
    --cor-texto-suave:        #4b5b52;
    --cor-texto-inverso:      #f4f8f5;

    /* Estados */
    --cor-sucesso:            #2f7d4f;
    --cor-sucesso-bg:         #e3f3e9;
    --cor-erro:               #b03a2e;
    --cor-erro-bg:            #fbe6e3;
    --cor-aviso:              #b8860b;
    --cor-aviso-bg:           #fbf1d6;
    --cor-info:               #2c6e9c;
    --cor-info-bg:            #e1eff7;

    /* Tipografia */
    --fonte-base:             "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --fonte-titulo:           "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --fonte-mono:             "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;

    --fs-xs:                  0.75rem;   /* 12px */
    --fs-sm:                  0.875rem;  /* 14px */
    --fs-base:                1rem;      /* 16px */
    --fs-md:                  1.125rem;  /* 18px */
    --fs-lg:                  1.375rem;  /* 22px */
    --fs-xl:                  1.75rem;   /* 28px */
    --fs-2xl:                 2.25rem;   /* 36px */
    --fs-3xl:                 3rem;      /* 48px */

    --lh-apertado:            1.2;
    --lh-normal:              1.55;
    --lh-solto:               1.75;

    --peso-regular:           400;
    --peso-medio:             500;
    --peso-semi:              600;
    --peso-forte:             700;

    /* Espaçamentos */
    --esp-1:  0.25rem;
    --esp-2:  0.5rem;
    --esp-3:  0.75rem;
    --esp-4:  1rem;
    --esp-5:  1.5rem;
    --esp-6:  2rem;
    --esp-7:  2.5rem;
    --esp-8:  3rem;
    --esp-9:  4rem;
    --esp-10: 6rem;

    /* Layout */
    --largura-conteudo:       1120px;
    --largura-estreita:       720px;
    --altura-header:          72px;

    /* Raios */
    --raio-sm: 6px;
    --raio-md: 10px;
    --raio-lg: 16px;
    --raio-pill: 999px;

    /* Sombras */
    --sombra-suave:  0 1px 2px rgba(28, 37, 32, 0.04),
                     0 2px 6px rgba(28, 37, 32, 0.05);
    --sombra-media:  0 2px 6px rgba(28, 37, 32, 0.06),
                     0 8px 20px rgba(28, 37, 32, 0.08);
    --sombra-forte:  0 4px 12px rgba(28, 37, 32, 0.10),
                     0 16px 40px rgba(28, 37, 32, 0.12);

    /* Transições */
    --trans-rapida: 120ms ease;
    --trans-media:  220ms ease;

    /* Foco */
    --cor-foco:      #3d7ea6;
    --anel-foco:     0 0 0 3px rgba(61, 126, 166, 0.35);
}

/* -------------------------------------------------------------
   2. Reset moderno
   ------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-base);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    font-weight: var(--peso-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

/* Reduz animação para quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* -------------------------------------------------------------
   3. Tipografia
   ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    color: var(--cor-verde-floresta);
    margin: 0 0 var(--esp-4) 0;
    line-height: var(--lh-apertado);
    font-weight: var(--peso-forte);
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    margin-bottom: var(--esp-5);
}

h2 {
    font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}

h3 {
    font-size: var(--fs-xl);
}

h4 {
    font-size: var(--fs-lg);
}

h5 {
    font-size: var(--fs-md);
}

h6 {
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cor-texto-suave);
}

p {
    margin: 0 0 var(--esp-4) 0;
    color: var(--cor-texto);
}

p.lead {
    font-size: var(--fs-md);
    color: var(--cor-texto-suave);
    line-height: var(--lh-solto);
}

small {
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

strong, b {
    font-weight: var(--peso-semi);
    color: var(--cor-verde-floresta);
}

em, i {
    font-style: italic;
}

hr {
    border: none;
    border-top: 1px solid var(--cor-borda);
    margin: var(--esp-6) 0;
}

blockquote {
    margin: var(--esp-5) 0;
    padding: var(--esp-4) var(--esp-5);
    border-left: 4px solid var(--cor-verde-salgia);
    background: var(--cor-verde-menta);
    border-radius: 0 var(--raio-md) var(--raio-md) 0;
    color: var(--cor-texto-suave);
    font-style: italic;
}

/* -------------------------------------------------------------
   4. Links
   ------------------------------------------------------------- */
a {
    color: var(--cor-agua);
    text-decoration: none;
    transition: color var(--trans-rapida);
}

a:hover,
a:focus {
    color: var(--cor-verde-floresta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:focus-visible {
    outline: none;
    box-shadow: var(--anel-foco);
    border-radius: var(--raio-sm);
}

/* -------------------------------------------------------------
   5. Listas
   ------------------------------------------------------------- */
ul, ol {
    margin: 0 0 var(--esp-4) 0;
    padding-left: var(--esp-6);
}

li {
    margin-bottom: var(--esp-2);
}

li::marker {
    color: var(--cor-verde-salgia);
}

ul.sem-estilo {
    list-style: none;
    padding-left: 0;
}

/* -------------------------------------------------------------
   6. Imagens e mídia
   ------------------------------------------------------------- */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0;
}

figcaption {
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    margin-top: var(--esp-2);
    text-align: center;
}

/* -------------------------------------------------------------
   7. Formulários (base — detalhes em components.css)
   ------------------------------------------------------------- */
input,
select,
textarea,
button {
    font: inherit;
    color: inherit;
}

input,
select,
textarea {
    width: 100%;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

::placeholder {
    color: #8a978f;
    opacity: 1;
}

/* -------------------------------------------------------------
   8. Tabelas
   ------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

th, td {
    padding: var(--esp-3) var(--esp-4);
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: top;
}

th {
    background: var(--cor-fundo-alt);
    font-weight: var(--peso-semi);
    color: var(--cor-verde-floresta);
    white-space: nowrap;
}

tbody tr:hover {
    background: var(--cor-verde-menta);
}

/* -------------------------------------------------------------
   9. Código
   ------------------------------------------------------------- */
code, pre, kbd, samp {
    font-family: var(--fonte-mono);
    font-size: 0.9em;
}

code {
    background: var(--cor-fundo-alt);
    padding: 0.15em 0.4em;
    border-radius: var(--raio-sm);
    color: var(--cor-verde-floresta);
}

pre {
    background: #1c2520;
    color: var(--cor-texto-inverso);
    padding: var(--esp-4);
    border-radius: var(--raio-md);
    overflow-x: auto;
    line-height: 1.6;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* -------------------------------------------------------------
   10. Seleção
   ------------------------------------------------------------- */
::selection {
    background: var(--cor-verde-salgia);
    color: var(--cor-branco);
}

/* -------------------------------------------------------------
   11. Layout utilitário mínimo
   ------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: 0 var(--esp-5);
}

.container-estreito {
    width: 100%;
    max-width: var(--largura-estreita);
    margin: 0 auto;
    padding: 0 var(--esp-5);
}

.secao {
    padding: var(--esp-9) 0;
}

.secao-alt {
    background: var(--cor-fundo-alt);
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--esp-2); }
.mt-4 { margin-top: var(--esp-4); }
.mt-6 { margin-top: var(--esp-6); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--esp-2); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-6 { margin-bottom: var(--esp-6); }

/* Esconde visualmente mas mantém acessível a leitores de tela. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------
   12. Foco acessível universal
   ------------------------------------------------------------- */
:focus-visible {
    outline: none;
    box-shadow: var(--anel-foco);
    border-radius: var(--raio-sm);
}

/* -------------------------------------------------------------
   13. Scrollbar (discreta, apenas navegadores WebKit)
   ------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--cor-fundo-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--cor-verde-salgia);
    border-radius: var(--raio-pill);
    border: 2px solid var(--cor-fundo-alt);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-verde-floresta-2);
}