/* ===== in-tokens.css · design system LB in 1.9.1 (dcbf845) ===== */
/* LB in Design System v1 · "Incomparável por dentro" · tokens
 *
 * Fonte única dos valores. O JSON (DTCG) e o preset Tailwind são gerados a partir
 * deste arquivo; nunca edite os derivados à mão.
 *
 * Prefixo in- (decisão Q21): a marca vai virar só "in" e nada precisa ser renomeado.
 * Camadas: marca (núcleo travado do brandbook 2022) > escalas > papéis (semântica).
 * Temas: só os papéis mudam. [data-tema="claro"] ou [data-tema="escuro"] no <html> vale para a
 * página inteira; .in-claro e .in-escuro (ou o mesmo atributo) num contêiner valem só para ele.
 * Sem atributo, vale o claro. Para seguir o aparelho, o site resolve o tema antes de pintar
 * (ver "Tema" na página Cor do design system).
 */

:root {
  /* ---------- Marca · núcleo travado ---------- */
  --in-laranja: #FF6900;   /* Pantone 1505 C · CMYK 0 69 100 0 (FOGRA39) */
  --in-navy: #25414E;      /* Pantone 2168 C · CMYK 77 36 25 72 */
  --in-creme: #FFEADB;     /* Pantone 7604 C · CMYK 0 10 16 0 */
  --in-branco: #FFFFFF;

  /* ---------- Escala laranja (o creme é o 100, a marca é o 500) ---------- */
  --in-laranja-50: #FFF6EF;
  --in-laranja-100: #FFEADB;
  --in-laranja-200: #FFD2B0;
  --in-laranja-300: #FFB07A;
  --in-laranja-400: #FF8B3D;
  --in-laranja-500: #FF6900;
  --in-laranja-600: #E05A00;
  --in-laranja-700: #B84800; /* texto e link sobre claro (5,3:1); fundo para texto branco */
  --in-laranja-800: #8A3600;
  --in-laranja-900: #5C2400;

  /* ---------- Escala navy (a marca é o 700) ---------- */
  --in-navy-50: #EEF3F5;
  --in-navy-100: #DCE6EA;
  --in-navy-200: #B9CCD4;
  --in-navy-300: #8FAAB6;
  --in-navy-400: #648896;
  --in-navy-500: #456A79;
  --in-navy-600: #335563;
  --in-navy-700: #25414E;
  --in-navy-800: #1A2E37;
  --in-navy-900: #0F1C22;
  --in-navy-950: #081318;

  /* ---------- Papel · neutros quentes ---------- */
  --in-papel-0: #FFFFFF;
  --in-papel-50: #FAF8F5;
  --in-papel-100: #F4F1EC;
  --in-papel-200: #E8E3DC;
  --in-papel-300: #D5CDC2;
  --in-papel-400: #AFA597;
  --in-papel-500: #877E72;
  --in-papel-600: #655D53;
  --in-papel-700: #49433C;
  --in-papel-800: #302C27;
  --in-papel-900: #1D1A17;

  /* ---------- Status · reservados, sempre com ícone e palavra ---------- */
  --in-sucesso: #14583A;  --in-sucesso-fundo: #E5F3EC;  --in-sucesso-borda: #BFE0CE;
  --in-atencao: #6E4C00;  --in-atencao-fundo: #FCF1D6;  --in-atencao-borda: #EFD9A0;
  --in-erro: #9A2530;     --in-erro-fundo: #FBE8E9;     --in-erro-borda: #F0C3C7;
  --in-info: #1A5185;     --in-info-fundo: #E7EFF8;     --in-info-borda: #C2D6EC;

  /* ---------- Tipografia · Mona Sans (OFL) + Geist Mono (OFL) ---------- */
  --in-fonte: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --in-fonte-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --in-largura-display: 125%;  /* Expanded: título grande, ecoa o logo largo */
  --in-largura-titulo: 112%;
  --in-largura-texto: 100%;
  --in-peso-display: 760;
  --in-peso-titulo: 680;
  --in-peso-forte: 620;
  --in-peso-texto: 400;

  --in-texto-hero: clamp(40px, 6.4vw, 88px);
  --in-texto-h1: clamp(32px, 4.6vw, 60px);
  --in-texto-h2: clamp(26px, 3.4vw, 40px);
  --in-texto-h3: 20px;
  --in-texto-grande: 18px;
  --in-texto-corpo: 16px;
  --in-texto-pequeno: 14px;
  --in-texto-legenda: 12px;
  --in-texto-eyebrow: 11px;

  --in-entrelinha-display: 1.02;
  --in-entrelinha-titulo: 1.1;
  --in-entrelinha-texto: 1.55;
  --in-tracking-display: -0.025em;
  --in-tracking-eyebrow: 0.1em;

  /* ---------- Espaço · régua de 4 px ---------- */
  --in-espaco-1: 4px;
  --in-espaco-2: 8px;
  --in-espaco-3: 12px;
  --in-espaco-4: 16px;
  --in-espaco-5: 20px;
  --in-espaco-6: 24px;
  --in-espaco-8: 32px;
  --in-espaco-10: 40px;
  --in-espaco-12: 48px;
  --in-espaco-16: 64px;
  --in-espaco-24: 96px;
  --in-espaco-32: 128px;
  --in-container: 1320px;
  --in-gutter: clamp(16px, 4vw, 48px);
  --in-medida: 68ch;

  /* ---------- Forma ---------- */
  --in-raio-s: 4px;
  --in-raio-m: 6px;
  --in-raio-l: 12px;
  --in-raio-pilula: 999px;
  --in-sombra-s: 0 1px 1px rgba(8, 19, 24, 0.08), 0 2px 6px -2px rgba(8, 19, 24, 0.12);
  --in-sombra-m: 0 1px 1px rgba(8, 19, 24, 0.1), 0 18px 32px -18px rgba(8, 19, 24, 0.45);

  /* ---------- Movimento · só onde explica algo ---------- */
  --in-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --in-duracao-rapida: 150ms;
  --in-duracao-media: 300ms;
  --in-duracao-lenta: 700ms;

  /* ---------- Camadas ---------- */
  --in-z-fixo: 10;
  --in-z-sobreposto: 100;
  --in-z-modal: 1000;
}

