/* ─────────────────────────────────────────────────────────────────
   Rebecca Feinglos — Design Tokens
   Sourced from the "Rebecca Feinglos Site" Figma (mobile, 390w).
   Palette: cream warmth + royal blue + sky blue, with navy ink.
   Type:    Barlow Condensed (display, all-caps) + Albert Sans (body)
   ───────────────────────────────────────────────────────────────── */

/* Google Fonts — display + body. Garet is licensed; Archivo Black
   stands in for the boxed "REBECCA FEINGLOS" wordmark. */
/* Garet — licensed brand wordmark face, served locally. */
@font-face {
  font-family: "Garet";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://assets.cdn.filesafe.space/e6VVwShvmBjsSP77EkvO/media/6a3381926a6dd1b69af4efcb.otf") format("opentype"),
       url("https://assets.cdn.filesafe.space/e6VVwShvmBjsSP77EkvO/media/6a3381925408771d165e6c92.ttf") format("truetype");
}
@font-face {
  font-family: "Garet";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://assets.cdn.filesafe.space/e6VVwShvmBjsSP77EkvO/media/6a3381925408771d165e6c8e.otf") format("opentype"),
       url("https://assets.cdn.filesafe.space/e6VVwShvmBjsSP77EkvO/media/6a3381926a6dd1b69af4efd0.ttf") format("truetype");
}

/* Barlow Condensed is loaded upright-only — the brand never uses italic display type. */
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300..900;1,300..900&family=Barlow+Condensed:wght@800;900&family=Averia+Serif+Libre:wght@300&display=swap");

:root {
  /* ── Brand color — raw swatches ──────────────────────────────── */
  --rf-royal:           rgb(57, 96, 255);   /* primary accent / CTA */
  --rf-royal-deep:      rgb(15, 75, 211);   /* hover state */
  --rf-navy:            rgb(17, 38, 80);    /* ink / headings */
  --rf-sky:             rgb(173, 229, 255); /* on-royal text + chip fill */
  --rf-sky-tint:        rgb(227, 246, 255); /* full-bleed soft band */
  --rf-pale-blue:       rgb(240, 245, 255); /* gentlest panel wash */
  --rf-faint-blue:      rgb(248, 249, 255); /* tonal divider */
  --rf-cream:           rgb(251, 246, 238); /* warm hero background */
  --rf-coral:           rgb(255, 77, 77);   /* alarm / hand-raise accent */
  --rf-ink:             rgb(0, 0, 0);       /* press logos, hard ink */
  --rf-paper:           rgb(255, 255, 255);
  --rf-rule:            rgba(0, 0, 0, 0.1); /* hairline borders */
  --rf-shadow-soft:     rgba(0, 0, 0, 0.25);

  /* Neutrals — used sparingly, for dividers + image placeholders */
  --rf-n-100:           rgb(243, 241, 244);
  --rf-n-200:           rgb(240, 238, 241);
  --rf-n-300:           rgb(217, 217, 217);

  /* ── Semantic surfaces ──────────────────────────────────────── */
  --rf-bg:              var(--rf-paper);
  --rf-bg-warm:         var(--rf-cream);
  --rf-bg-soft:         var(--rf-sky-tint);
  --rf-bg-softer:       var(--rf-pale-blue);
  --rf-bg-deep:         var(--rf-royal);

  --rf-fg:              var(--rf-navy);
  --rf-fg-muted:        rgba(17, 38, 80, 0.7);
  --rf-fg-on-royal:     var(--rf-sky);
  --rf-fg-on-royal-alt: var(--rf-paper);

  --rf-accent:          var(--rf-royal);
  --rf-accent-soft:     var(--rf-sky);

  /* ── Typography — families ─────────────────────────────────── */
  --rf-font-display:    "Barlow Condensed", "Oswald", sans-serif;
  --rf-font-body:       "Albert Sans", system-ui, -apple-system, sans-serif;
  --rf-font-mark:       "Garet", "Albert Sans", sans-serif;                /* boxed wordmark — licensed Garet Heavy */
  --rf-font-signature:  "Averia Serif Libre", "Caveat", cursive;          /* used once, decoratively */

  /* ── Type scale ─────────────────────────────────────────────── */
  --rf-fs-display-xxl:  100px;  /* marquee */
  --rf-fs-display-xl:   46px;   /* primary section title */
  --rf-fs-display-l:    42px;   /* secondary display */
  --rf-fs-display-m:    36px;
  --rf-fs-display-s:    24px;   /* small caps stack lines */

  --rf-fs-eyebrow:      16px;   /* uppercase tag, semi/bold */
  --rf-fs-body-lg:      18px;
  --rf-fs-body:         16px;
  --rf-fs-meta:         14px;

  /* ── Line heights ───────────────────────────────────────────── */
  --rf-lh-tight:        1.00;   /* display all-caps */
  --rf-lh-snug:         1.15;
  --rf-lh-body:         1.25;   /* body copy in the Figma is tight */
  --rf-lh-relaxed:      1.45;

  /* ── Letter spacing ─────────────────────────────────────────── */
  --rf-tracking-display: 0;
  --rf-tracking-eyebrow: 0.02em;

  /* ── Spacing scale (4px grid, mobile-first) ─────────────────── */
  --rf-s-1:  4px;
  --rf-s-2:  8px;
  --rf-s-3:  12px;
  --rf-s-4:  16px;
  --rf-s-5:  20px;
  --rf-s-6:  24px;   /* default gutter */
  --rf-s-7:  32px;
  --rf-s-8:  40px;
  --rf-s-9:  48px;
  --rf-s-10: 64px;
  --rf-s-11: 80px;
  --rf-gutter: 24px; /* page padding — matches Figma 24/28px edge */

  /* ── Radius ─────────────────────────────────────────────────── */
  --rf-r-0:  0px;     /* default: hard corners */
  --rf-r-1:  2px;
  --rf-r-2:  10px;    /* image cards */
  --rf-r-pill: 999px;

  /* ── Borders ────────────────────────────────────────────────── */
  --rf-border-ink:    2px solid var(--rf-navy);   /* logo box */
  --rf-border-paper:  2px solid var(--rf-paper);  /* on dark blue */
  --rf-border-royal:  2px solid var(--rf-royal);  /* service chip */
  --rf-border-rule:   1px solid var(--rf-rule);

  /* ── Shadows / elevation ────────────────────────────────────── */
  --rf-shadow-card:   0 4px 16px -8px var(--rf-shadow-soft);
  --rf-shadow-pop:    0 8px 28px -12px rgba(17, 38, 80, 0.18);

  /* ── Motion ─────────────────────────────────────────────────── */
  --rf-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --rf-dur-fast:      120ms;
  --rf-dur-base:      220ms;
  --rf-dur-slow:      420ms;
  --rf-dur-marquee:   40s;
}

