/* ============================================================
   Repassa Brasil — Colors & Type Tokens
   ============================================================
   The brand pairs a warm vivid orange (energy, speed, the "27
   minutes" promise) with a deep espresso brown (trust, weight,
   solidity). Used cars, even broken ones, are not glamorous —
   so the system stays grounded with cream backgrounds, a money-
   green for success states, and big confident type.
   ============================================================ */

/* ---- Webfonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=Archivo+Black&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */
  --rb-orange-50:  #FFF6EA;
  --rb-orange-100: #FFE4BD;
  --rb-orange-200: #FBC97D;
  --rb-orange-300: #F7AC3F;
  --rb-orange-400: #F39220;   /* PRIMARY — logo orange */
  --rb-orange-500: #E37A0B;
  --rb-orange-600: #C25F05;
  --rb-orange-700: #984804;
  --rb-orange-800: #6F3403;

  --rb-brown-50:   #F6F1EB;
  --rb-brown-100:  #E6D8C8;
  --rb-brown-200:  #C6AE92;
  --rb-brown-300:  #8E6F4F;
  --rb-brown-400:  #5C4429;
  --rb-brown-500:  #3D2D1B;
  --rb-brown-600:  #2A1C12;   /* PRIMARY — logo brown / near-black */
  --rb-brown-700:  #1E140C;
  --rb-brown-800:  #110B06;

  /* Money / success — used in stats, "pagamento confirmado" badges */
  --rb-green-50:   #E8F6EE;
  --rb-green-100:  #C2E8D2;
  --rb-green-400:  #2EA45A;
  --rb-green-500:  #1E8848;
  --rb-green-600:  #146634;

  /* Cream / paper neutrals — backgrounds, cards, sections */
  --rb-cream-50:   #FBF7F0;   /* default page background */
  --rb-cream-100:  #F4ECDD;   /* alternating section bg */
  --rb-cream-200:  #E9DBC2;   /* card edges, dividers */
  --rb-cream-300:  #D6C3A3;

  /* Pure neutrals (use sparingly — prefer brown/cream) */
  --rb-white:      #FFFFFF;
  --rb-ink-50:     #F5F4F2;
  --rb-ink-200:    #D4D1CC;
  --rb-ink-400:    #7A7570;
  --rb-ink-600:    #3B3833;
  --rb-ink-900:    #15130F;

  /* Semantic */
  --rb-danger:     #C8351C;
  --rb-warning:    #F0A800;
  --rb-info:       #2E6FE0;

  /* ============================================================
     SEMANTIC COLORS — Use these in components, not the raw ones
     ============================================================ */
  --bg-page:       var(--rb-cream-50);
  --bg-section:    var(--rb-cream-100);
  --bg-elevated:   var(--rb-white);
  --bg-inverse:    var(--rb-brown-600);
  --bg-accent:     var(--rb-orange-400);

  --fg-default:    var(--rb-brown-600);   /* primary text on cream */
  --fg-muted:      var(--rb-brown-400);
  --fg-subtle:     var(--rb-brown-300);
  --fg-inverse:    var(--rb-cream-50);    /* on dark/orange surfaces */
  --fg-accent:     var(--rb-orange-500);
  --fg-success:    var(--rb-green-500);
  --fg-danger:     var(--rb-danger);

  --border-default: var(--rb-cream-200);
  --border-strong:  var(--rb-brown-200);
  --border-focus:   var(--rb-orange-400);

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================
     Display: Archivo Black — heavyweight, slightly condensed,
              feels like a price tag / dealership sign. Used UPPER
              with tight tracking for hero headlines and stats.
     Sans:    Archivo + Plus Jakarta Sans — Archivo for UI/section
              titles, PJS for body. Both very legible at small
              sizes which matters for forms ("Marca, Modelo, Ano…")
     ============================================================ */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Archivo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale (rem, 1rem = 16px) */
  --fs-hero:    clamp(2.75rem, 5.5vw, 4.5rem); /* 44–72 */
  --fs-h1:      clamp(2rem, 3.5vw, 3rem);      /* 32–48 */
  --fs-h2:      clamp(1.5rem, 2.4vw, 2.125rem);/* 24–34 */
  --fs-h3:      1.375rem;  /* 22 */
  --fs-h4:      1.125rem;  /* 18 */
  --fs-body:    1rem;      /* 16 */
  --fs-small:   0.875rem;  /* 14 */
  --fs-eyebrow: 0.8125rem; /* 13 */
  --fs-stat:    clamp(2.5rem, 4.5vw, 4rem);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-cta:    0.08em;  /* uppercase buttons */

  /* ============================================================
     SPACING / RADIUS / SHADOW / MOTION
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Subtle warm-tinted shadows (no cold grey) */
  --shadow-xs: 0 1px 2px rgba(42, 28, 18, 0.06);
  --shadow-sm: 0 2px 6px rgba(42, 28, 18, 0.08);
  --shadow-md: 0 8px 20px rgba(42, 28, 18, 0.10);
  --shadow-lg: 0 18px 40px rgba(42, 28, 18, 0.14);
  --shadow-accent: 0 10px 24px rgba(243, 146, 32, 0.30);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ============================================================
   SEMANTIC ELEMENTS — drop-in defaults
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-default);
  margin: 0;
  text-wrap: balance;
}

.rb-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1, .rb-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h2, .rb-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .rb-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-family: var(--font-sans);
  font-weight: 800;
}

h4, .rb-h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-sans);
  font-weight: 700;
}

p, .rb-body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  margin: 0;
  text-wrap: pretty;
}

.rb-small  { font-size: var(--fs-small); line-height: var(--lh-normal); }
.rb-muted  { color: var(--fg-muted); }
.rb-subtle { color: var(--fg-subtle); }

.rb-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--fg-accent);
}

.rb-stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

code, .rb-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--rb-cream-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a { color: var(--fg-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }