/* =====================================================================
   DESIGN SYSTEM POSITIVO — TOKENS
   Institucional e e-commerce · marcas Positivo e Positivo Empresas

   Três camadas, nesta ordem:
     1. NÚCLEO   (:root)              — não muda entre marcas
     2. MARCA    ([data-brand="…"])   — o que uma marca decide
     3. CONTEXTO ([data-context="…"]) — densidade: institucional ou loja

   Origem dos valores:
     · Positivo  → código do site México (app/(site)/globals-site.css e
                   components/site/ui/*), lido em 09/09/2026
     · Empresas  → tema WordPress do projeto local positivo-empresas-novo
                   (wp-content/themes/positivotecnologia/styles/: variables.scss,
                   button.scss, typography.scss, form.scss, grid.scss,
                   components/*.scss), conferido igual ao CSS do site no ar
                   em 09/09/2026
   O que é PROPOSTA (não está em nenhum dos dois sites) leva o comentário
   [proposta] ao lado.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. NÚCLEO — igual para toda marca
   --------------------------------------------------------------------- */
:root {
  /* Tipografia ------------------------------------------------------ */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-10: 0.625rem;
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-30: 1.875rem;
  --text-36: 2.25rem;
  --text-48: 3rem;
  --text-60: 3.75rem;
  --text-72: 4.5rem;

  /* Escalas fluidas: celular → desktop, sem media query */
  --display-1: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);   /* 36 → 72 */
  --display-2: clamp(1.875rem, 1.1rem + 3.4vw, 3.75rem); /* 30 → 60 */
  --heading-1: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);   /* 30 → 48 */
  --heading-2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);  /* 24 → 36 */
  --heading-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20 → 24 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-eyebrow: 0.12em;
  --tracking-eyebrow-wide: 0.18em;

  --measure-title: 16ch;   /* título: até 16 caracteres por linha */
  --measure-lead: 54ch;    /* subtítulo */
  --measure-body: 64ch;    /* corpo */

  /* Espaçamento — base 4 px ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* Raios — a escala; qual raio cada peça usa é decisão de MARCA ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-4xl: 32px;
  --radius-pill: 9999px;

  /* Sombras — sempre em duas camadas ou com spread ≤ raio (REQ-MX-017) */
  --shadow-card-hover: 0 24px 60px -30px rgba(85, 102, 106, 0.45);
  --shadow-lift: 0 6px 14px -6px rgba(85, 102, 106, 0.2), 0 22px 48px -18px rgba(85, 102, 106, 0.35);
  --shadow-dark: 0 28px 70px -30px rgba(5, 5, 5, 0.6);
  --shadow-overlay: 0 40px 100px -30px rgba(5, 5, 5, 0.6);
  --shadow-menu: 0 28px 70px -30px rgba(5, 5, 5, 0.9);

  /* Motion ---------------------------------------------------------- */
  --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 150ms;    /* hover de cor, ícone */
  --dur-base: 300ms;     /* transição padrão de botão, chip, campo */
  --dur-drawer: 320ms;   /* cajón lateral */
  --dur-panel: 350ms;    /* painel de aba, menu */
  --dur-card: 500ms;     /* elevação de card */
  --dur-reveal: 600ms;   /* entrada ao rolar (500–700) */
  --dur-media: 700ms;    /* zoom de foto no hover */

  /* Layout ---------------------------------------------------------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --caja: 1280px;          /* a cápsula: largura máxima do conteúdo */
  --aire: 1.25rem;         /* respiro lateral; 2rem a partir de md */
  --section-y: 3.5rem;     /* ritmo vertical entre bandas; 8rem em md */
  --grid-gap: 0.75rem;     /* 1.25rem a partir de md */
  --touch: 44px;           /* alvo mínimo de toque */

  --z-header: 40;
  --z-menu: 50;
  --z-search: 60;
  --z-cortina: 70;
  --z-validacao: 100;

  /* Anatomia dos componentes — NÃO muda por marca --------------------- */
  --button-h-sm: 40px;
  --button-h: 48px;
  --button-h-lg: 56px;
  --button-px-sm: 16px;
  --button-px: 24px;
  --button-px-lg: 32px;
  --button-gap: 12px;
  --button-text-sm: var(--text-13);
  --button-text: var(--text-15);
  --button-text-lg: var(--text-16);
  --button-weight: var(--weight-semibold);
  --button-arrow: 28px;    /* a seta-em-círculo */

  --field-h: 48px;
  --field-h-sm: 44px;
  --field-px: 16px;
  --field-text: var(--text-14);

  --chip-h: 44px;
  --chip-px: 20px;

  --icon-size: 20px;

  /* Semânticos [proposta] — o site MX usa o roxo como sinal de atenção;
     para e-commerce (pagamento, estoque) o vermelho é a convenção que a
     pessoa reconhece. Iguais nas duas marcas. */
  --success: #157f4a;
  --warning: #b25e09;
  --danger: #b42318;
}

