/* ============================================================
   RECAMBIOFACIL — DESIGN SYSTEM FOUNDATIONS
   colors_and_type.css
   Modern industrial-technical B2B direction.
   Fonts loaded via Google Fonts CDN (see @import below). If you
   need offline files, download Archivo, Hanken Grotesk & JetBrains
   Mono from fonts.google.com into ./fonts and swap the @import.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --rf-orange:        #F26A21;  /* primary brand / CTAs / accent */
  --rf-navy:          #1E2A3A;  /* brand dark — headers, logo dark */

  /* ---------- ORANGE SCALE ---------- */
  --orange-50:   #FEF1EA;
  --orange-100:  #FDDCCB;
  --orange-200:  #FABF9D;
  --orange-300:  #F79D6C;
  --orange-400:  #F58245;
  --orange-500:  #F26A21;  /* = brand */
  --orange-600:  #D9530F;  /* hover */
  --orange-700:  #B23F08;  /* pressed / active */

  /* ---------- INK / NAVY SCALE ---------- */
  --ink-950:  #0E1620;
  --ink-900:  #131C26;
  --ink-800:  #1E2A3A;  /* = brand navy */
  --ink-700:  #2C3E50;
  --ink-600:  #3D5266;

  /* ---------- NEUTRAL / SLATE SCALE ---------- */
  --white:     #FFFFFF;
  --slate-50:  #F5F6F8;  /* app background */
  --slate-100: #ECEEF1;
  --slate-200: #DDE1E6;  /* hairline borders */
  --slate-300: #C4CAD2;
  --slate-400: #9AA3AE;
  --slate-500: #6B7682;  /* secondary text */
  --slate-600: #4D5762;
  --slate-700: #364049;

  /* ---------- SEMANTIC STATUS ---------- */
  --success:     #1E8E5A;
  --success-bg:  #E6F4EC;
  --warning:     #C77D11;
  --warning-bg:  #FBF1DE;
  --danger:      #D64545;
  --danger-bg:   #FBE9E9;
  --info:        #2E6FD8;
  --info-bg:     #E7F0FC;

  /* ---------- DOMAIN / PART-TYPE TAGS ----------
     OEM = original · IAM = equivalente · CAT = recuperado */
  --tag-oem:     #1E2A3A;   --tag-oem-bg:  #E8EBEF;
  --tag-iam:     #2E6FD8;   --tag-iam-bg:  #E7F0FC;
  --tag-cat:     #1E8E5A;   --tag-cat-bg:  #E6F4EC;

  /* ---------- SEMANTIC SURFACES & TEXT ---------- */
  --bg-app:      var(--slate-50);
  --bg-surface:  var(--white);
  --bg-sunken:   var(--slate-100);
  --bg-inverse:  var(--ink-800);

  --fg1:  var(--ink-900);    /* primary text / headings */
  --fg2:  var(--slate-600);  /* body text */
  --fg3:  var(--slate-500);  /* secondary / captions */
  --fg4:  var(--slate-400);  /* placeholder / disabled */
  --fg-on-orange: #FFFFFF;
  --fg-on-dark:   #FFFFFF;
  --fg-link:      var(--orange-600);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --focus-ring:    rgba(242,106,33,0.40);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (px / line-height) ---------- */
  --text-display: 700 56px/1.04 var(--font-display);
  --text-h1:      800 40px/1.08 var(--font-display);
  --text-h2:      700 30px/1.14 var(--font-display);
  --text-h3:      700 22px/1.2  var(--font-display);
  --text-h4:      600 18px/1.3  var(--font-display);
  --text-eyebrow: 700 12px/1.2  var(--font-display);  /* uppercase, tracked */
  --text-lead:    400 19px/1.55 var(--font-body);
  --text-body:    400 16px/1.6  var(--font-body);
  --text-sm:      400 14px/1.5  var(--font-body);
  --text-xs:      500 12px/1.4  var(--font-body);
  --text-mono:    500 14px/1.4  var(--font-mono);
  --text-mono-sm: 500 12px/1.4  var(--font-mono);

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.12em;

  /* ---------- RADII ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base grid) ---------- */
  --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;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs:  0 1px 2px rgba(19,28,38,0.06);
  --shadow-sm:  0 1px 3px rgba(19,28,38,0.08), 0 1px 2px rgba(19,28,38,0.04);
  --shadow-md:  0 4px 12px rgba(19,28,38,0.08), 0 2px 4px rgba(19,28,38,0.04);
  --shadow-lg:  0 12px 28px rgba(19,28,38,0.12), 0 4px 8px rgba(19,28,38,0.05);
  --shadow-orange: 0 6px 16px rgba(242,106,33,0.28);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS (opt-in via .rf-prose or utility)
   ============================================================ */
.rf-display { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.rf-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.rf-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.rf-h3 { font: var(--text-h3); color: var(--fg1); }
.rf-h4 { font: var(--text-h4); color: var(--fg1); }
.rf-eyebrow {
  font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--orange-600);
}
.rf-lead { font: var(--text-lead); color: var(--fg2); }
.rf-body { font: var(--text-body); color: var(--fg2); }
.rf-sm   { font: var(--text-sm); color: var(--fg3); }
.rf-mono { font: var(--text-mono); color: var(--fg1); letter-spacing: 0.01em; }

/* Reference / VIN / price tabular numerals */
.rf-ref { font: var(--text-mono); letter-spacing: 0.04em; color: var(--ink-800); font-variant-numeric: tabular-nums; }