/* ==========================================================================
   RoofLeadHQ — Design Tokens
   Locked 2026-07-22. Source of truth: docs/RoofLeadHQ-Premium-Design-Direction.md

   Everything visual derives from this file. If a value isn't here, it shouldn't
   be in a stylesheet or a class attribute. One accent, used rarely, is the
   premium signal — resist adding a second.
   ========================================================================== */

/* --- Typefaces -------------------------------------------------------------
   Three roles, per the design direction:
     Display — Space Grotesk. Characterful grotesque, set large and tight.
     Body    — Inter. Warm humanist sans, generous line-height.
     Mono    — JetBrains Mono. The "precision instrument" signal: response
               times, report figures, the hero timer.
   All three are free via Google Fonts, so nothing is licence-blocked.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === Palette — 5 disciplined colors ==================================== */
  --rlhq-graphite:    #1E2327;  /* primary ink, headlines, dark "moment" sections */
  --rlhq-blueprint:   #F5F6F4;  /* main background — cool architectural off-white */
  --rlhq-zinc:        #667076;  /* secondary text, weathered-metal gray */
  --rlhq-slate-line:  #D5D9D6;  /* hairline dividers, card borders */
  --rlhq-ember:       #D97E1F;  /* THE one warm accent — CTAs and key highlights ONLY */

  /* ---------------------------------------------------------------------
     Two accessibility corrections to the palette as originally specced.
     Both were verified by contrast measurement, not eyeballed:

     1. Zinc was #6A757B. On Blueprint that is 4.36:1 — below the 4.5:1 WCAG AA
        floor for body text, and Zinc carries ALL secondary copy. Darkened to
        #667076 (4.67:1). The shift is imperceptible side by side.

     2. Ember was #C07A2C; on 2026-07-24 it was made more vivid (less gray) at
        Jason's direction — #D97E1F. Kept the same amber hue, raised saturation.
        White text on it still fails AA, so primary CTAs keep a GRAPHITE label —
        and the new value actually IMPROVES that: graphite-on-ember is now 5.25:1
        (was 4.57:1), which also avoids the white-on-orange look of every SaaS site.

     Ember must not be used for body-size text on Blueprint. It is fine
     on Graphite (5.25:1), which is why the nav hover state uses it.
     --------------------------------------------------------------------- */
  --rlhq-on-ember:    var(--rlhq-graphite);  /* label colour for ember surfaces */

  /* Derived — mixes of the five above, not new colors. */
  --rlhq-surface:       #FFFFFF;                  /* cards on blueprint */
  --rlhq-graphite-soft: #2C3339;                  /* raised surfaces on dark sections */
  --rlhq-ember-hover:   #BE6D18;                  /* ember, pressed (tracks the vivid ember) */
  --rlhq-ember-wash:    rgba(217, 126, 31, 0.10); /* faint accent fill */
  --rlhq-focus-ring:    rgba(217, 126, 31, 0.45); /* keyboard focus — quality floor */

  /* === Type ============================================================== */
  --rlhq-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --rlhq-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --rlhq-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Scale — 1.25 major third, rounded to whole px. Display sizes are fluid so
     large type stays confident on desktop without overflowing mobile. */
  --rlhq-text-xs:   0.75rem;   /* 12px — labels, legal */
  --rlhq-text-sm:   0.875rem;  /* 14px — secondary */
  --rlhq-text-base: 1rem;      /* 16px — body floor; never smaller for prose */
  --rlhq-text-lg:   1.125rem;  /* 18px — lead paragraphs */
  --rlhq-text-xl:   1.5rem;    /* 24px — card headings */
  --rlhq-text-2xl:  clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);  /* section subheads */
  --rlhq-text-3xl:  clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);  /* section headlines */
  --rlhq-text-4xl:  clamp(2.75rem, 1.8rem + 4vw,   4.5rem);   /* hero */

  --rlhq-leading-tight:   1.08;  /* display — set tight and confident */
  --rlhq-leading-snug:    1.3;   /* subheads */
  --rlhq-leading-relaxed: 1.65;  /* body — generous, per the direction */

  --rlhq-tracking-tight:  -0.02em;  /* display */
  --rlhq-tracking-normal:  0;
  --rlhq-tracking-wide:    0.08em;  /* small caps / eyebrow labels */

  /* === Spacing rhythm — 8px base ========================================= */
  --rlhq-space-1:  0.25rem;  /*  4 */
  --rlhq-space-2:  0.5rem;   /*  8 */
  --rlhq-space-3:  0.75rem;  /* 12 */
  --rlhq-space-4:  1rem;     /* 16 */
  --rlhq-space-6:  1.5rem;   /* 24 */
  --rlhq-space-8:  2rem;     /* 32 */
  --rlhq-space-12: 3rem;     /* 48 */
  --rlhq-space-16: 4rem;     /* 64 */
  --rlhq-space-24: 6rem;     /* 96 — section padding, mobile */
  --rlhq-space-32: 8rem;     /* 128 — section padding, desktop. Air over density. */

  /* === Shape ============================================================= */
  /* ONE corner radius, per the quality floor. Pill is for buttons only. */
  --rlhq-radius:      12px;
  --rlhq-radius-pill: 999px;
  --rlhq-border:      1px solid var(--rlhq-slate-line);

  /* === Elevation — subtle. Depth comes from the graphite/blueprint shift,
         not from heavy drop shadows. ====================================== */
  --rlhq-shadow-sm: 0 1px 2px rgba(30, 35, 39, 0.05);
  --rlhq-shadow-md: 0 4px 16px rgba(30, 35, 39, 0.07);
  --rlhq-shadow-lg: 0 18px 44px rgba(30, 35, 39, 0.11);

  /* === Layout ============================================================ */
  --rlhq-container: 1200px;
  --rlhq-measure:   68ch;   /* max prose width — readability */

  /* === Motion — restrained. Over-animation is a tell. ==================== */
  --rlhq-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --rlhq-duration-fast: 140ms;
  --rlhq-duration:      240ms;

  /* Roof-pitch angle — the quiet structural divider. Shallow, like a real
     low-slope roofline. Used between a couple of key sections, not everywhere. */
  --rlhq-pitch: 2.5deg;
}

