/* ============================================================
   TOKENS — Simple Acc · funil de aplicação
   ------------------------------------------------------------
   ESTRUTURA (espaçamento, raios, escala de tipo, hover, sombras):
     base-fullsales/readme.md "VISUAL FOUNDATIONS" + base-fullsales/tokens/.
   CORES (revisão 30/09/2026, vídeo de ajustes do Daniel):
     "A nossa parece estar com cores mais mortas." O azul aço do brandbook
     (#3E5C8A) saiu do acento: entrou um azul vivo, que faz o papel do vermelho
     da Full Sales (destaque de título, ícone, CTA com brilho, hover).
     Navy do brandbook continua como base escura.
     Vermelho: só na faixa do topo e no "não é pra você" (pedido dele).
     Verde: "é pra você" e abas concluídas do formulário (pedido dele).
   CONFORMIDADE (base-fullsales/_adherence.oxlintrc.json):
     sem hex cru fora deste arquivo, sem px cru em componente, só Inter e Sora.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/Inter-Variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/Sora-Variable-latin.woff2") format("woff2");
}

:root {
  /* ==========================================================
     1 · PALETA
     ========================================================== */
  /* Base escura (brandbook) */
  --ink-950: #060b14;
  --midnight: #0a1626;
  --navy: #0e2138;
  --navy-2: #122b4a;

  /* Azul vivo: o acento */
  --blue: #2f6bff;
  --blue-600: #1f55e0;
  --blue-400: #5b8cff;
  --blue-300: #8fb0ff;
  --blue-100: #dde7ff;
  --blue-50: #eef3ff;

  /* Neutros */
  --white: #ffffff;
  --ice: #f3f6fb;
  --steel: #8197b6;
  --ink: #0f1622;
  --ink-soft: #3d4a5c;
  --muted: #677589;
  --line-light: #e4e9f1;
  --line: #1b2c46;

  /* Sinal */
  --red: #e5243b;
  --red-600: #c81b30;
  --red-50: #fff1f3;
  --red-border: rgba(229, 36, 59, 0.3);
  --green: #16a34a;
  --green-bright: #22c55e;
  --green-50: #effbf3;
  --green-border: rgba(22, 163, 74, 0.32);
  --signal-warn: #9a6b1f;
  --signal-warn-bg: #fbf5e9;
  --signal-error: #c81b30;
  --whatsapp: #25d366;
  --whatsapp-600: #1da851;
  --whatsapp-glow: rgba(37, 211, 102, 0.35);
  --shadow-whatsapp: 0 8px 28px var(--whatsapp-glow);
  --amber: #f5b945;
  --amber-border: rgba(245, 185, 69, 0.45);
  --amber-bg: rgba(245, 185, 69, 0.08);
  --size-booking: 900px; /* altura reservada para o calendário do GHL (medida no desktop) */

  /* ==========================================================
     2 · SUPERFÍCIES E TEXTO
     ========================================================== */
  --surface-page: var(--white);
  --surface-alt: var(--ice);
  --surface-card: var(--white);
  --surface-quote: #f5f7fb;
  --surface-input: #f8fafd;

  --surface-dark: var(--midnight);
  --surface-deep: var(--ink-950);
  --surface-dark-card: #0f1d33;
  --surface-dark-card-hover: #132542;

  --border: var(--line-light);
  --border-strong: #cfd8e6;
  --border-dark: rgba(143, 176, 255, 0.14);
  --border-dark-strong: rgba(143, 176, 255, 0.26);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--muted);
  --text-placeholder: #a7b3c5;
  --text-on-dark: rgba(255, 255, 255, 0.95);
  --text-on-dark-muted: rgba(226, 234, 248, 0.74);
  --text-on-dark-soft: rgba(226, 234, 248, 0.55);

  /* ==========================================================
     3 · ACENTO
     ========================================================== */
  --accent: var(--blue);
  --accent-hover: var(--blue-600);
  --accent-on-dark: var(--blue-400);
  --accent-tint: var(--blue-50);
  --accent-a06: rgba(47, 107, 255, 0.06);
  --accent-a12: rgba(47, 107, 255, 0.12);
  --accent-a18: rgba(47, 107, 255, 0.18);
  --accent-a30: rgba(47, 107, 255, 0.3);
  --accent-border: rgba(47, 107, 255, 0.3);
  --accent-glow: rgba(47, 107, 255, 0.45);

  /* ==========================================================
     4 · TIPOGRAFIA (escala exata de base-fullsales/tokens/typography.css)
     ========================================================== */
  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(1.5rem, 3.2vw, 2.7rem);
  --fs-finalcta: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.2rem);
  --fs-h3: 1.3rem;
  --fs-card-title: 1.1rem;
  --fs-stat: 2.2rem;
  --fs-body-lg: 1.05rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.92rem;
  --fs-small: 0.85rem;
  --fs-label: 0.78rem;
  --fs-eyebrow: 0.72rem;
  --fs-caption: 0.68rem;

  --lh-display: 1.08;
  --lh-h2: 1.18;
  --lh-h3: 1.3;
  --lh-body: 1.65;
  --lh-body-tight: 1.55;

  --ls-display: -0.025em;
  --ls-h2: -0.02em;
  --ls-eyebrow: 0.18em;
  --ls-caption: 0.1em;
  --ls-cta: 0.06em;
  --ls-wordmark: 0.26em;

  --fw-body: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ==========================================================
     5 · ESPAÇAMENTO E GRADE
     ========================================================== */
  --container: 1100px;
  --container-narrow: 820px;
  --container-pad: 24px;

  --section-y: 88px;
  --section-y-sm: 60px;
  --section-y-lg: 112px;

  --gap-grid: 20px;
  --gap-cards: 18px;
  --gap-inline: 10px;
  --gap-tight: 6px;

  --space-0: 2px;
  --space-05: 4px;
  --space-1: 8px;
  --space-1h: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;

  /* Medidas atômicas */
  --size-hairline: 1px;
  --size-rule: 2px;
  --size-rule-thick: 3px;
  --size-bar: 4px;
  --size-dot: 8px;
  --size-icon-sm: 12px;
  --size-icon: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 22px;
  --size-icon-xl: 26px;
  --size-radio: 18px;
  --size-badge: 24px;
  --size-tile-sm: 28px;
  --size-tile: 44px;
  --size-tile-lg: 48px;
  --size-avatar: 56px;
  --size-nav: 68px;
  --size-grid-cell: 34px;
  --size-aside: 360px;
  --size-case: 300px;
  --size-portrait: 250px;
  --size-connector: 48px;
  --size-modal: 540px;
  --size-fbar: 640px;
  --size-mes: 520px; /* largura de cada tabela de faturamento mensal */
  --size-wordmark: 150px;
  --size-wordmark-sm: 118px;
  --blur-glass: 14px;
  --blur-overlay: 6px;

  --pad-btn-y: 18px;
  --pad-btn-x: 30px;
  --pad-btn-sm-y: 12px;
  --pad-btn-sm-x: 20px;
  --pad-input-y: 15px;
  --pad-opt-y: 14px;

  --measure-display: 30ch;
  --measure-h2: 32ch;
  --measure-lead: 64ch;
  --measure-prose: 72ch;

  /* ==========================================================
     6 · RAIOS
     ========================================================== */
  --radius-xs: 7px;
  --radius-sm: 8px;
  --radius-input: 9px;
  --radius-btn: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ==========================================================
     7 · SOMBRAS E BRILHOS
     ========================================================== */
  --shadow-none: none;
  --shadow-card-hover: 0 10px 30px rgba(10, 22, 38, 0.08);
  --shadow-card-dark: 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-accent: 0 8px 28px var(--accent-glow);
  --shadow-accent-hover: 0 12px 36px rgba(47, 107, 255, 0.58);
  --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--accent-a18);
  --glow-text: 0 0 28px rgba(91, 140, 255, 0.55);
  --glow-accent-sm: 0 0 12px var(--accent-glow);
  --glow-accent-md: 0 0 14px var(--accent-glow);
  --glow-accent-lg: 0 0 30px var(--accent-glow);
  --glow-dot: 0 0 10px var(--accent-glow);
  --glow-green-md: 0 0 14px rgba(34, 197, 94, 0.45);
  --glow-green-lg: 0 0 28px rgba(34, 197, 94, 0.45);
  --shadow-portrait-hover: 0 18px 44px rgba(47, 107, 255, 0.28);
  --shadow-photo: 0 24px 60px rgba(47, 107, 255, 0.22);
  --shadow-guarantee: 0 30px 80px rgba(47, 107, 255, 0.18);
  --shadow-fbar: 0 10px 36px rgba(47, 107, 255, 0.5), 0 0 0 1px rgba(47, 107, 255, 0.3);

  /* Luz das seções escuras (o "degradê" da Full Sales, em azul) */
  --glow-hero:
    radial-gradient(55% 60% at 50% 0%, rgba(170, 196, 255, 0.2) 0%, transparent 62%),
    radial-gradient(70% 90% at 50% -10%, rgba(47, 107, 255, 0.28) 0%, transparent 60%);
  --glow-section: radial-gradient(60% 70% at 50% 0%, rgba(47, 107, 255, 0.2) 0%, transparent 65%);
  --glow-card: linear-gradient(160deg, rgba(47, 107, 255, 0.22) 0%, rgba(15, 29, 51, 0) 55%);

  /* ==========================================================
     8 · MOVIMENTO
     ========================================================== */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
  --dur-slow: 320ms;
  --lift-card: -4px;
  --lift-btn: -2px;
  --marquee-dur: 48s;
}

@media (max-width: 720px) {
  :root {
    --section-y: 64px;
    --section-y-lg: 76px;
    --container-pad: 18px;
    --size-case: 270px;
    --size-portrait: 220px;
    --size-booking: 1100px; /* no celular o widget empilha os horários embaixo */
  }
}