/* ==========================================================================
   EPOC — Design tokens
   Camada única de verdade para cor, tipo, escala, espaço e movimento.
   Nenhum valor cru deve aparecer fora deste arquivo: componentes consomem
   tokens. Trocar a marca = trocar aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografia — IBM Plex, self-hosted. Sem CDN: nenhuma dependência externa
   pode derrubar a tipografia da marca, e nada vaza para terceiros.
   O Plex Sans é variável (um arquivo cobre 100–700).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plex Serif — os momentos editoriais: manchete do hero, nome do cliente no
   case, frase do fundador. Mesma família do Sans, então a página não vira
   uma colagem de duas tipografias estranhas: é o mesmo desenho com serifa.
   Traz refinamento sem empurrar a marca para "restaurante de luxo". */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ----------------------------------------------------------------------
     COR — escalas cruas. Não usar diretamente em componente; usar os
     tokens semânticos mais abaixo.
     ---------------------------------------------------------------------- */

  /* Tinta: azul-petróleo profundo, não preto. O texto principal num azul
     escuro em vez de quase-preto é o que separa "corporativo" de
     "elegante" — a página inteira ganha temperatura sem mudar de cor. */
  /* Puxados para o azul: as duas faixas escuras precisam ler como "azul
     EPOC profundo", não como preto. Isso mantém a imersão tecnológica sem
     abrir um universo cromático separado no meio da página clara. */
  --c-ink-950: #071e2e;
  --c-ink-900: #0a2839;
  --c-ink-850: #0e3348;
  --c-ink-800: #123e63;
  --c-ink-750: #17496f;
  --c-ink-700: #1d5680;
  --c-ink-600: #2a6795;

  /* Papel: off-white quente, marfim discreto, areia quase branca. */
  --c-paper-0: #ffffff;
  --c-paper-25: #f7f6f2;
  --c-paper-50: #f1efe9;
  --c-paper-100: #e8e5dd;
  --c-paper-200: #dcd8ce;
  --c-paper-300: #c4bfb2;

  /* Variante fria do papel — respiro entre faixas quentes. */
  --c-paper-blue: #eff3f5;
  --c-paper-blue-rule: #dae2e7;

  /* O azul do arquivo do logotipo, medido pixel a pixel: #0071EF. Vale
     registrar que hoje existem três azuis diferentes circulando — o manual
     em /nossa-marca/ diz #0066EC, o site renderiza #0270EB e o PNG do logo
     é #0071EF. Este é o do arquivo, então é ele que manda.

     Fica reservado ao botão de ação e ao próprio logo: é o que faz a marca
     parecer nativa da página em vez de um adesivo colado nela. Em área
     grande ele continua de fora — saturação alta em superfície é o que
     empurrava a página para "fintech". */
  --c-blue-epoc: #0071ef;
  --c-blue-epoc-escuro: #005cc4;

  /* Azuis institucionais profundos, para superfície e texto. */
  --c-blue-800: #0d2f4d;
  --c-blue-700: #123e63;
  --c-blue-600: #1a5580;
  --c-blue-500: #246fa3;
  --c-blue-400: #4b90c0;
  --c-blue-300: #8fb9d6;
  --c-blue-100: #d5e5ef;

  /* Cobre: o único acento quente, e a ponte entre tecnologia e
     hospitalidade. Em doses pequenas — régua, rótulo, um número. Nunca em
     área grande: identidade laranja não é o objetivo. */
  --c-copper-800: #8a5a2b;
  --c-copper-700: #97622f;
  --c-copper-600: #b0713a;
  --c-copper-500: #c98545;
  --c-copper-400: #dda471;
  --c-copper-100: #f0e0d0;

  /* Semântica de dado — separada do acento de marca por definição. */
  --c-data-pos: #3fa57c;
  --c-data-neg: #d9645a;
  --c-data-warn: #c98a2b;
  /* Âmbar escurecido para uso sobre papel claro: o #c98a2b dá 2,64:1 ali e
     reprova. Este dá 5,36:1, e é escuro/oliva o bastante para não se
     confundir com o cobre do acento de marca. */
  --c-data-warn-papel: #8a5a10;

  /* ----------------------------------------------------------------------
     COR — tokens semânticos. Componentes usam SÓ estes.

     O site é claro em ~80% da área. Restam duas faixas escuras: a
     arquitetura, que é o mergulho na tecnologia, e o CTA final. O resto é
     papel. A tecnologia sustenta a experiência; não deve dominá-la.
     ---------------------------------------------------------------------- */

  /* Fundo escuro — arquitetura e CTA, só */
  --bg-dark: var(--c-ink-900);
  --bg-dark-deep: var(--c-ink-950);
  --bg-dark-raised: var(--c-ink-850);
  --bg-dark-raised-2: var(--c-ink-800);
  --fg-dark: #f2f5f7;
  --fg-dark-2: #a8bccb;
  --fg-dark-3: #7d97aa;
  --rule-dark: #1d4159;
  --rule-dark-soft: #163449;

  /* Fundo claro — a base do site */
  --bg-light: var(--c-paper-25);
  --bg-light-alt: var(--c-paper-50);
  --bg-light-raised: var(--c-paper-0);
  --bg-light-sunk: var(--c-paper-100);
  /* Texto principal em azul-petróleo, não em quase-preto. */
  --fg-light: #132737;
  --fg-light-2: #4a5c6b;
  /* Escurecido de #6b7b88: nos rótulos mono de 11px dava 3,79:1 sobre o
     papel quente, abaixo do mínimo AA. Agora passa nos três papéis
     (4,95 no base, 4,64 na alternância, 4,78 no frio). */
  --fg-light-3: #5d6d7a;
  --rule-light: var(--c-paper-200);
  --rule-light-soft: var(--c-paper-100);

  /* Acentos */
  --accent: var(--c-copper-400);
  /* 800, não 700: o cobre-700 dava 4,45:1 nos rótulos mono de 11px sobre o
     papel da faixa alternada — reprova em AA por pouco, e é justamente onde os
     rótulos de seção das páginas internas caem. O 800 passa nos cinco papéis
     (4,66 no pior caso, o papel afundado). */
  --accent-on-light: var(--c-copper-800);
  --action: var(--c-blue-400);
  --action-hover: var(--c-blue-300);
  /* Link de texto num azul mais fechado que o do logo: #0071EF sobre papel
     dá 4,23:1 e reprova em AA; este dá 5,83:1. O azul do logo fica no fundo
     do botão, onde o texto é branco e passa. */
  --action-on-light: var(--c-blue-epoc-escuro);

  /* Série de dados — ordem fixa, para todo gráfico do site ler igual. */
  --series-1: var(--c-blue-500);
  --series-2: var(--c-copper-500);
  --series-3: var(--c-blue-300);
  --series-4: #8a9aa6;

  /* ----------------------------------------------------------------------
     TIPO
     ---------------------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Iowan Old Style", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
    monospace;

  /* Escala fluida. O display é grande de propósito: manchete é tese. */
  /* Reduzido de 4,75rem: a coluna de texto do hero tem ~594px (a fotografia
     ocupa 45% da tela), e a manchete quebrava em quatro linhas. Em três
     linhas ela lê como manchete; em quatro, como parágrafo grande. */
  --fs-display: clamp(2.4rem, 4.4vw, 4rem);
  --fs-h1: clamp(2rem, 3.8vw, 3.125rem);
  --fs-h2: clamp(1.6rem, 2.8vw, 2.375rem);
  --fs-h3: 1.3125rem;
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.6875rem;

  --lh-display: 1.04;
  --lh-tight: 1.14;
  --lh-snug: 1.3;
  --lh-body: 1.66;

  /* Peso de display em 400/500, não 600.

     Elegância vem de redução: manchete grande e LEVE, com bastante ar, lê
     como marca; manchete grande e pesada lê como banner. O tracking
     negativo fica sutil — na serifada ele quase some, porque apertar uma
     serifada a destrói. */
  --w-display: 400;
  --w-title: 500;
  --tr-display: -0.02em;
  --tr-h1: -0.018em;
  --tr-h2: -0.016em;
  --tr-h3: -0.01em;
  --tr-label: 0.16em;

  --measure: 58ch;
  --measure-wide: 72ch;

  /* ----------------------------------------------------------------------
     ESPAÇO / GRID
     ---------------------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 960px;
  --gutter: clamp(20px, 4vw, 56px);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Respiro generoso, mas não vazio: o 12.5vw antigo dava ~180px por lado em 1440px, e como
     cada fronteira soma o padding de baixo de uma seção com o de cima da outra, os vãos batiam
     em ~360px — seções de conteúdo curto (conecta, desafio) viravam ilhas flutuando. Curva mais
     contida: ~94px em 1440px, vão de ~188px. */
  --section-y: clamp(56px, 6.5vw, 104px);

  /* Cantos: quase retos. Card arredondado é linguagem de app. */
  --radius: 2px;
  --radius-lg: 3px;

  /* ----------------------------------------------------------------------
     MOVIMENTO
     ---------------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;

  --shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-light: 0 1px 2px rgba(11, 17, 28, 0.06), 0 8px 24px -16px rgba(11, 17, 28, 0.14);
}