/* =========================================================
   TOKENS | LP C · Autoridade Local · Furtado Assunção Advocacia Previdenciária
   Única fonte de verdade. main.css usa somente estas variáveis.
   ========================================================= */

:root {
  /* ---------- Cor: primitivas ---------- */
  /* Grafite (neutros frios) */
  --graph-0:   #FFFFFF;
  --graph-50:  #F7F8F9;
  --graph-100: #F2F3F5; /* Superfície */
  --graph-200: #E4E7EB;
  --graph-300: #CDD2D8;
  --graph-400: #A3AAB3;
  --graph-500: #79818C;
  --graph-600: #5A616B;
  --graph-700: #40464E;
  --graph-800: #2B2F35;
  --graph-900: #1C1F23; /* Grafite */
  --graph-950: #121417;

  /* Marca: Petróleo */
  --pet-50:  #E8F3F5;
  --pet-100: #C9E3E8;
  --pet-200: #95C8D1;
  --pet-300: #5FA9B6;
  --pet-400: #2F8A9B;
  --pet-500: #187084;
  --pet-600: #0F5A6B; /* Petróleo (marca) */
  --pet-700: #0C4958;
  --pet-800: #0A3946;
  --pet-900: #072833;

  /* Âmbar: SOMENTE estrelas, sempre com a nota em texto ao lado */
  --amber-400: #F2B01E;

  /* WhatsApp (verde oficial com texto grafite: AA/AAA) e status */
  --wa-500: #25D366;
  --wa-550: #1EB457; /* hover */
  --wa-600: #1BA14E; /* pressionado */
  --green-50: #E7F4EC;
  --green-700: #1E7A3E;
  --red-50: #FBEAE9;
  --red-700: #B3261E;

  /* ---------- Cor: semânticas ---------- */
  --color-bg:              var(--graph-0);
  --color-surface:         var(--graph-100);
  --color-surface-raised:  var(--graph-0);
  --color-surface-dark:    var(--graph-900);
  --color-text:            var(--graph-900);
  --color-text-muted:      var(--graph-600);
  --color-text-inverse:    var(--graph-0);
  --color-text-inverse-muted: var(--graph-400);
  --color-border:          var(--graph-200);
  --color-border-ui:       var(--graph-500);
  --color-border-inverse:  rgb(255 255 255 / 0.16);
  --color-brand:           var(--pet-600);
  --color-brand-hover:     var(--pet-700);
  --color-brand-soft:      var(--pet-50);
  --color-accent:          var(--amber-400);
  --color-on-brand:        var(--graph-0);
  --color-whatsapp:        var(--wa-500);
  --color-whatsapp-hover:  var(--wa-550);
  --color-whatsapp-active: var(--wa-600);
  --color-on-whatsapp:     var(--graph-900); /* Grafite: 8.34 sobre #25D366 */
  --color-success:         var(--green-700);
  --color-success-soft:    var(--green-50);
  --color-error:           var(--red-700);
  --color-error-soft:      var(--red-50);
  --color-star:            var(--amber-400);
  --color-focus:           var(--pet-500);
  --color-focus-inverse:   var(--pet-200);

  --glass-bg:      rgb(255 255 255 / 0.86);
  --glass-bg-dark: rgb(28 31 35 / 0.55);
  --glass-border:  rgb(255 255 255 / 0.5);
  --blur-nav:   blur(16px) saturate(140%);
  --blur-badge: blur(12px) saturate(140%);
  --overlay-hero: linear-gradient(180deg,
      rgb(18 20 23 / 0.15) 0%,
      rgb(18 20 23 / 0.35) 40%,
      rgb(18 20 23 / 0.92) 100%);
  --overlay-hero-side: linear-gradient(90deg, rgb(18 20 23 / 0.75) 0%, rgb(18 20 23 / 0) 70%);
  /* Trio recortado no hero (proporção do arquivo 1268×1241) */
  --trio-ratio: 1.02;
  --trio-w-m: 72%;          /* mobile: largura relativa ao cartão */
  --trio-right-m: -6%;      /* mobile: sangra à direita */
  --trio-top-m: calc(var(--nav-top) + var(--nav-h) + var(--space-8)); /* mobile: rostos entre o selo Google e os chips */
  --trio-mask-m: linear-gradient(180deg, #000 45%, transparent 85%);
  --trio-w: 50%;            /* desktop: largura relativa ao cartão */
  --trio-h-max: 88svh;      /* desktop: limita pela altura da tela */
  --trio-right: 6%;         /* desktop: centro-direita */
  --passo-n: 3rem;          /* círculo numerado dos passos (48px) */
  --pattern-line: rgb(255 255 255 / 0.06);

  /* ---------- Tipografia ---------- */
  --font-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;

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

  /* Escala Assertiva (H1 38 → 62px) */
  --fs-h1:      clamp(2.375rem, 1.6rem + 3.2vw, 3.875rem);
  --fs-h2:      clamp(1.875rem, 1.45rem + 1.6vw, 2.5rem);   /* 30 → 40 */
  --fs-h3:      clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* 19 → 22 */
  --fs-stat:    clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);     /* 40 → 60 */
  --fs-quote:   clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);    /* 24 → 34 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);    /* 17 → 20 */
  --fs-body:    clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* 17 → 18 */
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-chip:    0.8125rem;
  --fs-logo:    1rem;
  --fs-nav-mobile: 1.75rem;
  --fs-serif-boost: 1.08em; /* Instrument Serif tem olho menor que Geist */

  --lh-h1: 1.04;
  --lh-h2: 1.1;
  --lh-h3: 1.3;
  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-lead: 1.5;

  --ls-h1: -0.035em;
  --ls-h2: -0.03em;
  --ls-h3: -0.015em;
  --ls-caps: 0.08em;
  --ls-ui: -0.005em;

  --measure: 65ch;
  --measure-h1: 16ch;
  --measure-h2: 20ch;
  --measure-lead: 36em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;
  --section-y: clamp(4rem, 2.5rem + 5vw, 7.5rem);

  /* ---------- Layout ---------- */
  --container: 77.5rem;
  --container-narrow: 47.5rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  --frame-inset: clamp(1rem, 0.6rem + 1vw, 1.5rem);  /* 16 → 24: margem do hero emoldurado */
  --nav-top: 1rem;
  --nav-h: 3.5rem;
  --nav-max: 72rem;
  --hero-min-h: calc(100svh - var(--frame-inset) * 2);
  --hero-max-h: 54rem;
  --bottom-bar-h: 4.75rem;
  --tap-min: 2.75rem;
  --btn-h: 3.125rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2.75rem;
  --dot: 0.5rem;
  --map-min-h: 28rem;
  --slot-label-max: 16rem;

  /* ---------- Bordas e raio ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --radius-card: 16px;
  --radius-frame: 28px;
  --radius-pill: 999px;

  /* ---------- Sombra ---------- */
  --shadow-1: 0 1px 2px rgb(28 31 35 / 0.06), 0 2px 8px rgb(28 31 35 / 0.04);
  --shadow-2: 0 16px 40px -16px rgb(15 90 107 / 0.35);
  --shadow-pin: drop-shadow(0 4px 8px rgb(15 90 107 / 0.35));

  /* ---------- Motion ---------- */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Assinatura AdvPages ---------- */
  --made-by-size: 1.75rem;
  --made-by-scale: 1.12;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-overlay: 2;
  --z-bottom-bar: 40;
  --z-header: 50;
  --z-modal: 100;
}