/* ============================================================
   UPWINS · TOKENS
   Reset e sistema de cor. Lido por todas as páginas antes de
   qualquer outra folha.

   SISTEMA DE COR
   Rampa gerada em OKLCH a partir do azul da marca (#000673 = blue-800,
   L .257 · C .170 · H 264.2). O matiz 264.2 é mantido em todos os degraus;
   a croma é reduzida só onde o sRGB não comporta. Os neutros saem do mesmo
   matiz com croma quase nula, então o cinza tem cast azul e a página inteira
   pertence a uma família só.

   REGRAS TRAVADAS
   - Dois raios, com regra: o que está no fluxo usa --radius (4px);
     o que flutua por cima do conteúdo usa --radius-float (12px).
   - Acento único: azul. Verde só em número positivo; vermelho uma vez
     por página, no dado de fracasso, e em erro de formulário.
   - Um tema por página: cada página tem no máximo um bloco invertido.
   ============================================================ */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 2. TOKENS ---------- */
:root {
  /* Rampa azul da marca */
  --blue-50:  #EFF5FF;
  --blue-100: #E0EAFF;
  --blue-200: #C2D7FF;
  --blue-300: #97B9FF;
  --blue-400: #6696FF;
  --blue-500: #396FF6;
  --blue-600: #2051D1;
  --blue-700: #0931A7;
  --blue-800: #000673;  /* marca */
  --blue-900: #000250;
  --blue-950: #00022D;

  /* Papel e superfícies (mesmo matiz, croma quase nula) */
  --canvas:          #F9FAFD;
  --surface:         #EDF1F7;
  --surface-2:       #E0E5EE;
  --hairline:        #DADFE8;
  --hairline-strong: #C7CDD9;

  /* Texto */
  --ink:   #0D162A;
  --body:  #42506D;
  --muted: #5E6B86;

  /* Papéis funcionais */
  --accent:        var(--blue-700);   /* link, foco, detalhe interativo */
  --accent-strong: var(--blue-800);   /* fundo do botão primário */
  --accent-hover:  var(--blue-600);
  --accent-wash:   var(--blue-50);
  --on-accent:     #FFFFFF;

  --good: #407A19;
  --alert: #B20200;

  /* Bloco invertido (só #plano) */
  --inv-bg:   var(--blue-900);
  --inv-bg-2: var(--blue-800);
  --inv-line: rgba(255,255,255,.15);
  --inv-line-hover: rgba(255,255,255,.32);
  --inv-ink:  #F2F6FF;
  --inv-body: #B9C6E8;

  /* Sombra tingida no matiz da marca, nunca preta */
  --shadow-sm: 0 1px 2px rgba(0, 6, 115, .06);
  --shadow-md: 0 12px 32px -16px rgba(0, 6, 115, .35);
  --shadow-lg: 0 24px 60px -28px rgba(0, 6, 115, .45);

  /* Tipografia */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.35rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2:      clamp(1.85rem, 1.25rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.15rem, 1rem + .5vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;

  /* Ritmo */
  --shell:     1240px;
  --gutter:    clamp(1.25rem, .6rem + 2.5vw, 3rem);
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);

  /* Dois raios, com regra: o que está no fluxo usa 4px; o que flutua por
     cima do conteúdo (barra solta, menu, CTA fixa) usa 12px. */
  --radius:       4px;
  --radius-float: 12px;

  /* Quanto o vidro avança para fora da linha de conteúdo. Limitado pela
     goteira para que no mobile ele ainda flutue em vez de encostar na tela. */
  --float-out: min(1.25rem, calc(var(--gutter) - .5rem));

  /* Camada de vidro. Aproximação web com backdrop-filter, não o material
     nativo da Apple. Sempre com fallback opaco logo abaixo. */
  --glass-bg:        rgba(249, 250, 253, .72);
  --glass-solid:     #F4F6FB;
  --glass-border:    rgba(13, 22, 42, .10);
  --glass-highlight: rgba(255, 255, 255, .85);
  --glass-shadow:    0 10px 34px -12px rgba(0, 6, 115, .30);
  --glass-blur:      blur(18px) saturate(180%);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  color-scheme: light;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Escuro: o azul profundo vira o papel. A hierarquia é preservada,
   não invertida, e o bloco #plano continua sendo o degrau mais claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas:          #080D16;
    --surface:         #101624;
    --surface-2:       #182133;
    --hairline:        #232D42;
    --hairline-strong: #33405C;

    --ink:   #EFF3F9;
    --body:  #B4BFD4;
    --muted: #8E99B0;

    --accent:        var(--blue-400);
    --accent-strong: var(--blue-400);
    --accent-hover:  var(--blue-300);
    --accent-wash:   rgba(102, 150, 255, .10);
    --on-accent:     #06091F;

    --good:  #84C661;
    --alert: #FA6A58;

    --inv-bg:   #182133;
    --inv-bg-2: #202B42;
    --inv-line: rgba(255,255,255,.13);
    --inv-line-hover: rgba(255,255,255,.30);
    --inv-ink:  #EFF3F9;
    --inv-body: #B4BFD4;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 12px 32px -16px rgba(0,0,0,.7);
    --shadow-lg: 0 24px 60px -28px rgba(0,0,0,.8);

    --glass-bg:        rgba(16, 22, 36, .62);
    --glass-solid:     #121A2B;
    --glass-border:    rgba(255, 255, 255, .10);
    --glass-highlight: rgba(255, 255, 255, .14);
    --glass-shadow:    0 10px 34px -10px rgba(0, 0, 0, .70);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:          #080D16;
  --surface:         #101624;
  --surface-2:       #182133;
  --hairline:        #232D42;
  --hairline-strong: #33405C;

  --ink:   #EFF3F9;
  --body:  #B4BFD4;
  --muted: #8E99B0;

  --accent:        var(--blue-400);
  --accent-strong: var(--blue-400);
  --accent-hover:  var(--blue-300);
  --accent-wash:   rgba(102, 150, 255, .10);
  --on-accent:     #06091F;

  --good:  #84C661;
  --alert: #FA6A58;

  --inv-bg:   #182133;
  --inv-bg-2: #202B42;
  --inv-line: rgba(255,255,255,.13);
  --inv-line-hover: rgba(255,255,255,.30);
  --inv-ink:  #EFF3F9;
  --inv-body: #B4BFD4;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 60px -28px rgba(0,0,0,.8);

  --glass-bg:        rgba(16, 22, 36, .62);
  --glass-solid:     #121A2B;
  --glass-border:    rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .14);
  --glass-shadow:    0 10px 34px -10px rgba(0, 0, 0, .70);
}