/* =============================================================
   NUTRALABFY — Design tokens
   -------------------------------------------------------------
   A escala (tipo, espaço, raio, grade) segue a do site de
   referência seed.com; as cores são as da nossa marca, extraídas
   da logo. Altere aqui e o site inteiro acompanha.
   ============================================================= */

:root {
  /* ---------- Cor de marca -------------------------------------
     Menta #8FCFBC e tinta #22414A vêm da logo. A rampa verde nasce
     do matiz da menta (h ≈ 162°). Todos os pares texto/fundo usados
     no site passam em WCAG AA. */
  --green-50:  #F1FAF6;
  --green-100: #DEF3EB;
  --green-200: #C0E7D9;
  --green-300: #9FD9C6;
  --green-400: #8FCFBC;  /* menta da logo */
  --green-500: #5FB79B;
  --green-600: #3E9A7E;
  --green-700: #2C7A63;  /* ação: 5.16:1 sobre branco */
  --green-800: #22604F;
  --green-900: #1B4B3E;

  --ink-900: #102A30;
  --ink-800: #143239;    /* fundo profundo — papel do verde escuro da referência */
  --ink-700: #22414A;    /* tinta da logo */
  --ink-600: #3A555C;
  --ink-500: #5E7478;
  --ink-400: #8FA3A7;
  --ink-300: #B9C9CC;
  --ink-200: #DCE6E7;
  --ink-100: #EDF3F3;

  /* ---------- Superfícies --------------------------------------
     O branco do site é levemente esverdeado, como o off-white da
     referência — evita o estalo do #FFF puro em tela grande. */
  --ground:      #F8FBF9;
  --ground-pure: #FFFFFF;
  --foam:        #E9F2ED;
  --deep:        var(--ink-800);
  --deeper:      var(--ink-900);

  /* ---------- Papéis semânticos -------------------------------- */
  --text:         var(--ink-600);
  --text-strong:  var(--ink-900);
  --text-muted:   var(--ink-500);
  --on-deep:      #FFFFFF;
  --on-deep-mute: #A9C0C4;

  --brand:        var(--green-400);
  --action:       var(--green-700);
  --action-hover: var(--green-800);
  --focus:        var(--green-600);

  --border:      var(--ink-200);
  --border-soft: var(--ink-100);
  --border-mint: var(--green-200);

  /* ---------- Tipografia ---------------------------------------
     Escala da referência: 10 · 12 · 14 · 16 · 18 · 20 · 24 · 32 ·
     40 · 48 · 64 px. Pesos leves (300/350/400/500) e entrelinha
     curta nos títulos — é isso que dá o ar do site. */
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fz-250: 0.625rem;   /* 10 */
  --fz-300: 0.75rem;    /* 12 */
  --fz-350: 0.875rem;   /* 14 */
  --fz-400: 1rem;       /* 16 */
  --fz-450: 1.125rem;   /* 18 */
  --fz-500: 1.25rem;    /* 20 */
  --fz-600: 1.5rem;     /* 24 */
  --fz-800: 2rem;       /* 32 */

  --display-xl: clamp(2.5rem,  1.6rem + 3.6vw, 4rem);      /* 40 → 64 */
  --display-lg: clamp(2rem,    1.4rem + 2.4vw, 3rem);      /* 32 → 48 */
  --display-md: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);    /* 28 → 40 */
  --display-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);  /* 22 → 28 */

  /* A referência usa tracking negativo suave, proporcional ao corpo */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-label:    0.14em;

  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-body:    1.5;

  /* ---------- Espaço (base 4px, como a referência) ------------- */
  --sp-4:  0.25rem;  --sp-8:  0.5rem;   --sp-12: 0.75rem;  --sp-16: 1rem;
  --sp-20: 1.25rem;  --sp-24: 1.5rem;   --sp-32: 2rem;     --sp-40: 2.5rem;
  --sp-48: 3rem;     --sp-56: 3.5rem;   --sp-64: 4rem;     --sp-72: 4.5rem;
  --sp-80: 5rem;     --sp-100: 6.25rem; --sp-120: 7.5rem;

  --section-y: clamp(4rem, 7vw, 7.5rem);
  --container: 1440px;
  --measure:   608px;        /* largura de leitura da referência */
  --measure-hero: 750px;
  --gutter: clamp(1rem, 4vw, 3.5rem);   /* 16 → 56 */

  /* ---------- Forma (raios da referência) ---------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 32px; --r-full: 1000px;

  /* ---------- Elevação ----------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 42, 48, .05);
  --shadow-md: 0 4px 16px -4px rgba(16, 42, 48, .08), 0 2px 6px -2px rgba(16, 42, 48, .05);
  --shadow-lg: 0 18px 48px -18px rgba(16, 42, 48, .18), 0 6px 16px -8px rgba(16, 42, 48, .08);

  /* ---------- Movimento ---------------------------------------- */
  --ease:     cubic-bezier(.22, .68, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 700ms;

  --header-h: 64px;
}

@media (min-width: 60em) { :root { --header-h: 80px; } }