/* --- Reduced motion: honor the OS setting (design direction: "respect it") -- */
@media (prefers-reduced-motion: reduce) {
  :root { --rlhq-duration-fast: 0ms; --rlhq-duration: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Primitives — the shared button/card styles the direction asks us to lock.
   ========================================================================== */

.rlhq-body {
  background: var(--rlhq-blueprint);
  color: var(--rlhq-graphite);
  font-family: var(--rlhq-font-body);
  font-size: var(--rlhq-text-base);
  line-height: var(--rlhq-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

.rlhq-display {
  font-family: var(--rlhq-font-display);
  font-weight: 700;
  line-height: var(--rlhq-leading-tight);
  letter-spacing: var(--rlhq-tracking-tight);
}

/* Mono — the precision signal. Response times, figures, the hero timer. */
.rlhq-data {
  font-family: var(--rlhq-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Eyebrow label above section headlines. */
.rlhq-eyebrow {
  font-family: var(--rlhq-font-mono);
  font-size: var(--rlhq-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--rlhq-tracking-wide);
  color: var(--rlhq-zinc);
}

/* --- Buttons — one shared style, two weights ------------------------------ */
.rlhq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rlhq-space-2);
  padding: var(--rlhq-space-4) var(--rlhq-space-8);
  border-radius: var(--rlhq-radius-pill);
  font-family: var(--rlhq-font-body);
  font-weight: 600;
  font-size: var(--rlhq-text-base);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--rlhq-duration) var(--rlhq-ease),
              border-color var(--rlhq-duration) var(--rlhq-ease),
              color var(--rlhq-duration) var(--rlhq-ease),
              transform var(--rlhq-duration-fast) var(--rlhq-ease);
}
.rlhq-btn:hover { transform: translateY(-1px); }   /* calm, not bouncy */
.rlhq-btn:active { transform: translateY(0); }

/* Primary — Ember. This is where the one accent gets spent.
   Label is graphite, not white: see the contrast note in the palette block. */
.rlhq-btn--primary { background: var(--rlhq-ember); color: var(--rlhq-on-ember); }
.rlhq-btn--primary:hover { background: var(--rlhq-ember-hover); color: #FFFFFF; }

/* Secondary — graphite outline. Most CTAs on the page should be this, so the
   ember primary stays rare enough to mean something. */
.rlhq-btn--secondary {
  background: transparent;
  color: var(--rlhq-graphite);
  border-color: var(--rlhq-graphite);
}
.rlhq-btn--secondary:hover { background: var(--rlhq-graphite); color: var(--rlhq-blueprint); }

/* On dark graphite sections. */
.rlhq-btn--inverse {
  background: var(--rlhq-blueprint);
  color: var(--rlhq-graphite);
}
.rlhq-btn--inverse:hover { background: #FFFFFF; }

/* --- Focus — visible keyboard focus is part of the quality floor ---------- */
.rlhq-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--rlhq-ember);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rlhq-focus-ring);
  border-radius: var(--rlhq-radius);
}

/* --- Cards — one shared style -------------------------------------------- */
.rlhq-card {
  background: var(--rlhq-surface);
  border: var(--rlhq-border);
  border-radius: var(--rlhq-radius);
  padding: var(--rlhq-space-8);
  box-shadow: var(--rlhq-shadow-sm);
  transition: box-shadow var(--rlhq-duration) var(--rlhq-ease),
              border-color var(--rlhq-duration) var(--rlhq-ease);
}
.rlhq-card:hover { box-shadow: var(--rlhq-shadow-md); }

/* The one emphasized card (e.g. Growth). Ember hairline, no ring, no glow. */
.rlhq-card--featured { border-color: var(--rlhq-ember); box-shadow: var(--rlhq-shadow-md); }

/* --- Dark "moment" section ------------------------------------------------ */
.rlhq-dark {
  background: var(--rlhq-graphite);
  color: var(--rlhq-blueprint);
}
.rlhq-dark .rlhq-card { background: var(--rlhq-graphite-soft); border-color: rgba(213,217,214,0.14); }
.rlhq-dark .rlhq-eyebrow { color: rgba(245,246,244,0.62); }

/* --- The pitch line — shallow roof-pitch divider. Use sparingly: between a
       couple of key sections only, never on every one. --------------------- */
.rlhq-pitch-top    { clip-path: polygon(0 var(--rlhq-pitch-depth,3.5vw), 100% 0, 100% 100%, 0 100%); }
.rlhq-pitch-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rlhq-pitch-depth,3.5vw)), 0 100%); }