/* ---------- Papéis · tema claro (padrão) ----------
 * Também em .in-claro: uma peça clara (papel timbrado, tela de celular) continua clara dentro
 * de uma página no tema escuro. */
:root,
.in-claro,
[data-tema="claro"] {
  color-scheme: light;

  /* Dados · ordem fixa, validada (CVD, luminosidade, contraste) */
  --in-dado-1: #126B9C;
  --in-dado-2: #E35A00;
  --in-dado-3: #178F6C;
  --in-dado-4: #B98500;
  --in-dado-5: #C9578A;
  --in-dado-6: #4C8526;
  --in-dado-7: #6A57C4;
  --in-dado-8: #CF4038;
  /* "Outros": da 9ª série em diante. Não existe dado-9: uma 9ª cor sempre bate numa das oito (v1.6). */
  --in-dado-outros: #877E72;

  /* Dados · escala divergente (v1.6): dois braços, laranja (abaixo) e azul (acima), e o meio neutro.
   * 1 é o extremo de baixo, 4 o meio, 7 o extremo de cima. Validada como rampa nos dois temas. */
  --in-dado-div-1: #8A3600;
  --in-dado-div-2: #E05A00;
  --in-dado-div-3: #FF8B3D;
  --in-dado-div-4: #D5CDC2;
  --in-dado-div-5: #6FA8CF;
  --in-dado-div-6: #2C84B5;
  --in-dado-div-7: #0D4F78;

  /* Presença (v1.6): situação de cada pessoa no dia, sempre com ícone e palavra. Cores das séries,
   * distribuídas para que vizinhos na ordem da legenda se separem (CVD e visão normal). */
  --in-presenca-ponto: var(--in-dado-3);
  --in-presenca-almoco: var(--in-dado-2);
  --in-presenca-saiu: var(--in-dado-7);
  --in-presenca-ferias: var(--in-dado-4);
  --in-presenca-folga: var(--in-dado-5);
  --in-presenca-dispensa: var(--in-dado-6);
  --in-presenca-afastado: var(--in-dado-1);
  --in-presenca-falta: var(--in-dado-8);

  --in-texto: var(--in-navy-900);          /* 15,4:1 sobre papel 100 */
  --in-texto-2: var(--in-navy-500);        /* 5,2:1 sobre papel 100 */
  --in-texto-inverso: var(--in-papel-50);
  --in-link: var(--in-laranja-700);
  --in-superficie: var(--in-papel-100);
  --in-superficie-2: var(--in-papel-50);
  --in-superficie-elevada: var(--in-papel-0);
  --in-superficie-invertida: var(--in-navy-900);
  --in-borda: rgba(15, 28, 34, 0.14);
  --in-borda-forte: rgba(15, 28, 34, 0.28);
  --in-acao: var(--in-laranja);            /* botão principal */
  /* Branco sobre o laranja: 2,9:1, abaixo do AA. Decisão da marca (07/11/2026) só para rótulo
   * de botão, curto e em peso 600 ou mais; texto corrido sobre laranja continua navy 950. */
  --in-acao-texto: var(--in-branco);
  --in-acao-hover: var(--in-laranja-600);
  --in-destaque: var(--in-laranja);
  --in-foco: var(--in-navy-900);
  --in-logo-lb: var(--in-navy);            /* logo D3 · "LB" (aprovado em 05/11) */
  --in-logo-in: var(--in-laranja);         /* logo D3 · "in" em destaque */
  --in-logo-a: var(--in-laranja);          /* legado (logo de 2022): "LB" e "n" */
  --in-logo-i: var(--in-navy);             /* legado (logo de 2022): o "i" */
  --in-malha-linha: rgba(37, 65, 78, 0.12);
  --in-holofote: rgba(255, 105, 0, 0.2);  /* luz do efeito holofote (in-efeitos) */
}

