/* ============================================================
   REFORCEL & PICK-UP SHOP — Color & Type Foundations
   Source of truth for brand colors, type scale and tokens.
   Colors sampled from the live site (reforcel.com.br) screenshot.
   ============================================================ */

/* Display + body. Archivo is a SUBSTITUTE for the site's heading
   font (exact webfont unconfirmed) — strong squared grotesque that
   matches the bold, industrial feel. Swap here if the real font is known. */
@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;1,900&family=Archivo+Narrow:wght@600;700&display=swap');

:root {
  /* ---------- BRAND CORE (official — from master logo files) ---------- */
  --brand-blue:   #224682; /* primary — header, panels, links */
  --brand-red:    #ED2624; /* logo "Reforcel" / "PICK-UP", energy */
  --brand-orange: #F38120; /* "SHOP", hero headlines, active states */
  --brand-green:  #00AC18; /* WhatsApp / quote CTAs */
  --brand-white:  #FFFFFF;

  /* ---------- BLUE SCALE ---------- */
  --blue-900: #11254A;
  --blue-800: #18335F;
  --blue-700: #224682; /* = --brand-blue */
  --blue-600: #2B5599;
  --blue-500: #3667B4;
  --blue-400: #5A86CB;
  --blue-300: #88A8DC;
  --blue-200: #ADC4E7;
  --blue-100: #DBE5F4;
  --blue-50:  #EFF4FB;

  /* ---------- RED SCALE ---------- */
  --red-700: #A8120F;
  --red-600: #C71915;
  --red-500: #ED2624; /* = --brand-red */
  --red-400: #F2514F;
  --red-200: #F8ABAA;
  --red-100: #FBDADA;

  /* ---------- ORANGE SCALE ---------- */
  --orange-700: #B45707;
  --orange-600: #D66C0F;
  --orange-500: #F38120; /* = --brand-orange */
  --orange-400: #F69D51;
  --orange-200: #FBCB9D;
  --orange-100: #FDE7D1;

  /* ---------- GREEN SCALE (action / whatsapp) ---------- */
  --green-700: #007A11;
  --green-600: #009114;
  --green-500: #00AC18; /* = --brand-green */
  --green-400: #2BC23F;
  --green-100: #D5F4D9;

  /* ---------- NEUTRALS ---------- */
  --ink:      #14181F; /* headings on light */
  --gray-800: #232A34;
  --gray-700: #3A4250;
  --gray-600: #565F6C;
  --gray-500: #6B7480; /* secondary body text */
  --gray-400: #969DA8;
  --gray-300: #C7CCD3; /* borders */
  --gray-200: #E2E5EA;
  --gray-100: #EEF0F3; /* light fills */
  --gray-50:  #F7F8FA; /* page tint */

  /* ---------- SEMANTIC ---------- */
  --bg-page:        var(--brand-white);
  --bg-tint:        var(--gray-50);
  --bg-brand:       var(--brand-blue);   /* blue panels / sections */
  --bg-brand-deep:  var(--blue-800);     /* darker brand section */
  --fg-1:           var(--ink);          /* primary text on light */
  --fg-2:           var(--gray-500);     /* secondary text on light */
  --fg-on-brand:    var(--brand-white);  /* text on blue */
  --fg-on-brand-2:  var(--blue-200);     /* secondary text on blue */
  --link:           var(--brand-blue);
  --border:         var(--gray-300);
  --border-on-brand: rgba(255,255,255,.18);
  --focus-ring:     var(--orange-500);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', system-ui, sans-serif;       /* headings (heavy) */
  --font-body:    'Archivo', system-ui, sans-serif;       /* body / UI */
  --font-condensed: 'Archivo Narrow', 'Archivo', sans-serif; /* badges, labels */

  /* ---------- TYPE SCALE (desktop) ---------- */
  --fs-display:  clamp(40px, 5.2vw, 76px); /* hero headline */
  --fs-h1:       clamp(32px, 3.6vw, 52px);
  --fs-h2:       clamp(26px, 2.6vw, 38px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-lead:     19px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-tiny:     12px;

  --lh-tight: 1.02;
  --lh-head:  1.1;
  --lh-body:  1.55;

  --tracking-tight: -0.02em;
  --tracking-label:  0.08em;

  /* ---------- RADII ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:  0 1px 2px rgba(17,37,74,.08), 0 1px 3px rgba(17,37,74,.06);
  --shadow-md:  0 4px 12px rgba(17,37,74,.10), 0 2px 4px rgba(17,37,74,.06);
  --shadow-lg:  0 14px 36px rgba(17,37,74,.16), 0 4px 10px rgba(17,37,74,.08);
  --shadow-card: 0 10px 30px rgba(17,37,74,.12);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .14s;
  --dur: .22s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply via classes
   ============================================================ */
.r-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.r-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tracking-tight); }
.r-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--tracking-tight); }
.r-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
.r-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; }
.r-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-body); }
.r-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.r-small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: 1.5; }
.r-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}