/* ==================================================================
   LUPE — DESIGN TOKENS
   Paleta extraída da logo oficial:
   azul-marinho do "LUPE" (#03338B), azul brilhante (#0A6BBD),
   verde do arco e do slogan (#3DA935), amarelo do arco (#F4C315).
   A faixa azul + verde da fachada e das paredes internas da loja
   vira o elemento gráfico de assinatura (.stripe).
   ================================================================== */
:root {
  /* Cores de marca */
  --c-navy-900: #04245f;
  --c-navy: #03338b;          /* primary */
  --c-blue-700: #0a4aa2;
  --c-blue: #0a6bbd;          /* secondary */
  --c-blue-300: #7fb3e3;
  --c-blue-100: #e7f0fa;
  --c-blue-50: #f3f7fc;
  --c-green: #3da935;         /* accent (decorativo) */
  --c-green-700: #1e7f2e;     /* verde com contraste p/ texto e botões */
  --c-green-800: #186a25;
  --c-green-100: #e8f5e4;
  --c-yellow: #f4c315;

  /* Semânticas */
  --c-primary: var(--c-navy);
  --c-secondary: var(--c-blue);
  --c-accent: var(--c-green);
  --c-bg: #ffffff;
  --c-surface: var(--c-blue-50);
  --c-surface-2: #eaf0f8;
  --c-text: #0d1a33;
  --c-muted: #4f5d77;
  --c-border: #dbe3ee;
  --c-border-strong: #c3cfe0;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #b9c8e6;
  --c-wa: var(--c-green-700);
  --c-wa-hover: var(--c-green-800);

  /* Tipografia */
  --f-heading: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-caption: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;        /* 15px */
  --fs-body: 1.0625rem;      /* 17px */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 3rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-button: 1rem;

  --lh-tight: 1.02;
  --lh-heading: 1.1;
  --lh-body: 1.6;

  /* Espaçamento */
  --s-xs: 0.25rem;
  --s-sm: 0.5rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2rem;
  --s-2xl: 3rem;
  --s-3xl: 4.5rem;
  --s-section: clamp(4rem, 2.8rem + 5vw, 7.5rem);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 72px;

  /* Raios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(4, 36, 95, 0.06);
  --sh-md: 0 6px 18px -6px rgba(4, 36, 95, 0.16);
  --sh-lg: 0 24px 48px -20px rgba(4, 36, 95, 0.28);

  /* Transições */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 250ms var(--ease);
  --t-slow: 600ms var(--ease);
}