/* ==========================================================================
   ⚠ CÓPIA VENDORIZADA — não é a fonte de verdade deste arquivo.
   Original: "Nova Identidade 2026/css/design-tokens.css" (copiado 2026-08-17).
   Copiado pra dentro desta landing pra ela funcionar sozinha (aberta direto
   por duplo clique, movida de pasta, zipada e enviada pra alguém, hospedada
   isolada em produção) sem depender de um caminho relativo "../Nova
   Identidade 2026/..." que pode falhar dependendo de como o arquivo é aberto.
   Se o Design System mudar, resincronizar manualmente (ou perguntar pro
   Claude "resincroniza os CSS vendorizados da landing-puma-secadores-dps").
   ========================================================================== */
/* ==========================================================================
   INDPARTS — BRAND SYSTEM 2026
   design-tokens.css — FONTE ÚNICA DE VERDADE

   Fase 2 · Digital Design System (BETA / em aprovação)
   Reestruturado nesta fase em 15 blocos numerados. Todos os tokens de nome
   antigo (Fase 1: --ink, --accent, --surface, --font-display, --radius-sm...)
   foram MANTIDOS com o mesmo valor — 01-brand-foundations.html consome este
   arquivo e não pode quebrar. Os nomes novos pedidos nesta fase (--color-*,
   --font-sans, --text-*, --space-*...) foram adicionados como a camada
   semântica canônica, e os nomes antigos viraram aliases para eles.

   Regra de origem: nenhum valor de cor institucional foi inventado.
   --ind-blue / --ind-gray são as duas cores oficiais do guia de marca.
   A rampa tonal completa (bloco 02) é a mesma já usada e parcialmente
   aprovada na Fase 1 — ver 01-brand-foundations.html §06 para o histórico
   de aprovação (segue pendente formalização final do cliente).
   ========================================================================== */


/* ==========================================================================
   01 · CORE COLORS — cores institucionais, fonte de verdade, não mexer
   ========================================================================== */
:root{
  --ind-blue:  #334570;
  --ind-gray:  #4B4B4D;
  --ind-white: #FFFFFF;
}


/* ==========================================================================
   02 · COLOR SCALE — rampa tonal completa (extensão pendente de aprovação
   formal do cliente, ver histórico em 01-brand-foundations.html §06)
   ========================================================================== */
:root{
  /* Paleta trocada a pedido explícito do usuário (2026-08-17, mesma sessão) —
     "gostei mais dessas cores, quero que seja assim", referência direta ao
     preview.html feito por ele mesmo via GPT. Deixa de seguir a rampa
     derivada de --ind-blue; --blue-600 aqui NÃO é mais igual a --ind-blue
     (ver bloco 01 — a cor institucional do logo continua registrada lá,
     só não é mais a base da rampa desta landing). */
  --blue-50:  #EAF4FF;
  --blue-100: #D6EAFF;
  --blue-200: #ADD4FF;
  --blue-300: #7DBBFF;
  --blue-400: #4AA0FF;
  --blue-500: #1891FF;
  --blue-600: #0875E1;
  --blue-700: #005FC7;
  --blue-800: #0D2B52;
  --blue-900: #071A33;
  --blue-950: #061426;

  --gray-50:  #F4F4F4;
  --gray-100: #EEF0F0;
  --gray-200: #E6E6E6;
  --gray-300: #CDCDCD;
  --gray-400: #ACACAD;
  --gray-500: #88888A;
  --gray-600: #69696C; /* interpolado HSL entre 500 e 700 — ver Fase 1 §06 */
  --gray-700: #4B4B4D; /* = --ind-gray, exato, não alterado */
  --gray-800: #343436;
  --gray-900: #272728;
}


/* ==========================================================================
   03 · SEMANTIC TOKENS — cor física → função. Nomes novos (canônicos desta
   fase) primeiro; nomes antigos da Fase 1 na sequência, como alias exato
   (mesmo valor) para não quebrar 01-brand-foundations.html.
   ========================================================================== */
