/* =============================================================================
   Cobranzo brand · base type
   ─────────────────────────────────────────────────────────────────────────────
   Brand fonts (Manrope self-hosted + Inter + JetBrains Mono via Google Fonts)
   and the brand type scale. Page-level base rules (`html, body, h1..h4, p`)
   live in landing_page.css to avoid leaking into the legacy app shell.

   The cascade chain below is the single source of layer ordering for the
   Cobranzo brand sheets. Anything outside `@layer` wins over everything in
   layers, which is what we want for the @font-face / :root token blocks.
   ============================================================================= */

@layer base, components, utilities;

@font-face {
  font-family: "Manrope";
  src: url("/assets/Manrope-VariableFont_wght-8159c9b0.ttf") format("truetype-variations"),
       url("/assets/Manrope-VariableFont_wght-8159c9b0.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Type stacks */
  --cob-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --cob-font-body:    "Inter",  ui-sans-serif, system-ui, -apple-system, sans-serif;
  --cob-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (display) */
  --cob-fs-display:  clamp(48px, 7vw, 96px);
  --cob-fs-h1:       clamp(40px, 5.2vw, 64px);
  --cob-fs-h2:       clamp(30px, 3.4vw, 44px);
  --cob-fs-h3:       24px;
  --cob-fs-h4:       18px;
  --cob-fs-body:     16px;
  --cob-fs-small:    14px;
  --cob-fs-caption:  12px;

  --cob-lh-tight:    1.05;
  --cob-lh-snug:     1.2;
  --cob-lh-body:     1.55;
  --cob-lh-loose:    1.7;

  --cob-tr-tight:   -0.03em;   /* display */
  --cob-tr-snug:    -0.015em;  /* headings */
  --cob-tr-body:     0em;
  --cob-tr-caps:     0.08em;
}

/* Optional typography helpers — opt-in via the `cob-` prefix */
@layer base {
:where(.cob-display) {
  font-family: var(--cob-font-display);
  font-weight: 800;
  font-size: var(--cob-fs-display);
  line-height: var(--cob-lh-tight);
  letter-spacing: var(--cob-tr-tight);
  color: var(--cob-fg-1);
  margin: 0;
}
:where(.cob-h1) {
  font-family: var(--cob-font-display);
  font-weight: 800;
  font-size: var(--cob-fs-h1);
  line-height: var(--cob-lh-tight);
  letter-spacing: var(--cob-tr-tight);
  color: var(--cob-fg-1);
  margin-block: 0 var(--cob-s-4, 16px);
}
:where(.cob-h2) {
  font-family: var(--cob-font-display);
  font-weight: 800;
  font-size: var(--cob-fs-h2);
  line-height: var(--cob-lh-snug);
  letter-spacing: var(--cob-tr-snug);
  color: var(--cob-fg-1);
  margin-block: 0 var(--cob-s-4, 16px);
}
:where(.cob-h3) {
  font-family: var(--cob-font-display);
  font-weight: 700;
  font-size: var(--cob-fs-h3);
  line-height: var(--cob-lh-snug);
  letter-spacing: var(--cob-tr-snug);
  color: var(--cob-fg-1);
  margin-block: 0 var(--cob-s-3, 12px);
}
:where(.cob-h4) {
  font-family: var(--cob-font-display);
  font-weight: 700;
  font-size: var(--cob-fs-h4);
  line-height: 1.35;
  color: var(--cob-fg-1);
  margin-block: 0 var(--cob-s-2, 8px);
}
:where(.cob-body) {
  font-family: var(--cob-font-body);
  font-size: var(--cob-fs-body);
  line-height: var(--cob-lh-body);
  color: var(--cob-fg-2);
  margin: 0;
}
:where(.cob-eyebrow) {
  font-family: var(--cob-font-body);
  font-weight: 600;
  font-size: var(--cob-fs-caption);
  letter-spacing: var(--cob-tr-caps);
  text-transform: uppercase;
  color: var(--cob-terra);
  display: inline-block;
}
:where(.cob-eyebrow.on-dark, .cob-card--dark .cob-eyebrow) {
  color: var(--cob-terra-on-dark);
}
:where(.cob-caption) {
  font-size: var(--cob-fs-caption);
  line-height: 1.4;
  color: var(--cob-fg-3);
}
:where(.cob-mono) {
  font-family: var(--cob-font-mono);
  font-size: 0.92em;
}
:where(.cob-tabular) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
:where(.cob-link) {
  color: var(--cob-terra);
  text-decoration: none;
  transition: color var(--cob-dur-fast, 120ms) var(--cob-ease-out, ease);
}
:where(.cob-link):hover { color: var(--cob-terra-h); }

@media (width >= 48rem) {
  :where(.cob-h1) { letter-spacing: -0.035em; }
}
} /* @layer base */