/* =====================================================================
   base.css — Reset, design tokens (variáveis globais) e tipografia
   ---------------------------------------------------------------------
   Identidade N.Pronto: premium escuro · branco · laranja-vermelho.
   Tudo o que é "tema" vive aqui para migração simples para WordPress.
   ===================================================================== */

:root {
  /* ---- Cores de marca ---- */
  --color-primary: #ee4b22;        /* laranja-vermelho N.Pronto (acção) */
  --color-primary-dark: #cf3d18;   /* hover / activo */
  --color-primary-soft: #fdece5;   /* fundos suaves laranja */

  /* ---- Neutros (claro) ---- */
  --color-text: #1c1e22;
  --color-heading: #14161a;
  --color-muted: #6a7280;
  --color-background: #ffffff;
  --color-surface: #f5f6f8;         /* secções claras alternadas */
  --color-surface-2: #ecedf0;
  --color-border: #e4e7eb;

  /* ---- Escuro (secções premium / header / footer) ---- */
  --color-dark: #15171c;            /* faixas escuras */
  --color-dark-2: #0e0f13;          /* header / footer */
  --color-dark-soft: #1e2127;       /* cartões sobre escuro */
  --color-dark-border: #2a2e36;
  --color-on-dark: #f3f4f6;         /* texto sobre escuro */
  --color-on-dark-muted: #9aa1ad;   /* texto secundário sobre escuro */

  /* ---- Estado ---- */
  --color-success: #1f9d57;
  --color-danger: #df3b2c;
  --color-focus: #ee4b22;

  /* ---- Tipografia ---- */
  --font-heading: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  --fs-100: 0.8125rem;   /* 13 */
  --fs-200: 0.9375rem;   /* 15 */
  --fs-300: 1rem;        /* 16 */
  --fs-400: 1.125rem;    /* 18 */
  --fs-500: 1.375rem;    /* 22 */
  --fs-600: 1.75rem;     /* 28 */
  --fs-700: 2.25rem;     /* 36 */
  --fs-800: 3rem;        /* 48 */
  --fs-900: 3.75rem;     /* 60 */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;

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

  /* ---- Espaçamento ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

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

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(17, 20, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 20, 26, 0.09);
  --shadow-lg: 0 20px 50px rgba(17, 20, 26, 0.18);

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: var(--space-md); /* mobile — aumentar em desktop via responsive.css */
  --header-height: 76px;

  --transition: 180ms ease;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

/* ---------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  text-wrap: balance;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-800); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-700); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }

p { text-wrap: pretty; }
small { font-size: var(--fs-100); }

/* ---------------------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-md); top: -100%;
  z-index: 1000; background: var(--color-primary); color: #fff;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-md); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}