/* ==========================================================================
   Sertenge · Design tokens
   Fonte: Figma "Sertenge · Site 2026" → coleções "Sertenge · Cor" e
   "Sertenge · Escala" + estilos de texto locais.
   ========================================================================== */

:root {
  /* ---- Cor / marca ---- */
  --navy-950: #04123a;           /* fundo mais profundo (hero, gradientes) */
  --navy-900: #061a45;
  --navy-800: #0a2a6b;
  --navy-700: #0e3f92;
  --blue-600: #0f5cc0;
  --blue-500: #1e7fe0;
  --sky-300: #86d8f7;

  /* ---- Cor / neutros ---- */
  --concrete-50: #f5f8fc;
  --concrete-100: #e7edf5;
  --concrete-200: #d3ddeb;
  --graphite: #0e1726;
  --gray-600: #4e5f79;
  --gray-500: #7387a3;
  --white: #ffffff;

  /* ---- Cor / apoio (componentes específicos) ---- */
  --azul-100: #e0f1ff;           /* borda lista sustentável */
  --azul-marca-500: #294f6f;     /* texto lista sustentável */
  --chip-border: #d1d2d4;
  --chip-text: #23262a;
  --chip-active-bg: #eae2f9;
  --chip-active: #604c8d;
  --divider: #e0e1e3;
  --link-legal: #5350ff;
  --success: #098500;
  --danger: #bd0700;
  --field-filled-bg: #fafcfb;
  --field-filled-border: #676969;

  /* ---- Gradientes ---- */
  --grad-brand: linear-gradient(151deg, var(--navy-800) 14.18%, var(--blue-600) 53.19%, var(--blue-500) 85.1%);
  --grad-hero: linear-gradient(137deg, var(--navy-950) 10.57%, var(--navy-800) 36.59%, var(--blue-600) 65.85%, var(--blue-500) 91.87%);
  --grad-deep: linear-gradient(168deg, var(--navy-900) 10.94%, var(--navy-800) 57.81%, var(--navy-700) 89.06%);
  --grad-numeros: linear-gradient(118deg, var(--navy-900) 26.55%, var(--navy-800) 62.19%, var(--navy-700) 85.95%);
  --grad-cta: linear-gradient(132deg, rgba(4, 18, 58, .9) 9.86%, rgba(10, 42, 107, .9) 34.8%, rgba(15, 92, 192, .9) 62.87%, rgba(30, 127, 224, .9) 87.82%);
  --overlay-card: linear-gradient(180deg, rgba(6, 26, 69, 0) 0%, rgba(6, 26, 69, 0) 45%, rgba(6, 26, 69, .55) 100%);
  --overlay-media: linear-gradient(180deg, rgba(6, 26, 69, 0) 35.14%, rgba(6, 26, 69, .15) 61.09%, rgba(6, 26, 69, .7) 100%);
  --overlay-tile: linear-gradient(180deg, rgba(6, 26, 69, .05) 0%, rgba(6, 26, 69, .2) 35%, rgba(6, 26, 69, .82) 100%);
  --overlay-tile-tint: linear-gradient(-6deg, rgba(10, 42, 107, .6) 6.44%, rgba(15, 92, 192, .6) 56.39%, rgba(30, 127, 224, 0) 97.26%);

  /* ---- Tipografia ---- */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-script: "Kaushan Script", cursive;

  /* ---- Escala / espaço ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-132: 132px;

  /* ---- Escala / raio ---- */
  --radius-campo: 10px;
  --radius-painel: 16px;
  --radius-panel-lg: 18px;
  --radius-card: 24px;
  --radius-media: 26px;
  --radius-arco: 80px;
  --radius-arco-lg: 120px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 82px;
  --section-y: clamp(56px, 7vw, 96px);
  --section-y-sm: clamp(40px, 5vw, 64px);
  --section-y-lg: clamp(72px, 9vw, 128px);

  /* ---- Sombra / movimento ---- */
  --shadow-stamp: 0 16px 36px -16px rgba(6, 26, 69, .28);
  --shadow-card-hover: 0 24px 48px -24px rgba(6, 26, 69, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
}