/* ============================================================
   CORE TECNOLOGIA — DESIGN TOKENS
   Fonte única da verdade para cores, tipografia, espaçamento,
   raios, sombras e breakpoints. Não usar valores "soltos" no
   restante do CSS — sempre referenciar estes tokens.
   ============================================================ */

:root {
  /* ---------- CORES DE MARCA ---------- */
  --color-primary:        #2563EB; /* Core Blue — CTAs, links, destaques */
  --color-primary-hover:  #1D4FD7; /* Hover do azul principal */
  --color-primary-active:  #1A45BE;
  --color-bright:         #168BFF; /* Core Bright Blue — gradientes, hover */
  --color-navy:           #0B1F3A; /* Core Navy — textos, seções institucionais */
  --color-ink:            #0B1220; /* Núcleo mais profundo — heros/footer */

  /* ---------- NEUTROS ---------- */
  --color-text:           #0B1F3A; /* Texto principal (navy) */
  --color-text-secondary: #64748B; /* Core Gray — descrições, metadados */
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;
  --color-text-inverse-soft: rgba(255,255,255,.72);

  --color-bg:             #FFFFFF; /* Fundo principal */
  --color-bg-subtle:      #F8FAFC; /* Alternância de seções claras */
  --color-bg-muted:       #F1F5F9; /* Core Gray Light — cards, separações */
  --color-surface:        #FFFFFF; /* Cards */
  --color-border:         #E2E8F0; /* Borda padrão de cards/inputs */
  --color-border-strong:  #CBD5E1;

  /* ---------- CORES SEMÂNTICAS ---------- */
  --color-success:        #10B981;
  --color-success-soft:   #D1FAE5;
  --color-warning:        #F59E0B;
  --color-warning-soft:   #FEF3C7;
  --color-danger:         #EF4444;
  --color-danger-soft:    #FEE2E2;
  --color-info:           #168BFF;

  /* ---------- IDENTIDADE POR PRODUTO SaaS ----------
     Cada SaaS tem uma cor de identificação, mantendo o mesmo
     sistema visual da Core. */
  --saas-followup:   #10B981; /* verde */
  --saas-legal:      #7C3AED; /* roxo  */
  --saas-billing:    #2563EB; /* azul  */
  --saas-compliance: #0EA5A5; /* teal  */
  --saas-people:     #F97316; /* laranja */
  --saas-insights:   #EC4899; /* rosa  */
  --saas-estoque:        #4F46E5; /* índigo — gestão */
  --saas-financeiro:     #059669; /* esmeralda — financeiro */
  --saas-pdv:            #D97706; /* âmbar — ponto de venda */
  --saas-relacionamento: #0891B2; /* ciano — relacionamento com clientes */

  /* ---------- GRADIENTES ---------- */
  --gradient-brand:  linear-gradient(135deg, #2563EB 0%, #168BFF 100%);
  --gradient-hero:   radial-gradient(120% 120% at 80% 0%, #14336B 0%, #0B1F3A 45%, #0B1220 100%);
  --gradient-glow:   radial-gradient(60% 60% at 50% 40%, rgba(22,139,255,.45) 0%, rgba(22,139,255,0) 70%);

  /* ---------- TIPOGRAFIA ---------- */
  --font-sans: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

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

  /* Escala tipográfica (fluida, base 16px) */
  --fs-eyebrow: 0.8125rem;                         /* 13px */
  --fs-sm:      0.875rem;                           /* 14px */
  --fs-body:    1rem;                               /* 16px */
  --fs-lg:      1.125rem;                           /* 18px */
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h1:      clamp(2.25rem, 1.6rem + 3.1vw, 4rem);
  --fs-display: clamp(2.5rem, 1.7rem + 4vw, 4.5rem);

  --lh-tight:   1.08;
  --lh-heading: 1.15;
  --lh-snug:    1.35;
  --lh-body:    1.65;

  --tracking-eyebrow: 0.14em;
  --tracking-wide:    0.04em;

  /* ---------- ESPAÇAMENTO (escala 4px) ---------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --container:  1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---------- RAIOS ---------- */
  --radius-sm:   10px;  /* inputs */
  --radius-md:   14px;  /* botões */
  --radius-lg:   16px;  /* cards */
  --radius-xl:   20px;  /* modais, blocos grandes */
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-xs: 0 1px 2px rgba(11,31,58,.06);
  --shadow-sm: 0 4px 14px rgba(11,31,58,.06);
  --shadow-md: 0 8px 30px rgba(11,31,58,.08);
  --shadow-lg: 0 20px 45px rgba(11,31,58,.12);
  --shadow-brand: 0 12px 30px rgba(37,99,235,.28);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .15s;
  --dur:      .25s;
  --dur-slow: .4s;

  /* ---------- CAMADAS ---------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-toast: 500;
}

/* ---------- BREAKPOINTS (referência) ----------
   sm: 640px  |  md: 768px  |  lg: 1024px  |  xl: 1280px
   Uso mobile-first via @media (min-width: …) nos componentes.
   -------------------------------------------------------- */