/* =============================================================
   ROSTA — Color & Type Foundations
   Contabilidade para PMEs (foco em revenda de veículos
   usados e transportadoras rodoviárias)
   -------------------------------------------------------------
   Direction: navy + cobalt + light tints. Confiança e seriedade,
   com toque moderno e acessível.
   ============================================================= */

/* -----  Webfonts (Google Fonts substitutes — flagged in README) ----- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand blues (deep, institutional) ---------- */
  --rosta-navy-950: #021024;   /* near-black navy — only for deep grounds */
  --rosta-navy-900: #001F3F;   /* primary brand navy */
  --rosta-navy-800: #052B5E;
  --rosta-navy-700: #0B3D91;   /* primary action / link */
  --rosta-navy-600: #1252B5;
  --rosta-navy-500: #1E6FBA;   /* mid blue, secondary actions */
  --rosta-navy-400: #4F94CF;
  --rosta-navy-300: #8FB7DA;
  --rosta-navy-200: #BFD3E5;
  --rosta-navy-100: #DCE7F1;
  --rosta-navy-50:  #EEF3F8;   /* tints / surfaces */

  /* ---------- Neutrals ---------- */
  --rosta-ink-900: #0E1726;     /* headings on light */
  --rosta-ink-800: #1E2A3B;
  --rosta-ink-700: #2F3C50;     /* body */
  --rosta-ink-600: #4A5668;
  --rosta-ink-500: #6B7689;
  --rosta-ink-400: #93A0B2;
  --rosta-ink-300: #BFC8D5;
  --rosta-ink-200: #DDE3EC;
  --rosta-ink-100: #ECF0F5;
  --rosta-ink-50:  #F6F8FB;     /* page bg alt */
  --rosta-paper:   #FFFFFF;

  /* ---------- Semantic state colors (kept blue-leaning per brief) ---------- */
  --rosta-success: #1F7A4D;
  --rosta-success-soft: #E5F2EB;
  --rosta-warning: #B7791F;
  --rosta-warning-soft: #FBF1DC;
  --rosta-danger:  #B42318;
  --rosta-danger-soft: #FBEAE7;
  --rosta-info:    var(--rosta-navy-700);
  --rosta-info-soft: var(--rosta-navy-50);

  /* ---------- Foreground / background semantic vars ---------- */
  --fg1: var(--rosta-ink-900);   /* primary text */
  --fg2: var(--rosta-ink-700);   /* body text */
  --fg3: var(--rosta-ink-500);   /* muted text */
  --fg4: var(--rosta-ink-400);   /* placeholder, dim */
  --fg-on-navy: #FFFFFF;
  --fg-on-navy-2: #BFD3E5;

  --bg1: var(--rosta-paper);
  --bg2: var(--rosta-ink-50);
  --bg3: var(--rosta-ink-100);
  --bg-navy: var(--rosta-navy-900);
  --bg-navy-deep: var(--rosta-navy-950);
  --bg-tint: var(--rosta-navy-50);

  --line-1: var(--rosta-ink-200);
  --line-2: var(--rosta-ink-300);
  --line-on-navy: rgba(255,255,255,0.12);

  --accent: var(--rosta-navy-700);
  --accent-hover: var(--rosta-navy-800);
  --accent-press: var(--rosta-navy-900);
  --accent-soft: var(--rosta-navy-50);

  /* ---------- Typography families ---------- */
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (1.200 minor third, anchored at 16px) ---------- */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   30px;
  --t-3xl:   38px;
  --t-4xl:   48px;
  --t-5xl:   60px;
  --t-6xl:   76px;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.1;   /* @kind font */
  --lh-snug:   1.25;  /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relax:  1.7;   /* @kind font */

  /* ---------- Letter spacing ---------- */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:   0;       /* @kind font */
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.14em;   /* uppercase eyebrows */

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ---------- Radius ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows (cool, navy-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(2, 16, 36, 0.06);
  --shadow-sm: 0 2px 4px rgba(2, 16, 36, 0.06), 0 1px 2px rgba(2, 16, 36, 0.04);
  --shadow-md: 0 6px 16px rgba(2, 16, 36, 0.08), 0 2px 4px rgba(2, 16, 36, 0.04);
  --shadow-lg: 0 18px 40px rgba(2, 16, 36, 0.12), 0 4px 10px rgba(2, 16, 36, 0.06);
  --shadow-xl: 0 30px 70px rgba(2, 16, 36, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --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:    320ms;  /* @kind other */
}

/* =============================================================
   Semantic typographic styles
   Use these classes directly on elements. Do not invent new sizes.
   ============================================================= */

.rosta-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--rosta-navy-700);
}

.rosta-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

.rosta-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

.rosta-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

.rosta-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

.rosta-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.rosta-h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.rosta-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: var(--lh-relax);
  color: var(--fg2);
}

.rosta-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.rosta-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.rosta-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.rosta-mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg2);
}

/* element-level reset: opt-in via .rosta-typeset */
.rosta-typeset { font-family: var(--font-body); color: var(--fg2); font-size: var(--t-base); line-height: var(--lh-normal); }
.rosta-typeset h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg1); margin: 0 0 var(--s-5); }
.rosta-typeset h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg1); margin: var(--s-9) 0 var(--s-4); }
.rosta-typeset h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); line-height: var(--lh-snug); color: var(--fg1); margin: var(--s-7) 0 var(--s-3); }
.rosta-typeset p { margin: 0 0 var(--s-4); }
.rosta-typeset a { color: var(--rosta-navy-700); text-decoration: underline; text-underline-offset: 3px; }
.rosta-typeset a:hover { color: var(--rosta-navy-800); }
.rosta-typeset strong { color: var(--fg1); font-weight: 600; }
.rosta-typeset code { font-family: var(--font-mono); font-size: 0.92em; background: var(--rosta-ink-100); padding: 2px 6px; border-radius: var(--r-xs); }