:root{
  /* --- canônicos Fase 2 --- */
  --color-bg:             #F5F7FA;
  --color-surface:        var(--ind-white);
  --color-surface-subtle: #EEF2F6;
  --color-text:           #0D2038;
  --color-text-muted:     #657387;
  --color-text-inverse:   #FFFFFF;
  --color-border:         rgba(13,32,56,.14);
  --color-border-strong:  rgba(13,32,56,.38);
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-focus:          var(--blue-500);

  /* uso restrito — texto/valor técnico e link, nunca fundo decorativo */
  --color-technical: var(--gray-700);
  --color-data:       var(--blue-600);
  --color-link:        var(--blue-500);

  /* --- aliases Fase 1 (mesmo valor, não remover — 01-brand-foundations.html depende) --- */
  --bg:          var(--color-bg);
  --surface:     var(--color-surface);
  --surface-2:   var(--color-surface-subtle);
  --ink:         var(--color-text);
  --ink-900:     var(--blue-900);
  --ink-soft:    var(--color-text-muted);
  --ink-faint:   #868FA0;
  --steel:       var(--gray-700);
  --steel-soft:  var(--gray-100);
  --line:        var(--color-border);
  --line-strong: var(--color-border-strong);
  --accent:      var(--blue-500);
  --accent-ink:  #2A4568;
  --accent-soft: var(--blue-50);
  --accent-on-dark: var(--blue-400);
}

/* --- Cores funcionais de interface — NÃO são cores de identidade Indparts.
   Uso restrito a estado de sistema (sucesso/aviso/erro/info), nunca fundo
   decorativo de campanha, nunca competem com o Azul Indparts. Todas passam
   contraste WCAG AA sobre --color-surface. --- */
:root{
  --color-success:      #1E824C; --color-success-bg: #E5F3EC;
  --color-warning:      #B45309; --color-warning-bg: #FBEDDD;
  --color-error:        #B3261E; --color-error-bg:   #FBEAE9;
  --color-info:         var(--blue-500); --color-info-bg: var(--blue-50);
  --color-signal:       #17B37A; --color-signal-bg:  #E3F7EE; /* indicador funcional pontual, não cor de marca */

  /* aliases Fase 1 */
  --good: var(--color-success); --good-soft: var(--color-success-bg);
  --bad:  var(--color-error);   --bad-soft:  var(--color-error-bg);
  --warn: var(--color-warning); --warn-soft: var(--color-warning-bg);
  --signal: var(--color-signal); --signal-soft: var(--color-signal-bg);
}


/* ==========================================================================
   04 · TYPOGRAPHY — IBM Plex Sans (interface) + IBM Plex Mono (dados
   técnicos), aprovadas na Fase 1. Auto-hospedadas localmente (assets/fonts/, cópia vendorizada de Nova Identidade 2026/assets/digital/fonts/ — ver comentário no topo do arquivo).
   ========================================================================== */
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../assets/fonts/IBMPlexSans-Variable.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
}

:root{
  --font-sans: "IBM Plex Sans", ui-sans-serif, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* aliases Fase 1 */
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --fw-body:  var(--fw-regular);
  --fw-medium: var(--fw-medium);
  --fw-bold:   var(--fw-semibold);
  --fw-black:  var(--fw-bold);

  /* Type scale — desktop; ver bloco de responsividade em components.css
     para os clamp() mobile de cada uso real. */
  --text-display-xl: 64px;
  --text-display:     52px;
  --text-h1:           44px;
  --text-h2:           36px;
  --text-h3:           28px;
  --text-h4:           22px;
  --text-body-lg:      18px;
  --text-body:          16px;
  --text-body-sm:      14px;
  --text-caption:      12px;
  --text-overline:    11px;

  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body:      1.65;
}

/* Fonte legada — materiais antigos, documentada e preservada (ver Fase 1 §07) */
[data-type-route="myriad"]{
  --font-sans: "Myriad Pro", ui-sans-serif, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-display: var(--font-sans); --font-body: var(--font-sans);
  --fw-body:400; --fw-medium:600; --fw-bold:700; --fw-black:800;
}


/* ==========================================================================
   05 · SPACING — escala preservada da Fase 1, sem alteração
   ========================================================================== */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  /* aliases Fase 1 */
  --sp-1:var(--space-1); --sp-2:var(--space-2); --sp-3:var(--space-3); --sp-4:var(--space-4);
  --sp-5:var(--space-5); --sp-6:var(--space-6); --sp-7:var(--space-7); --sp-8:var(--space-8); --sp-9:var(--space-9);
}


/* ==========================================================================
   06 · SIZING — alturas de componente e alvos de toque
   ========================================================================== */
:root{
  --size-control-sm: 36px;
  --size-control-md: 44px; /* alvo mínimo de toque mobile, WCAG 2.5.8 */
  --size-control-lg: 52px;
  --size-touch-min:  44px;
  --size-container-lg: 1180px; /* = Fase 1 */
  --size-container-xl: 1280px;
}


/* ==========================================================================
   07 · RADIUS — 4 / 8 / 16, aprovado na Fase 1. Evitar 24/32 como padrão;
   pill (999px) só quando semanticamente necessário (status/filtro/toggle/tag)
   ========================================================================== */
:root{
  --radius-xs:  4px;  /* chips, tags, dados técnicos, inputs, tabelas, badges pequenos */
  --radius-sm:  8px;  /* cards, botões, dropdowns, componentes */
  --radius-lg: 16px;  /* containers grandes, painéis, hero media, seções especiais */
  --radius-pill: 999px; /* exceção semântica — não usar como padrão geral */

  --radius-xl: 24px; /* exceção pontual e justificada — ver Fase 1 §08, não usar por padrão */
  --radius-legacy-manual:  16px;
  --radius-legacy-landing: 4px;
}


/* ==========================================================================
   08 · BORDER — a Indparts depende de estrutura/grid/contraste/borda, não
   de sombra. 1px como padrão em toda a interface.
   ========================================================================== */
:root{
  --border-width: 1px;
  --border-subtle:  var(--color-border);        /* rgba(51,69,112,.16) */
  --border-default: var(--color-border-strong); /* rgba(51,69,112,.40) */
  --border-strong:  var(--color-text);           /* sólida, uso raro — ênfase máxima */
}


/* ==========================================================================
   09 · SHADOW — extremamente sutis. shadow-md só em modal/popover/dropdown/
   elemento realmente flutuante — cards normais não devem parecer flutuando.
   ========================================================================== */
:root{
  --shadow-xs: 0 1px 0 rgba(35,47,77,.06);
  --shadow-sm: 0 1px 2px rgba(35,47,77,.05), 0 8px 20px -12px rgba(35,47,77,.14);
  --shadow-md: 0 2px 4px rgba(35,47,77,.05), 0 16px 32px -16px rgba(35,47,77,.18);
}


/* ==========================================================================
   10 · GRID — 12 colunas desktop, 8 tablet, 4 mobile. Gutters responsivos.
   ========================================================================== */
:root{
  --grid-columns-desktop: 12;
  --grid-columns-tablet:   8;
  --grid-columns-mobile:   4;

  --container-max-xl: var(--size-container-xl); /* 1280px — desktop large */
  --container-max-lg: var(--size-container-lg); /* 1180px — desktop */

  --container-padding-inline: var(--space-5); /* 24px mobile/tablet */
  --gutter-mobile:  var(--space-4); /* 16px */
  --gutter-tablet:  var(--space-5); /* 24px */
  --gutter-desktop: var(--space-6); /* 32px */
}
@media (min-width:768px){ :root{ --container-padding-inline: var(--space-6); } }
@media (min-width:1024px){ :root{ --container-padding-inline: var(--space-7); } }


/* ==========================================================================
   11 · BREAKPOINTS — oficiais do projeto. CSS custom properties não são
   utilizáveis dentro de @media (limitação da spec CSS), então os mesmos
   valores estão espelhados em número puro nos @media de components.css e
   em Number no início de js/design-system.js — não redefinir em nenhuma
   página nova, sempre referenciar este bloco como fonte de verdade.
   ========================================================================== */
:root{
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}


/* ==========================================================================
   12 · Z-INDEX — escala centralizada, evita guerra de z-index por página
   ========================================================================== */
