/* ============================================================
   RECYCLIB — Colors & Type foundation
   Lithium-ion battery recycling · urban mining of critical minerals
   Brand source: uploads/Font & color file.jpg
     Primary lime   #93C01F
     Forest green   #21442F
     Display font   Pasajero (uploads/Pasajero.otf)
   ============================================================ */

/* ---------- Fonts ---------- */
/* Nunito — the Recyclib website typeface: headlines (heavy), body, UI, all-caps.
   Pasajero — supplied brand display face, but it is CAPS-ONLY (no lowercase glyphs),
   so it is kept as an optional wordmark/title accent (--font-wordmark), not the
   default headline face. DM Mono for data/specs. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');
@font-face {
  font-family: "Pasajero";
  src: url("fonts/Pasajero.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     BRAND COLOR — the two source colors + a tonal system
     ---------------------------------------------------------- */
  --lime-500: #93C01F;   /* PRIMARY — the brand lime */
  --lime-600: #7FA81A;   /* hover / pressed lime */
  --lime-700: #6B8E16;   /* deep lime, on light */
  --lime-400: #A9D13F;   /* bright accent */
  --lime-300: #C6E27D;   /* soft accent */
  --lime-200: #E2F0BE;   /* tint fill */
  --lime-100: #F1F7DE;   /* faint wash */

  --forest-900: #142A1D; /* deepest forest */
  --forest-800: #1A3626; /* near-black green surface */
  --forest-700: #21442F; /* SECONDARY — brand forest */
  --forest-600: #2E5A3F; /* raised forest */
  --forest-500: #3E6B4D; /* mid green */
  --forest-300: #8FB29E; /* muted sage */
  --forest-100: #DCE8E0; /* sage tint */

  /* ----------------------------------------------------------
     NEUTRALS — warm, very slightly green-shifted greys
     ---------------------------------------------------------- */
  --ink-900: #121613;    /* primary text on light */
  --ink-700: #2C322D;    /* strong body text */
  --ink-500: #5B645D;    /* secondary text */
  --ink-400: #828B83;    /* muted / captions */
  --ink-300: #AEB5AF;    /* disabled text, hairlines on dark */
  --line-200: #E2E6E1;   /* borders / dividers */
  --line-100: #EEF1EC;   /* subtle dividers */
  --paper-50: #F6F8F3;   /* app background (warm off-white) */
  --paper-0:  #FFFFFF;   /* card / surface white */

  /* ----------------------------------------------------------
     SEMANTIC ROLES
     ---------------------------------------------------------- */
  --bg:            var(--paper-50);
  --surface:       var(--paper-0);
  --surface-sunk:  var(--lime-100);
  --fg1:           var(--ink-900); /* primary text */
  --fg2:           var(--ink-500); /* secondary text */
  --fg3:           var(--ink-400); /* tertiary text */
  --border:        var(--line-200);
  --border-strong: var(--ink-300);

  --primary:        var(--lime-500);
  --primary-hover:  var(--lime-600);
  --primary-press:  var(--lime-700);
  --on-primary:     var(--forest-900); /* text on lime — dark, per logo */
  --accent:         var(--forest-700);
  --accent-hover:   var(--forest-600);
  --on-accent:      #FFFFFF;
  --focus-ring:     #6B8E16;

  /* status */
  --success: #4C9A2A;
  --success-bg: #E7F3DD;
  --warning: #C7891B;
  --warning-bg: #FBF0D8;
  --danger:  #C0492F;
  --danger-bg: #F8E2DC;
  --info:    #2E6B6B;
  --info-bg: #DDEDED;

  /* ----------------------------------------------------------
     TYPE — families, weights
     ---------------------------------------------------------- */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; /* headlines (heavy) */
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; /* UI + body */
  --font-wordmark: "Pasajero", "Nunito", system-ui, sans-serif; /* CAPS-ONLY accent face */
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* data / specs */

  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale — 1.250 major-third-ish, tuned */
  --t-display: 800;
  --fs-display: clamp(44px, 6vw, 88px);
  --fs-h1: clamp(34px, 4.4vw, 56px);
  --fs-h2: clamp(27px, 3.2vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-eyebrow: 12.5px;

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  /* tracking */
  --track-display: -0.015em;
  --track-eyebrow: 0.22em;   /* the wide brand tracking from the wordmark */
  --track-wide: 0.08em;

  /* ----------------------------------------------------------
     RADII · SHADOWS · SPACING
     ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --shadow-xs: 0 1px 2px rgba(20, 42, 29, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 42, 29, 0.07);
  --shadow-md: 0 10px 28px -8px rgba(20, 42, 29, 0.14);
  --shadow-lg: 0 28px 60px -18px rgba(20, 42, 29, 0.24);
  --shadow-lime: 0 12px 28px -10px rgba(127, 168, 26, 0.5);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 220ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt in via .rcl-prose or classes)
   ============================================================ */
.rcl-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--primary-press);
}
.rcl-display {
  font-family: var(--font-display);
  font-weight: var(--t-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.rcl-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg1); }
.rcl-h2 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg1); }
.rcl-h3 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: 1.25; color: var(--fg1); }
.rcl-h4 { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--fs-h4); line-height: 1.3; color: var(--fg1); }
.rcl-lead { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-lead); line-height: 1.55; color: var(--fg2); }
.rcl-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); }
.rcl-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.5; color: var(--fg2); }
.rcl-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; color: var(--fg1); }