/* ============================================================
   RetentionUp — Colors & Type
   Source: design-system/source-html/homepage.html (GoHighLevel export)
   Brand fonts: Manrope (variable 200–800) for headings AND body.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Manrope";
  src: url("./Manrope.ttf") format("truetype-variations"),
       url("./Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* ---- Brand palette ---- */
  --ru-blue:         #316CF0;  /* primary — "Up" in wordmark, CTAs, links, bullets */
  --ru-blue-hover:   #1e58dc;  /* darkened ~8% for hover/press */
  --ru-blue-soft:    #F6F6FF;  /* near-white blue tint for subtle panels */
  --ru-black:        #1A1C1F;  /* headings + body text */
  --ru-ink:          #000000;  /* pure black — logo, wordmark */
  --ru-off-white:    #F3F5F7;  /* default page surface, CTA text-on-blue */
  --ru-off-white-2:  #F9F9F9;  /* alt canvas */
  --ru-white:        #FFFFFF;

  /* ---- Neutral ramp (derived from site + standard scale) ---- */
  --ru-gray-50:      #F9F9F9;
  --ru-gray-100:     #F3F5F7;
  --ru-gray-200:     #EBEBEB;   /* CTA banner fill, dividers */
  --ru-gray-300:     #C9D8E0;
  --ru-gray-400:     #8893A8;   /* muted body / meta text */
  --ru-gray-500:     #565A7C;
  --ru-gray-700:     #1A1C1F;

  /* ---- Semantic (from site's alert/info boards) ---- */
  --ru-red:          #e93d3d;   /* strike-through "don't do this" bullets */
  --ru-red-soft:     #FAA1A1;
  --ru-red-ink:      #8C0D0B;
  --ru-amber-soft:   #FCF2B5;
  --ru-amber-ink:    #B39906;
  --ru-green:        #37ca37;   /* primary-accent green (rare) */

  /* ---- Functional tokens ---- */
  --ru-bg:           var(--ru-off-white);
  --ru-surface:      var(--ru-white);
  --ru-surface-muted:var(--ru-gray-200);
  --ru-text:         var(--ru-black);
  --ru-text-muted:   var(--ru-gray-400);
  --ru-link:         var(--ru-blue);
  --ru-border:       var(--ru-gray-200);
  --ru-border-strong:var(--ru-gray-300);

  /* ---- Radii ---- */
  --ru-radius-sm:      6px;
  --ru-radius-btn:    10px;  /* buttons & form inputs (320×60 CTA → 10px) */
  --ru-radius-md:     10px;  /* alias */
  --ru-radius-section:20px;  /* section callouts, CTA banners, large panels */
  --ru-radius-lg:     20px;  /* alias */
  --ru-radius-pill: 1000px;  /* callouts, eyebrow tags, mini headings */

  /* ---- Shadow system (light, flat brand) ---- */
  --ru-shadow-xs:    0 1px 2px rgba(26, 28, 31, 0.06);
  --ru-shadow-sm:    0 2px 6px rgba(26, 28, 31, 0.06);
  --ru-shadow-md:    0 8px 24px rgba(26, 28, 31, 0.08);
  --ru-shadow-lg:    0 24px 60px rgba(26, 28, 31, 0.12);

  /* ---- Spacing (8-pt with 4-pt steps) ---- */
  --ru-space-1:  4px;
  --ru-space-2:  8px;
  --ru-space-3:  12px;
  --ru-space-4:  16px;
  --ru-space-5:  20px;
  --ru-space-6:  24px;
  --ru-space-8:  32px;
  --ru-space-10: 40px;
  --ru-space-12: 48px;
  --ru-space-16: 64px;
  --ru-space-20: 80px;

  /* ---- Type stack ---- */
  --ru-font-head:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ru-font-body:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (desktop; mobile overrides below) ---- */
  --ru-size-display: 59px;   /* hero H1 desktop */
  --ru-size-h1:      48px;
  --ru-size-h2:      36px;
  --ru-size-h3:      26px;
  --ru-size-h4:      20px;
  --ru-size-body-l:  20px;
  --ru-size-body:    18px;
  --ru-size-small:   15px;
  --ru-size-micro:   13px;

  /* ---- Type weights used ---- */
  --ru-wt-regular: 400;
  --ru-wt-medium:  500;
  --ru-wt-semi:    600;
  --ru-wt-bold:    700;
  --ru-wt-xbold:   800;   /* button labels */

  /* ---- Line heights ---- */
  --ru-lh-tight: 1.1;
  --ru-lh-snug:  1.3;     /* default for headings/body — observed repeatedly */
  --ru-lh-body:  1.5;     /* p { line-height: 1.5em } in source */

  /* ---- Container ---- */
  --ru-container: 1170px; /* max-width used in source */
  --ru-readable:  600px;  /* row width for prose */
}

@media (max-width: 480px) {
  :root {
    --ru-size-display: 36px;
    --ru-size-h1:      32px;
    --ru-size-h2:      30px;
    --ru-size-h3:      24px;
    --ru-size-body-l:  18px;
  }
}

/* ============================================================
   Semantic element styles — opt-in via <body class="ru">
   or by importing and using the classes.
   ============================================================ */
.ru, .ru * { box-sizing: border-box; }

.ru {
  background: var(--ru-bg);
  color: var(--ru-text);
  font-family: var(--ru-font-body);
  font-size: var(--ru-size-body);
  line-height: var(--ru-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ru h1, .ru .h1,
.ru h2, .ru .h2,
.ru h3, .ru .h3,
.ru h4, .ru .h4 {
  font-family: var(--ru-font-head);
  color: var(--ru-black);
  line-height: var(--ru-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ru-space-5);
  font-weight: var(--ru-wt-bold);
}

.ru h1, .ru .h1 { font-size: var(--ru-size-display); letter-spacing: -0.02em; }
.ru h2, .ru .h2 { font-size: var(--ru-size-h2); }
.ru h3, .ru .h3 { font-size: var(--ru-size-h3); }
.ru h4, .ru .h4 { font-size: var(--ru-size-h4); font-weight: var(--ru-wt-semi); }

.ru p  { margin: 0 0 var(--ru-space-4); line-height: var(--ru-lh-body); }
.ru a  { color: var(--ru-link); text-decoration: none; }
.ru a:hover { text-decoration: underline; }

.ru .eyebrow {
  font-size: var(--ru-size-micro);
  font-weight: var(--ru-wt-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ru-blue);
}

.ru .muted    { color: var(--ru-text-muted); }
.ru .lead     { font-size: var(--ru-size-body-l); }

/* Buttons — primary (blue fill, white text, 15px 30px, 800 weight) */
.ru .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ru-space-2);
  font-family: var(--ru-font-body);
  font-weight: var(--ru-wt-xbold);
  font-size: 18px;
  line-height: 1;
  padding: 15px 30px;
  border-radius: var(--ru-radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, transform .08s ease;
}
.ru .btn-primary {
  background: var(--ru-blue);
  color: var(--ru-off-white);
}
.ru .btn-primary:hover { background: var(--ru-blue-hover); text-decoration: none; }
.ru .btn-primary:active { transform: translateY(1px); }

.ru .btn-ghost {
  background: transparent;
  color: var(--ru-black);
  border-color: var(--ru-black);
}
.ru .btn-ghost:hover { background: var(--ru-black); color: var(--ru-white); }

/* Card / section callout — flat, rounded 20px, soft shadow */
.ru .card {
  background: var(--ru-surface);
  border-radius: var(--ru-radius-section);
  box-shadow: var(--ru-shadow-sm);
  padding: var(--ru-space-6);
}

/* Pill tag — callouts, eyebrow chips, mini headings */
.ru .pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--ru-radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ru-blue);
  color: var(--ru-off-white);
}

/* Bulleted list with blue marker (matches source `li::marker` styling) */
.ru ul.ru-bullets {
  list-style: none;
  padding-left: 1.5em;
  margin: 0 0 var(--ru-space-5);
}
.ru ul.ru-bullets li {
  position: relative;
  padding-left: 0.5em;
  margin-bottom: var(--ru-space-2);
  line-height: var(--ru-lh-body);
}
.ru ul.ru-bullets li::before {
  content: "✓";
  position: absolute;
  left: -1.25em;
  color: var(--ru-blue);
  font-weight: var(--ru-wt-bold);
}
.ru ul.ru-bullets.red li::before {
  content: "✕";
  color: var(--ru-red);
}

/* Images — use section radius for consistency with cards/banners */
.ru img { border-radius: var(--ru-radius-section); }