/* ==========================================================================
   IBOne ERP — Design tokens
   Fonte: IBONE_ERP_LANDING_PAGE_ESPECIFICACAO.md, secoes 3 e 4.
   Nao adicionar cores saturadas fora desta paleta.
   ========================================================================== */

/* --- Tipografia -----------------------------------------------------------
   Inter variavel, subset latino (cobre todos os acentos do pt-BR).
   Um unico arquivo entrega os pesos 400 a 800.                              */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Paleta institucional --------------------------------------------- */
  --color-brand-primary: #174b40;
  --color-brand-dark: #0f332b;
  --color-brand-medium: #256457;
  --color-brand-light: #b8d98a;
  --color-brand-soft: #d4e8b4;

  --color-offwhite: #f6f8f3;
  --color-white: #ffffff;
  --color-graphite: #1d2d2a;
  --color-gray: #8a9691;

  --color-border-light: #d4e8b4;
  --color-border-neutral: #dde4e0;
  --color-success: #1f8a50;
  --color-warning: #e59a16;

  /* Derivados de uso (spec 3.2) */
  --color-text: var(--color-graphite);
  --color-text-secondary: #68736f;
  --color-surface-tint: #f0f6ea; /* hover do botao secundario e CTA final */

  /* Sobre a secao escura */
  --color-on-dark: #eef3ec;
  --color-on-dark-muted: #b9c7c1;
  --color-divider-dark: rgba(255, 255, 255, 0.12);

  /* --- Tipografia -------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --text-xs: 0.75rem;   /* 12 px */
  --text-sm: 0.875rem;  /* 14 px */
  --text-base: 1rem;    /* 16 px */
  --text-lg: 1.125rem;  /* 18 px */
  --text-xl: 1.25rem;   /* 20 px */
  --text-2xl: 1.5rem;   /* 24 px */
  --text-3xl: 2rem;     /* 32 px */
  --text-4xl: 2.5rem;   /* 40 px */
  --text-5xl: 3.5rem;   /* 56 px */
  --text-6xl: 4rem;     /* 64 px */

  /* --- Espacamento, base 8 ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 128px;

  /* --- Raios ------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Sombras ----------------------------------------------------------
     Discretas e funcionais. Nunca combinar com bordas escuras.             */
  --shadow-soft: 0 8px 24px rgba(15, 51, 43, 0.08);
  --shadow-elevated: 0 16px 40px rgba(15, 51, 43, 0.12);
  --shadow-device: 0 24px 48px -8px rgba(15, 51, 43, 0.18);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1240px;
  --container-pad: 20px;   /* mobile; vira 32px a partir de 768px */
  --header-height: 68px;   /* mobile; vira 80px no desktop */
  --section-gap: 72px;     /* espaco vertical entre secoes no mobile */

  /* --- Movimento ---------------------------------------------------------
     Spec 18: 160 a 240 ms, sempre ease-out.                                */
  --ease: ease-out;
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 240ms;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --section-gap: 88px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 80px;
    --section-gap: 96px;
  }
}