/* =========================================================
   CARMELLO ARQUITETURA — Design Tokens
   Fonte: Manual de marca (Apresentação de Marca, 2026)
   Sincronizado do projeto Claude Design "carmello-arquitetura"
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=ranade@300,500,700&f[]=satoshi@300,500,700&display=swap');

:root {
  /* ---- Cor | paleta de marca ---- */
  --color-abismo: #19282F;   /* base, profundidade, estabilidade */
  --color-ardosia: #425B60;  /* mineral, conecta a materiais e superfícies */
  --color-nevoa: #9EAEAD;    /* suavidade, leveza */
  --color-bruma: #CFD6D3;    /* luminosidade, respiro */
  --color-white: #FFFFFF;

  /* tintas auxiliares (derivadas, para estados de UI) */
  --color-abismo-10: rgba(25, 40, 47, 0.1);
  --color-abismo-40: rgba(25, 40, 47, 0.4);
  --color-ardosia-30: rgba(66, 91, 96, 0.3);
  --color-nevoa-30: rgba(158, 174, 173, 0.3);

  /* ---- Cor | tokens semânticos ---- */
  --bg-canvas: var(--color-bruma);
  --bg-surface: var(--color-white);
  --bg-inverse: var(--color-abismo);
  --bg-muted: var(--color-nevoa);

  --text-primary: var(--color-abismo);
  --text-secondary: var(--color-ardosia);
  --text-on-inverse: var(--color-bruma);
  --text-on-inverse-muted: var(--color-nevoa);

  --border-subtle: rgba(66, 91, 96, 0.25);
  --border-inverse: rgba(207, 214, 211, 0.3);

  --focus-ring: 0 0 0 3px rgba(66, 91, 96, 0.35);

  /* ---- Tipografia ---- */
  --font-display: 'Ranade', 'Poppins', 'Century Gothic', sans-serif; /* títulos e destaques */
  --font-body: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* textos e UI */

  --text-xs: 0.75rem;    /* 12px — legendas, eyebrows */
  --text-sm: 0.875rem;   /* 14px — auxiliar */
  --text-base: 1rem;     /* 16px — corpo */
  --text-md: 1.125rem;   /* 18px — corpo destacado */
  --text-lg: 1.5rem;     /* 24px — subtítulo */
  --text-xl: 2rem;       /* 32px — H3 */
  --text-2xl: 2.75rem;   /* 44px — H2 */
  --text-3xl: 3.5rem;    /* 56px — H1 */
  --text-4xl: 4.5rem;    /* 72px — display */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-wide: 0.08em;   /* eyebrows / labels em caixa alta */
  --tracking-wider: 0.16em;  /* "A R Q U I T E T U R A" */

  /* ---- Espaçamento (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

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

  /* ---- Sombra ---- */
  --shadow-sm: 0 1px 2px rgba(25, 40, 47, 0.08);
  --shadow-md: 0 8px 24px rgba(25, 40, 47, 0.12);
  --shadow-lg: 0 16px 48px rgba(25, 40, 47, 0.18);

  /* ---- Movimento ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;

  /* ---- Grid ---- */
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }