/* ============================================================
   Braghini & Co. | base.css
   Fundacao do site institucional: tokens, reset e utilitarios
   de layout. Monocromatico warm-neutral, sem gradientes, sem
   texturas, sem cor de marca. CSS puro, sem build.
   ============================================================ */

/* ------------------------------------------------------------
   Todas as familias (Newsreader, Hanken Grotesk, IBM Plex Mono)
   sao carregadas via Google Fonts no head do index.html. A
   assinatura do logotipo usa Newsreader (serif editorial), a
   mesma familia dos titulos (--font-display).
   ------------------------------------------------------------ */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* ---- Rampa de tinta (neutros warm, do quase-preto ao papel) ---- */
  --ink-950: #0a0a0a;   /* quase-preto, tinta primaria */
  --ink-900: #161615;
  --ink-800: #26251f;   /* leve tom quente */
  --ink-700: #3a3a34;
  --ink-600: #56564f;
  --ink-500: #74746c;   /* cinza medio, legendas e meta */
  --ink-400: #9a9a92;
  --ink-300: #c2c2ba;
  --ink-200: #dedcd4;   /* bordas hairline */
  --ink-150: #e9e7df;
  --ink-100: #f2f0e9;   /* preenchimentos sutis, hover */
  --ink-50:  #f8f6f1;   /* papel com tom quente */
  --paper:   #ffffff;   /* branco puro */

  /* ---- Aliases semanticos de texto e superficie ---- */
  --text-strong:   var(--ink-950);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-inverse:  var(--paper);

  --surface-page:    var(--paper);
  --surface-raised:  var(--ink-50);
  --surface-card:    var(--paper);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--ink-950);

  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-ink:      var(--ink-950);

  /* ---- Anel de foco ---- */
  --focus-ring: var(--ink-950);

  /* ---- Familias tipograficas ---- */
  --font-display:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:      'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:      'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-signature: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* ---- Pesos (300/400 e a voz da marca) ---- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* ---- Escala tipografica (px) ---- */
  --text-display-xl: 76px;  /* hero */
  --text-display-l:  56px;
  --text-display-m:  40px;
  --text-heading-l:  30px;
  --text-heading-m:  24px;
  --text-heading-s:  20px;
  --text-body-l:     18px;
  --text-body-m:     16px;  /* base */
  --text-body-s:     14px;
  --text-caption:    13px;
  --text-micro:      11px;  /* rotulos eyebrow */

  /* ---- Alturas de linha ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Espacamento entre letras ---- */
  --tracking-display: -0.02em;  /* display grande, mais fechado */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* eyebrows */
  --tracking-wider:   0.16em;   /* descritor e lockup do logo */

  /* ---- Escala de espacamento (grid base 4px) ---- */
  --space-0:  0;
  --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;
  --space-40: 160px;

  /* ---- Ritmo semantico ---- */
  --gutter-page: clamp(20px, 4.5vw, 64px);
  --section-y:   clamp(64px, 9vw, 116px);
  --stack-tight: 12px;
  --stack:       24px;
  --stack-loose: 40px;
  --header-h:    112px;  /* altura do header fixo com respiro vertical (88px no mobile) */

  /* ---- Larguras de container ---- */
  --container-prose:  68ch;   /* medida de leitura longa */
  --container-narrow: 640px;
  --container:        1200px;
  --container-wide:   1440px;

  /* ---- Radii (pequenos, institucionais) ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;    /* controles */
  --radius-md:   6px;
  --radius-lg:   10px;   /* cards */
  --radius-pill: 999px;

  /* ---- Bordas ---- */
  --border-width: 1px;
  --border: 1px solid var(--border-hairline);
  --border-strong-rule: 1px solid var(--border-strong);
  --border-ink-rule: 1px solid var(--border-ink);

  /* ---- Sombras (suaves, baixa opacidade) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.05), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.06), 0 1px 3px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.08), 0 2px 8px rgba(10, 10, 10, 0.04);
  --shadow-inset: inset 0 0 0 1px var(--border-hairline);

  /* ---- Movimento (curto e silencioso, nunca bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   360ms;

  /* ---- Interacao ---- */
  --hover-fade: 0.68;
  --press-scale: 0.985;
}

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-m);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-light);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}

p {
  line-height: var(--leading-relaxed);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Respeita preferencia de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   3. Utilitarios de layout
   ============================================================ */

/* Container central com gutter fluido */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-page);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--prose {
  max-width: var(--container-prose);
}

/* Ritmo vertical de secao */
.section {
  padding-block: var(--section-y);
}

/* Pilhas verticais */
.stack > * + * {
  margin-top: var(--stack);
}

.stack--tight > * + * {
  margin-top: var(--stack-tight);
}

.stack--loose > * + * {
  margin-top: var(--stack-loose);
}

/* Regua hairline */
.hairline {
  border: none;
  border-top: var(--border);
}

/* Rotulo eyebrow (micro, espacado, mono) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Quebra de linha apenas no desktop: em telas estreitas o titulo
   quebra pelo fluxo natural; a partir de 640px respeita o <br> */
.br-desktop {
  display: none;
}

@media (min-width: 640px) {
  .br-desktop {
    display: inline;
  }
}

/* Acessibilidade: conteudo apenas para leitores de tela */
.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;
}