:root{
  --z-base:            0;
  --z-sticky:          60;
  --z-dropdown:        70;
  --z-fixed:           80;   /* whatsapp float, sticky mobile CTA */
  --z-modal-backdrop:  90;
  --z-modal:          100;
  --z-popover:        110;
  --z-toast:          120;
  --z-tooltip:        130;
}


/* ==========================================================================
   13 · MOTION — movimento só existe pra explicar fluxo/conexão/progressão/
   mudança de estado. Sem bounce, sem parallax, sem animação infinita sem função.
   ========================================================================== */
:root{
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --ease-enter:    cubic-bezier(.16,.84,.44,1);
  --ease-exit:     cubic-bezier(.6,0,.8,.2);

  /* aliases Fase 1 */
  --dur-fast: var(--duration-fast); --dur-base: var(--duration-base); --dur-slow: var(--duration-slow);

  /* DNA geométrico Nó/Conexão/Módulo — derivado do símbolo real na Fase 1,
     ver 01-brand-foundations.html §05. Reusado por .node/.connection/.module
     em components.css — não redesenhar essas proporções por página. */
  --grammar-node-ratio: 2.4;
  --grammar-line-signal-ratio: .33;
  --grammar-angle-primary: 16deg;
  --grammar-angle-joint: 96deg;
  --grammar-angle-branch: 33deg;
}
@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; }
}


/* ==========================================================================
   14 · FOCUS — nunca remover outline sem substituir. Token único reusado
   por todo elemento interativo do sistema.
   ========================================================================== */
:root{
  --focus-ring-color: var(--color-focus);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-surface), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}


/* ==========================================================================
   15 · ICONOGRAPHY — line icons, traço consistente, geometria simples.
   Nunca misturar bibliotecas. Nunca redesenhar o símbolo Indparts como ícone.
   ========================================================================== */
:root{
  --icon-xs: 16px; --icon-sm: 20px; --icon-md: 24px; --icon-lg: 32px; --icon-xl: 48px;
  --icon-stroke: 1.75px; /* faixa aprovada: 1.5–2px */
}


/* ==========================================================================
   Modo escuro — mesma lógica já usada no manual/landing. Documentado como
   NÃO obrigatoriamente uma funcionalidade institucional (ver Fase 2 §40) —
   existe aqui só para o demonstrativo de dark sections do playground.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1524; --surface:#111F35; --surface-2:#172943; --color-bg:#0B1524; --color-surface:#111F35; --color-surface-subtle:#172943;
    --ink:#EDF1F7; --ink-900:#0A1224; --ink-soft:#AEB8C8; --ink-faint:#7A8699; --color-text:#EDF1F7; --color-text-muted:#AEB8C8;
    --line:rgba(237,241,247,.12); --line-strong:rgba(124,163,224,.42); --color-border:rgba(237,241,247,.12); --color-border-strong:rgba(124,163,224,.42);
    --accent:#7CA3E0; --accent-ink:#A9C4EC; --accent-soft:rgba(124,163,224,.14); --color-primary:#7CA3E0; --color-focus:#7CA3E0;
    --steel:#AEB4BE; --steel-soft:rgba(174,180,190,.14);
    --shadow-xs:0 1px 0 rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.5);
    --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 16px 32px -16px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1524; --surface:#111F35; --surface-2:#172943; --color-bg:#0B1524; --color-surface:#111F35; --color-surface-subtle:#172943;
  --ink:#EDF1F7; --ink-900:#0A1224; --ink-soft:#AEB8C8; --ink-faint:#7A8699; --color-text:#EDF1F7; --color-text-muted:#AEB8C8;
  --line:rgba(237,241,247,.12); --line-strong:rgba(124,163,224,.42); --color-border:rgba(237,241,247,.12); --color-border-strong:rgba(124,163,224,.42);
  --accent:#7CA3E0; --accent-ink:#A9C4EC; --accent-soft:rgba(124,163,224,.14); --color-primary:#7CA3E0; --color-focus:#7CA3E0;
  --steel:#AEB4BE; --steel-soft:rgba(174,180,190,.14);
  --shadow-xs:0 1px 0 rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 16px 32px -16px rgba(0,0,0,.55);
}