/* --- Product framing — screenshots get a consistent frame on a faint
       blueprint-tinted panel, never floating raw. ------------------------- */
.rlhq-frame {
  background: var(--rlhq-blueprint);
  border: var(--rlhq-border);
  border-radius: var(--rlhq-radius);
  padding: var(--rlhq-space-3);
  box-shadow: var(--rlhq-shadow-lg);
}
.rlhq-frame img { display: block; width: 100%; border-radius: calc(var(--rlhq-radius) - 4px); }

/* --- Rhythm helpers ------------------------------------------------------- */
.rlhq-section { padding-block: var(--rlhq-space-24); }
@media (min-width: 1024px) { .rlhq-section { padding-block: var(--rlhq-space-32); } }

.rlhq-container {
  width: 100%;
  max-width: var(--rlhq-container);
  margin-inline: auto;
  padding-inline: var(--rlhq-space-6);
}

.rlhq-measure { max-width: var(--rlhq-measure); }
.rlhq-divider { border: 0; border-top: var(--rlhq-border); }

/* ------------------------------------------------------------------ screen-reader only ---
   Text present for assistive technology and absent from the visual design. Used to say "opens
   in a new tab" on links that do exactly that: the site opens page-to-page navigation in a new
   tab, and a sighted user sees that happen, while a screen-reader user gets no signal at all
   unless the link says so.

   `position:absolute` is the load-bearing declaration, and not only for hiding. It takes the
   span OUT OF FLOW, so it is not a flex item — which means it cannot add a `gap` inside the
   button-styled links this is applied to. `display:none` and `visibility:hidden` would both
   hide the text from screen readers too, which defeats the entire purpose.

   Lives in tokens.css because every page loads it. The homepage also has Tailwind's `sr-only`,
   which is the same technique; this exists for the pages that do NOT load Tailwind, so both
   kinds of page can carry one identical announcement. */
.rlhq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}