/* ── Element defaults ─────────────────────────────────────────── */
body {
  font-family: var(--rf-font-body);
  font-size: var(--rf-fs-body);
  line-height: var(--rf-lh-body);
  color: var(--rf-fg);
  background: var(--rf-bg);
  -webkit-font-smoothing: antialiased;
}

h1, .rf-h1 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: var(--rf-fs-display-xl);
  line-height: var(--rf-lh-tight);
  letter-spacing: var(--rf-tracking-display);
  color: var(--rf-royal);
  text-transform: uppercase;
  margin: 0;
}

h2, .rf-h2 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: var(--rf-fs-display-l);
  line-height: var(--rf-lh-tight);
  color: var(--rf-royal);
  text-transform: uppercase;
  margin: 0;
}

h3, .rf-h3 {
  font-family: var(--rf-font-body);
  font-weight: 800;
  font-size: var(--rf-fs-body-lg);
  line-height: 1.4;
  color: var(--rf-royal);
  margin: 0;
}

.rf-eyebrow {
  font-family: var(--rf-font-body);
  font-weight: 700;
  font-size: var(--rf-fs-eyebrow);
  letter-spacing: var(--rf-tracking-eyebrow);
  color: var(--rf-navy);
  margin: 0;
}

.rf-meta {
  font-family: var(--rf-font-body);
  font-weight: 500;
  font-size: var(--rf-fs-meta);
  color: var(--rf-fg-muted);
}

p, .rf-body {
  font-family: var(--rf-font-body);
  font-size: var(--rf-fs-body);
  line-height: var(--rf-lh-body);
  color: var(--rf-navy);
  margin: 0;
}

.rf-body strong { font-weight: 800; }

/* The "boxed wordmark" — used as the persistent navbar logo */
.rf-wordmark {
  font-family: var(--rf-font-mark);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--rf-navy);
  text-transform: uppercase;
  border: var(--rf-border-ink);
  padding: 6px 14px;
  display: inline-block;
}

.rf-wordmark--paper {
  color: var(--rf-paper);
  border-color: var(--rf-paper);
}

/* The marquee / scrolling display strip */
.rf-marquee-text {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: var(--rf-fs-display-s);
  text-transform: uppercase;
  color: var(--rf-royal);
  white-space: nowrap;
}