.in-escuro,
[data-tema="escuro"] {
  color-scheme: dark;
  --in-texto: var(--in-papel-50);
  /* Fundo escuro oficial: navy 900 (aprovado em 04/11; o 950 ficava "puxado pro preto") */
  --in-texto-2: var(--in-navy-200);        /* 10,5:1 sobre navy 900 */
  --in-texto-inverso: var(--in-navy-900);
  --in-link: var(--in-laranja);            /* 6,0:1 sobre navy 900 */
  --in-superficie: var(--in-navy-900);
  --in-superficie-2: var(--in-navy-800);
  --in-superficie-elevada: var(--in-navy-800);
  --in-superficie-invertida: var(--in-papel-100);
  --in-borda: rgba(250, 248, 245, 0.14);
  --in-borda-forte: rgba(250, 248, 245, 0.3);
  --in-foco: var(--in-laranja);
  --in-logo-lb: var(--in-creme);
  --in-logo-in: var(--in-laranja);
  --in-logo-a: var(--in-papel-50);
  --in-logo-i: var(--in-laranja);
  --in-malha-linha: rgba(250, 248, 245, 0.09);
  --in-holofote: rgba(255, 105, 0, 0.4);

  --in-dado-1: #2C84B5;
  --in-dado-2: #E66205;
  --in-dado-3: #1A9A75;
  --in-dado-4: #B98A0B;
  --in-dado-5: #C45F8B;
  --in-dado-6: #5A8F33;
  --in-dado-7: #7B6BD4;
  --in-dado-8: #D64A42;
  --in-dado-outros: #877E72;

  /* No escuro a rampa vira: o meio fica perto da superfície e as pontas acendem. */
  --in-dado-div-1: #FFB07A;
  --in-dado-div-2: #E66205;
  --in-dado-div-3: #A84A12;
  --in-dado-div-4: #4A4540;
  --in-dado-div-5: #2C6A90;
  --in-dado-div-6: #4C93C2;
  --in-dado-div-7: #A3CDEA;

  /* Presença: repetida aqui porque var() resolve onde é declarada (senão o escuro herdaria o claro). */
  --in-presenca-ponto: var(--in-dado-3);
  --in-presenca-almoco: var(--in-dado-2);
  --in-presenca-saiu: var(--in-dado-7);
  --in-presenca-ferias: var(--in-dado-4);
  --in-presenca-folga: var(--in-dado-5);
  --in-presenca-dispensa: var(--in-dado-6);
  --in-presenca-afastado: var(--in-dado-1);
  --in-presenca-falta: var(--in-dado-8);
}