/* ============================================================
   Zulex Atende — Design Tokens
   Cores, tipografia, espaçamento, raios, sombras, transições.
   Importe em qualquer projeto que use a identidade Zulex.
   ============================================================ */

/* ---------- Fontes ------------------------------------------ */
/* Utendo (display/títulos) é uma fonte proprietária da Zulex.
   Os arquivos NÃO estão disponíveis neste pacote — incluímos um
   fallback público (Plus Jakarta Sans) que segue o mesmo
   sentimento geométrico-arredondado. Substituir pelos arquivos
   reais (woff2) em fonts/ assim que disponíveis. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* @font-face — quando os arquivos Utendo estiverem em fonts/,
   descomente este bloco:
@font-face {
  font-family: 'Utendo';
  src: url('./fonts/Utendo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Utendo';
  src: url('./fonts/Utendo-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Utendo';
  src: url('./fonts/Utendo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* ===================================================
     PALETA DE MARCA
     =================================================== */

  /* Azul primário (a cor que define a Zulex) */
  --zx-blue-50:   #eff6ff;
  --zx-blue-100:  #dbeafe;
  --zx-blue-200:  #bfdbfe;
  --zx-blue-300:  #93c5fd;
  --zx-blue-400:  #60a5fa;
  --zx-blue-500:  #3b82f6;   /* primary           */
  --zx-blue-600:  #2563eb;   /* primary-hover     */
  --zx-blue-700:  #1d4ed8;
  --zx-blue-800:  #1e40af;
  --zx-blue-900:  #1e3a8a;

  --zx-primary:        var(--zx-blue-500);
  --zx-primary-hover:  var(--zx-blue-600);
  --zx-primary-press:  var(--zx-blue-700);
  --zx-primary-soft:   var(--zx-blue-50);
  --zx-primary-shadow: rgba(59, 130, 246, 0.22);

  /* Accent ciano (highlights, gradientes, “ar”) */
  --zx-cyan:          #4DD9FF;
  --zx-cyan-soft:     rgba(77, 217, 255, 0.10);

  /* Tom escuro (app, footer/hero alternativo) */
  --zx-ink-900:       #0c1523;  /* bg-dark / canvas escuro */
  --zx-ink-800:       #16212f;  /* card escuro             */
  --zx-ink-700:       #1f2d3f;  /* hover escuro            */
  --zx-ink-600:       #2a3a4f;

  /* Neutros */
  --zx-white:         #ffffff;
  --zx-gray-50:       #f9fafb;
  --zx-gray-100:      #f3f4f6;
  --zx-gray-200:      #e5e7eb;   /* border          */
  --zx-gray-300:      #d1d5db;   /* border-strong   */
  --zx-gray-400:      #9ca3af;
  --zx-gray-500:      #6b7280;   /* text-tertiary   */
  --zx-gray-600:      #4b5563;
  --zx-gray-700:      #363636;   /* text-secondary  */
  --zx-gray-800:      #1f2937;
  --zx-gray-900:      #1C1C1C;   /* text-primary    */

  /* Cores semânticas */
  --zx-success:       #22c55e;
  --zx-success-soft:  rgba(34, 197, 94, 0.15);
  --zx-success-ink:   #15803d;

  --zx-warning:       #f59e0b;
  --zx-warning-soft:  rgba(245, 158, 11, 0.15);

  --zx-error:         #dc2626;
  --zx-error-soft:    rgba(220, 38, 38, 0.10);

  --zx-whatsapp:      #25D366;     /* contato comercial flutuante */

  /* ===================================================
     SUPERFÍCIES (semânticas — modo claro)
     =================================================== */
  --zx-bg-page:       var(--zx-white);
  --zx-bg-card:       var(--zx-white);
  --zx-bg-soft:       #e9f1fb;
  --zx-bg-band:       linear-gradient(180deg, #e1ecf9 0%, #f1f5fb 100%);
  --zx-bg-band-border: rgba(59, 130, 246, 0.14);   /* seções “respiro” */
  --zx-bg-dark:       var(--zx-ink-900);
  --zx-bg-dark-card:  var(--zx-ink-800);

  --zx-fg-1:          var(--zx-gray-900);  /* texto principal      */
  --zx-fg-2:          var(--zx-gray-700);  /* corpo / parágrafo    */
  --zx-fg-3:          var(--zx-gray-500);  /* legenda / meta       */
  --zx-fg-on-primary: var(--zx-white);
  --zx-fg-on-dark:    #e6edf5;
  --zx-fg-on-dark-2:  #b4c2d4;

  --zx-border:        var(--zx-gray-200);
  --zx-border-strong: var(--zx-gray-300);
  --zx-border-dark:   rgba(255, 255, 255, 0.12);

  /* ===================================================
     TIPOGRAFIA
     =================================================== */
  --zx-font-display: 'Utendo', 'Plus Jakarta Sans', 'Inter',
                     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zx-font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, sans-serif;
  --zx-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fluida (clamp min-pref-max) — pensada para 1200px max */
  --zx-text-xs:   0.75rem;     /* 12 */
  --zx-text-sm:   0.875rem;    /* 14 */
  --zx-text-base: 1rem;        /* 16 */
  --zx-text-md:   1.0625rem;   /* 17 */
  --zx-text-lg:   1.125rem;    /* 18 */
  --zx-text-xl:   1.25rem;     /* 20 */
  --zx-text-2xl:  1.5rem;      /* 24 */
  --zx-text-3xl:  1.875rem;    /* 30 */
  --zx-text-4xl:  2.25rem;     /* 36 */
  --zx-text-5xl:  3rem;        /* 48 */
  --zx-text-6xl:  3.5rem;      /* 56 — hero */

  /* Body lê com line-height generoso pra um tom “respiro+acolhedor” */
  --zx-leading-tight: 1.2;
  --zx-leading-snug:  1.35;
  --zx-leading-body:  1.6;
  --zx-leading-loose: 1.75;

  --zx-tracking-tight:  -0.02em;
  --zx-tracking-normal:  0;
  --zx-tracking-wide:    0.06em;
  --zx-tracking-eyebrow: 0.08em;

  /* ===================================================
     RAIOS, SOMBRAS, ESPAÇO, TRANSIÇÃO
     =================================================== */
  --zx-radius-xs:   4px;
  --zx-radius-sm:   6px;
  --zx-radius-md:   12px;   /* padrão de botões/inputs */
  --zx-radius-lg:   16px;   /* cards / mockup hero     */
  --zx-radius-xl:   24px;
  --zx-radius-full: 999px;

  --zx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --zx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --zx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --zx-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --zx-shadow-xl: 0 24px 48px rgba(59, 130, 246, 0.22),
                  0 4px 12px rgba(15, 23, 42, 0.06);
  --zx-shadow-primary: 0 8px 24px var(--zx-primary-shadow);
  --zx-shadow-focus:   0 0 0 4px rgba(59, 130, 246, 0.18);

  /* Spacing — escala de 4px */
  --zx-space-1:  4px;
  --zx-space-2:  8px;
  --zx-space-3:  12px;
  --zx-space-4:  16px;
  --zx-space-5:  20px;
  --zx-space-6:  24px;
  --zx-space-8:  32px;
  --zx-space-10: 40px;
  --zx-space-12: 48px;
  --zx-space-16: 64px;
  --zx-space-20: 80px;
  --zx-space-24: 96px;     /* respiro padrão entre seções    */

  /* Transições — easing rápido (UI) e suave (cartões/hover lift) */
  --zx-transition-fast:  0.15s ease;
  --zx-transition:       0.20s ease;
  --zx-transition-slow:  0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --zx-container-max:  1200px;
  --zx-container-pad:  24px;

  /* ===================================================
     GRADIENTES DE MARCA
     =================================================== */
  --zx-gradient-brand:   linear-gradient(135deg, var(--zx-blue-500), var(--zx-cyan));
  --zx-gradient-deep:    linear-gradient(135deg, var(--zx-blue-500), #1d4ed8);
  --zx-gradient-spotlight: linear-gradient(140deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  --zx-gradient-trial:   linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  --zx-gradient-beta:    linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --zx-gradient-hero:    linear-gradient(180deg, #ffffff 0%, var(--zx-blue-50) 100%);
  --zx-gradient-soft:    linear-gradient(135deg, rgba(59, 130, 246, 0.08),
                                                 rgba(77, 217, 255, 0.06));
}

/* ============================================================
   ESTILOS BASE — aplique no <body> ou root do app
   ============================================================ */
.zx-base, body.zx-base {
  font-family: var(--zx-font-body);
  font-size: var(--zx-text-base);
  line-height: var(--zx-leading-body);
  color: var(--zx-fg-1);
  background: var(--zx-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

/* ============================================================
   ROLES TIPOGRÁFICAS — use estas classes em vez de h1..h6 cru
   se quiser estilo consistente sem depender da hierarquia DOM
   ============================================================ */
.zx-h1, .zx-display {
  font-family: var(--zx-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, var(--zx-text-6xl));
  line-height: var(--zx-leading-tight);
  letter-spacing: var(--zx-tracking-tight);
  margin: 0 0 var(--zx-space-5);
  text-wrap: balance;
  color: var(--zx-fg-1);
}
.zx-h2 {
  font-family: var(--zx-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, var(--zx-text-4xl));
  line-height: var(--zx-leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--zx-space-4);
  text-wrap: balance;
  color: var(--zx-fg-1);
}
.zx-h3 {
  font-family: var(--zx-font-display);
  font-weight: 600;
  font-size: var(--zx-text-2xl);
  line-height: var(--zx-leading-snug);
  margin: 0 0 var(--zx-space-3);
  color: var(--zx-fg-1);
}
.zx-h4 {
  font-family: var(--zx-font-display);
  font-weight: 600;
  font-size: var(--zx-text-lg);
  line-height: var(--zx-leading-snug);
  margin: 0 0 var(--zx-space-3);
  color: var(--zx-fg-1);
}
.zx-p, .zx-body {
  font-family: var(--zx-font-body);
  font-size: var(--zx-text-base);
  line-height: var(--zx-leading-body);
  color: var(--zx-fg-2);
  margin: 0 0 var(--zx-space-4);
  text-wrap: pretty;
}
.zx-lead {
  font-family: var(--zx-font-body);
  font-size: clamp(var(--zx-text-md), 1rem + 0.5vw, var(--zx-text-xl));
  line-height: 1.55;
  color: var(--zx-fg-2);
}
.zx-meta {
  font-family: var(--zx-font-body);
  font-size: var(--zx-text-sm);
  color: var(--zx-fg-3);
}
.zx-eyebrow {
  font-family: var(--zx-font-body);
  font-size: var(--zx-text-sm);
  font-weight: 600;
  color: var(--zx-primary);
  text-transform: uppercase;
  letter-spacing: var(--zx-tracking-eyebrow);
}
.zx-pill-eyebrow {                          /* eyebrow em pílula azul-claro */
  display: inline-flex;
  align-items: center;
  gap: var(--zx-space-2);
  background: rgba(59, 130, 246, 0.08);
  color: var(--zx-primary);
  padding: 6px 14px;
  border-radius: var(--zx-radius-full);
  font-size: var(--zx-text-sm);
  font-weight: 600;
}
.zx-mono {
  font-family: var(--zx-font-mono);
  font-size: 0.95em;
}