/* ===========================================================
   P.R. International — Design tokens
   Palette: White + Emerald
   =========================================================== */
:root {
  /* Brand greens */
  --emerald-900: #064E3B;
  --emerald-800: #065F46;
  --emerald-700: #0E7C5A;   /* signature */
  --emerald-600: #059669;
  --emerald-500: #10B981;   /* vivid accent */
  --emerald-400: #34D399;
  --emerald-300: #6EE7B7;
  --emerald-100: #D1FAE5;
  --emerald-50:  #ECFDF5;

  /* Neutrals */
  --white:    #ffffff;
  --paper:    #FAFAF7;   /* off-white background */
  --ink:      #0A0F0D;   /* near-black text */
  --ink-soft: #1A211E;
  --slate:    #5A6661;   /* muted text */
  --line:     #E6E9E7;   /* hairline borders */
  --line-2:   #D5DAD8;

  /* Semantic */
  --bg:        var(--paper);
  --surface:   var(--white);
  --text:      var(--ink);
  --text-muted:var(--slate);
  --accent:    var(--emerald-700);
  --accent-2:  var(--emerald-500);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--emerald-500), var(--emerald-700) 60%, var(--emerald-900));
  --grad-soft:  linear-gradient(180deg, var(--emerald-50), transparent);
  --grad-text:  linear-gradient(120deg, var(--emerald-600), var(--emerald-800));

  /* Typography */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-xl:   clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --fs-2xl:  clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-3xl:  clamp(2.4rem, 1.6rem + 3.8vw, 4.5rem);
  --fs-hero: clamp(2.8rem, 1.6rem + 5.5vw, 6rem);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  /* Radius & shadows */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(6, 78, 59, 0.06);
  --shadow-md: 0 14px 40px rgba(6, 78, 59, 0.10);
  --shadow-lg: 0 30px 70px rgba(6, 78, 59, 0.16);
  --shadow-emerald: 0 18px 40px rgba(16, 185, 129, 0.28);

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}