/* Kliente 360 — design tokens
 * Direção: consultoria especializada premium + corporativo + moderno-tech.
 * Apple (base), Google (acento), Salesforce (confiança).
 */

/* Fontes self-hosted — latin subset (cobre PT/EN/ES). Inter v20 e
 * JetBrains Mono v24 são fontes variáveis, então 1 arquivo serve todos
 * os pesos. font-display: swap pra não bloquear render.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-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 {
  /* --- Cores --- */
  /* Tinta (texto e UI escura) */
  --ink-900: #0a0a0a;
  --ink-800: #1d1d1f;
  --ink-600: #424245;
  --ink-400: #6e6e73;
  --ink-300: #86868b;

  /* Neutros / fundos */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --bg-dark: #0a0a0a;
  --bg-dark-alt: #1d1d1f;
  --line: #e5e5e7;
  --line-strong: #d2d2d7;

  /* Acento — verde Kliente
   * Distinção importante:
   * - --logo-green = #009900 (sagrado, usado SOMENTE no logo / dots).
   * - --color-accent = #007A3D (verde editorial, usado em toda a UI).
   * Estratégia adotada por marcas premium: cor do logo ≠ cor de UI.
   */
  --green-50:  #e8f5ec;
  --green-100: #c8e6d0;
  --green-300: #4f9e6b;
  --green-500: #007a3d;  /* verde UI canônico (editorial) */
  --green-600: #006633;
  --green-700: #005c32;  /* hover / emphasis */
  --green-900: #003d24;  /* fundos escuros com identidade */
  --logo-green: #009900; /* só para o wordmark/dots originais */

  /* Cores secundárias — uma por pilar (aparecem só dentro da seção do pilar).
   * Variantes: base / deep (hover/emphasis) / soft (background tint) /
   * on-dark (versão com contraste WCAG AA em fundo escuro). */
  --c-salesforce:         #0B5394;
  --c-salesforce-deep:    #07355f;
  --c-salesforce-soft:    #e8eff7;
  --c-data:               #C9A227;
  --c-data-deep:          #8a6f15;
  --c-data-darker:        #5d4a0e;
  --c-data-soft:          #fbf3dc;
  --c-ai:                 #6D28D9;
  --c-ai-deep:            #4c1d95;
  --c-ai-soft:            #ede4fd;
  --c-ai-on-dark:         #A78BFA;  /* violeta clarito p/ AA em fundo escuro */

  /* Texto e linhas sobre fundo escuro (consistência cross-section) */
  --fg-on-dark:           rgba(255, 255, 255, 1);
  --fg-on-dark-strong:    rgba(255, 255, 255, 0.92);
  --fg-on-dark-muted:     rgba(255, 255, 255, 0.75);
  --fg-on-dark-subtle:    rgba(255, 255, 255, 0.4);
  --line-on-dark:         rgba(255, 255, 255, 0.25);
  --line-on-dark-hover:   rgba(255, 255, 255, 0.4);
  --bg-on-dark-hover:     rgba(255, 255, 255, 0.08);

  /* Semânticos */
  --color-fg: var(--ink-900);
  --color-fg-muted: var(--ink-400);
  --color-bg: var(--bg);
  --color-bg-alt: var(--bg-alt);
  --color-line: var(--line);
  --color-accent: var(--green-500);
  --color-accent-hover: var(--green-700);
  --color-accent-soft: var(--green-50);

  /* Fundo escuro alternativo — "alma corporativa premium" sem o gelado do preto puro.
   * Resgatado da paleta antiga (Navy #06073E). Uso opcional em hero ou seção de IA. */
  --bg-deep: #06073E;

  /* --- Tipografia --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida (clamp para responsividade sem media query) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-h4: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-h3: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --fs-h2: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fs-h1: clamp(3rem, 2rem + 5vw, 6rem);

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

  --ls-tight: -0.02em;
  --ls-tighter: -0.035em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* --- Espaçamentos (escala 4) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 2vw, 2rem);

  /* --- Radius --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Elevação (sombras sutis, estilo Apple) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.12);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}