@media (min-width: 768px) {
  :root {
    --aire: 2rem;
    --section-y: 8rem;
    --grid-gap: 1.25rem;
  }
}

/* ---------------------------------------------------------------------
   2. MARCA — cada bloco declara TODOS os tokens de marca, para que um
   `data-brand` em qualquer elemento (não só no <html>) re-tematize a
   subárvore inteira. É o que permite mostrar as duas lado a lado.
   --------------------------------------------------------------------- */

/* Positivo (padrão) — do site México ---------------------------------- */
:root,
[data-brand="positivo"] {
  --brand-name: "Positivo";

  /* neutros */
  --paper: #ffffff;
  --ink: #0a0a0a;
  --night: #050505;        /* superfície escura */
  --surface-2: #eef1f2;    /* "cloud": fundo de tile, campo desabilitado */
  --surface-3: #e6eaeb;
  --mist: #6f8387;         /* texto terciário, fios */
  --mist-deep: #55666a;    /* texto secundário */
  --line: rgba(10, 10, 10, 0.15);
  --line-soft: rgba(10, 10, 10, 0.08);

  /* acentos — só em detalhe pequeno: link, ícone, chip, foco */
  --brand: #00a8e6;
  --brand-deep: #0284b8;
  /* [proposta] a cor de marca quando vira TEXTO sobre fundo claro: o ciano
     dá 2.7:1 sobre branco e o --brand-deep, 4.2:1 — nenhum passa AA em
     13 px. Este tom passa (5.5:1) e continua ciano. */
  --brand-text: #0270a0;
  --accent: #555092;
  --accent-2: #555092;

  /* botão primário */
  --button-primary-bg: var(--ink);
  --button-primary-fg: var(--paper);
  --button-primary-hover: var(--night);
  --button-border: 1px;

  /* botão secundário: fantasma com fio (o `ghost` do CTAButton) */
  --button-secondary-bg: transparent;
  --button-secondary-fg: var(--fg);
  --button-secondary-hover: color-mix(in srgb, var(--fg) 5%, transparent);
  --button-secondary-border: var(--line);
  --button-secondary-border-hover: color-mix(in srgb, var(--fg) 45%, transparent);

  /* campo: fio de 1 px na cor do fio */
  --field-border: var(--button-border);
  --field-border-color: var(--line);

  /* O brilho do card escuro: elipse no acento, como o card de linha e o
     cartão de campanha do site México. */
  --card-glow: radial-gradient(ellipse 70% 80% at 15% 60%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 62%);

  /* raios por peça */
  --radius-button: var(--radius-pill);
  --radius-field: var(--radius-md);        /* campo dentro de formulário */
  --radius-field-solo: var(--radius-pill); /* campo solto: busca, newsletter */
  --radius-chip: var(--radius-pill);
  --radius-card: var(--radius-3xl);        /* 28 px; 20 px no celular */
  --radius-card-sm: var(--radius-xl);
  --radius-panel: var(--radius-lg);        /* menu, toast, painel */
  --radius-check: 6px;

  /* título */
  --heading-weight: var(--weight-bold);
  --heading-leading: 1.05;
  --heading-tracking: var(--tracking-tight);

  /* ícone: o acabamento do traço */
  --icon-stroke: 1.5;
  --icon-cap: round;
  --icon-join: round;
}

/* Positivo Empresas — de positivoempresas.com.br ---------------------- */
[data-brand="empresas"] {
  --brand-name: "Positivo Empresas";

  --paper: #ffffff;
  --ink: #181818;          /* --color-black2 */
  --night: #2d2d2d;        /* --color-primary: fundo dos cards escuros */
  --surface-2: #f0f0f0;    /* --color-gray-100 */
  --surface-3: #ececec;    /* --color-secondary */
  --mist: #757575;         /* --color-gray-600 */
  --mist-deep: #53565a;    /* --color-black3 / --color-text-input */
  --line: #d8d8d8;         /* --color-gray-200 */
  --line-soft: #e1e1e1;    /* --color-gray-150 */

  --brand: #3b5d91;        /* azul-aço usado em link e foco */
  --brand-deep: #2c4670;
  --brand-text: #3b5d91;   /* o próprio azul-aço já dá 6.6:1 sobre branco */
  --accent: #5eaa4b;       /* --color-green (o hub IA usa o verde PSS #afca0b só nas páginas dele) */
  --accent-2: #9bb8d3;     /* azul claro Pantone 644 do manual (REQ-026 do projeto WP; fio do
                              content-card.gradient). O --color-green-ai #adccd0 é tinta de seção */

  --button-primary-bg: #515151;   /* --color-primary-light: o .button.primary */
  --button-primary-fg: #ffffff;
  --button-primary-hover: #000000;
  --button-border: 2px;           /* o .button do site tem fio de 2 px sempre */

  /* botão secundário: PREENCHIDO, não fantasma (.button.secondary do tema) */
  --button-secondary-bg: #d8d8d8;          /* --color-gray-200 */
  --button-secondary-fg: #515151;          /* --color-primary-light */
  --button-secondary-hover: #f0f0f0;       /* --color-gray-100 */
  --button-secondary-border: transparent;
  --button-secondary-border-hover: transparent;

  /* campo: .field input tem fio de 2 px em --color-gray-400 */
  --field-border: 2px;
  --field-border-color: #cdcdcd;

  /* cápsula: .container do grid.scss (o contexto e-commerce, declarado
     depois, continua vencendo com 1400) */
  --caja: 1300px;

  /* Nenhum. O card escuro do tema é cor chapada: `.content-card.black`,
     `.post-card1`, `.post-card2` e `.case-card` usam fundo sólido. Existe
     uma variante `.gradient` (5 usos), e é um LINEAR diagonal de #1a1a1a a
     #3b5d91 com fio Pantone 644 — nunca um brilho radial no acento. */
  --card-glow: none;

  --radius-button: 10px;
  --radius-field: 10px;
  --radius-field-solo: 10px;
  --radius-chip: 10px;
  --radius-card: 20px;
  --radius-card-sm: 16px;
  --radius-panel: 10px;
  --radius-check: 3px;

  --heading-weight: var(--weight-semibold);  /* .title do site é 600 */
  --heading-leading: 1.2;                    /* [proposta] o site usa 1.4 */
  --heading-tracking: -0.01em;

  --icon-stroke: 1.75;     /* [proposta] */
  --icon-cap: square;      /* [proposta] */
  --icon-join: miter;      /* [proposta] */
}

/* Papéis derivados — o que os componentes leem de verdade. Trocam de
   valor numa superfície escura sem que a marca mude. */
:root,
[data-brand] {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--mist-deep);
  --muted-2: var(--mist);
  --surface: var(--surface-2);
  --focus: var(--brand);
}

/* A superfície escura é UM lugar só no CSS. O card escuro entra aqui, e não
   numa segunda lista: quando `.ds-card--dark` tinha a própria cópia, ela
   esquecia os tokens do botão secundário e o botão sumia dentro do card.
   Um `var()` dentro de uma custom property é resolvido onde a propriedade é
   DECLARADA, então `--button-secondary-fg: var(--fg)` do `:root` já vale
   preto quando chega ao card, por mais escuro que ele seja. */
[data-surface="dark"],
.ds-card--dark {
  --bg: var(--night);
  --fg: var(--paper);
  --muted: rgba(255, 255, 255, 0.65);
  --muted-2: rgba(255, 255, 255, 0.45);
  --surface: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.2);
  --line-soft: rgba(255, 255, 255, 0.1);
  --button-primary-bg: var(--paper);
  --button-primary-fg: var(--ink);
  --button-primary-hover: var(--surface-2);
  --button-secondary-bg: transparent;      /* sobre escuro o secundário é fantasma nas duas marcas */
  --button-secondary-fg: var(--paper);
  --button-secondary-hover: rgba(255, 255, 255, 0.05);
  --button-secondary-border: rgba(255, 255, 255, 0.25);
  --button-secondary-border-hover: rgba(255, 255, 255, 0.5);
  --field-border-color: rgba(255, 255, 255, 0.25);
  --shadow-card-hover: var(--shadow-dark);
  --brand-text: var(--brand);   /* sobre escuro o ciano passa (7.5:1) */
}

/* ---------------------------------------------------------------------
   3. CONTEXTO — densidade, não identidade
   --------------------------------------------------------------------- */
:root,
[data-context="institucional"] {
  --context-name: "Institucional";
  --card-pad: var(--space-6);
  --card-title: var(--text-18);
  --card-radius: var(--radius-card);
  --product-cols-mobile: 2;
}

[data-context="ecommerce"] {
  --context-name: "E-commerce";
  --caja: 1400px;
  --section-y: 2.5rem;           /* py-10; md: py-16 */
  --card-pad: var(--space-5);
  --card-title: var(--text-15);
  --card-radius: var(--radius-card-sm);
}

@media (min-width: 768px) {
  [data-context="ecommerce"] {
    --section-y: 4rem;
  }
}