/* ===========================================================================
   CARVALHO MEIRELES — WEBFONTS
   Substituição declarada: a fonte original do wordmark não foi fornecida.
   Usamos Archivo (grotesca variável, larguras 62–125%) como par mais próximo
   da tipografia pesada e contrastante da marca, + Space Mono para refs legais.
   Servidas via Google Fonts CSS API.
   =========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,800&family=Archivo+Black&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap");

/* ===========================================================================
   CARVALHO MEIRELES — COLOR TOKENS
   Identidade marcante: vermelho, azul-escuro e branco.
   Estética cartaz/manifesto — alto contraste, sem meios-termos.
   =========================================================================== */
:root {
  /* --- Base brand palette ------------------------------------------------ */
  --cm-red: #DD4646;          /* sinal / ação / luta */
  --cm-red-deep: #C13838;     /* hover / pressionado */
  --cm-red-soft: #E76A6A;     /* destaque sobre navy */
  --cm-navy: #0F2A3F;         /* base institucional */
  --cm-navy-900: #0A1E2E;     /* fundo mais profundo */
  --cm-navy-700: #1B3C54;     /* superfície elevada sobre navy */
  --cm-paper: #EFF1F0;        /* "branco" off-white, papel de cartaz */
  --cm-white: #FFFFFF;
  --cm-ink: #0A1E2E;          /* texto preto-azulado */

  /* Neutros derivados (escala fria) */
  --cm-gray-100: #E2E6E5;
  --cm-gray-200: #C7CECD;
  --cm-gray-300: #9BA6A8;
  --cm-gray-400: #6E7B80;
  --cm-gray-500: #4A585E;

  /* --- Semantic: surfaces ------------------------------------------------ */
  --surface-page: var(--cm-paper);
  --surface-card: var(--cm-white);
  --surface-inverse: var(--cm-navy);
  --surface-inverse-deep: var(--cm-navy-900);
  --surface-inverse-raised: var(--cm-navy-700);
  --surface-accent: var(--cm-red);

  /* --- Semantic: text ---------------------------------------------------- */
  --text-strong: var(--cm-ink);
  --text-body: #243845;
  --text-muted: var(--cm-gray-400);
  --text-on-navy: var(--cm-paper);
  --text-on-navy-muted: #8FA2AE;
  --text-on-red: var(--cm-white);
  --text-accent: var(--cm-red);

  /* --- Semantic: lines & borders ----------------------------------------- */
  --border-hairline: rgba(15, 42, 63, 0.14);
  --border-strong: var(--cm-navy);
  --border-on-navy: rgba(239, 241, 240, 0.18);
  --rule-heavy: 4px;          /* espessura de régua de manifesto */

  /* --- Status (uso jurídico: prazos, alertas) ---------------------------- */
  --status-win: #2E8B6F;      /* direito reconhecido / ganho */
  --status-alert: var(--cm-red);
  --status-info: var(--cm-navy);

  /* --- Focus ------------------------------------------------------------- */
  --focus-ring: var(--cm-red);
}

/* ===========================================================================
   CARVALHO MEIRELES — TYPOGRAPHY TOKENS
   "Tipografia grande e contrastante." Grotesca pesada de cartaz para títulos,
   grotesca limpa para corpo. Substituição Google Fonts: Archivo (família) +
   Archivo Black (display). Fonte original do wordmark não fornecida.
   =========================================================================== */
:root {
  /* --- Families ---------------------------------------------------------- */
  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;  /* manchetes-cartaz, peso black garantido */
  --font-sans: "Archivo", system-ui, -apple-system, sans-serif; /* corpo + UI */
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace; /* referências legais, datas, art. da CLT */

  /* --- Display weights & widths (Archivo é variável) --------------------- */
  --fw-black: 900;       /* @kind font */
  --fw-extrabold: 800;   /* @kind font */
  --fw-bold: 700;        /* @kind font */
  --fw-semibold: 600;    /* @kind font */
  --fw-medium: 500;      /* @kind font */
  --fw-regular: 400;     /* @kind font */

  /* --- Type scale (rem, base 16px) — passo amplo p/ contraste ------------ */
  --text-2xs: 0.6875rem;   /* 11px — micro rótulos */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.375rem;     /* 22px */
  --text-xl: 1.75rem;      /* 28px */
  --text-2xl: 2.25rem;     /* 36px */
  --text-3xl: 3rem;        /* 48px */
  --text-4xl: 4rem;        /* 64px */
  --text-5xl: 5.5rem;      /* 88px — manchete de cartaz */
  --text-6xl: 7.5rem;      /* 120px — manifesto */

  /* --- Line heights ------------------------------------------------------ */
  --leading-poster: 0.92;  /* manchetes empilhadas, bem apertadas */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Letter spacing ---------------------------------------------------- */
  --tracking-tight: -0.02em;   /* manchetes pesadas */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* "SOCIEDADE DE ADVOGADOS", kickers */
  --tracking-wider: 0.18em;    /* micro-rótulos caixa-alta */
}

/* --- Semantic type roles (mixins via classes utilitárias) ---------------- */
.cm-kicker {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}
.cm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-stretch: 125%;
  line-height: var(--leading-poster);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.cm-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.cm-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.cm-legal {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
}

/* ===========================================================================
   CARVALHO MEIRELES — SPACING, RADII, SHADOW, MOTION
   Layout de cartaz: blocos sólidos, cantos retos, margens generosas, réguas
   pesadas. Pouca sombra — o contraste vem da cor, não da profundidade.
   =========================================================================== */
:root {
  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* --- Radii — cantos majoritariamente retos (estética manifesto) -------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;       /* botões, inputs */
  --radius-lg: 12px;      /* cards */
  --radius-pill: 999px;   /* tags, avatar, badges de selo */

  /* --- Borders ----------------------------------------------------------- */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-heavy: 4px;

  /* --- Shadows — discretas; volume vem do bloco de cor ------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 30, 46, 0.08);
  --shadow-md: 0 6px 18px rgba(10, 30, 46, 0.12);
  --shadow-lg: 0 18px 48px rgba(10, 30, 46, 0.18);
  --shadow-press: inset 0 2px 6px rgba(10, 30, 46, 0.18);

  /* --- Motion — direto e decidido, sem balanço --------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms;     /* @kind other */
  --dur-base: 200ms;     /* @kind other */
  --dur-slow: 360ms;     /* @kind other */

  /* --- Layout ------------------------------------------------------------ */
  --container-narrow: 640px;
  --container: 1080px;
  --container-wide: 1280px;
  --gutter: var(--space-5);
}