/* ==========================================================================
   R&R Marketing — Colors & Typography Tokens
   Source of truth for all visual foundations.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand Colors ---------- */
  --rr-primary:        #2F6BFF;  /* Brand primary (electric blue) */
  --rr-primary-hover:  #1E5AEA;
  --rr-primary-alt:    #0055FF;  /* Deep CTA blue used on About page */
  --rr-secondary:      #4F46E5;  /* Gradient endpoint (indigo) */
  --rr-accent-gold:    #FFC107;  /* Stars / ratings */
  --rr-accent-gold-2:  #EF9F27;  /* Alternate star amber (case studies) */

  /* Brand gradients */
  --rr-gradient-primary: linear-gradient(90deg, #2F6BFF 0%, #4F46E5 100%);
  --rr-gradient-headline: linear-gradient(90deg, #2F6BFF 0%, #FFFFFF 100%);
  --rr-glow-primary: 0 0 20px rgba(47, 107, 255, 0.5);
  --rr-glow-primary-lg: 0 0 40px rgba(47, 107, 255, 0.4);

  /* ---------- Surface / Background Scale (dark, near-black) ---------- */
  --rr-bg:            #050B14;   /* Canvas / brand dark */
  --rr-bg-alt:        #03070E;   /* Section contrast */
  --rr-bg-deep:       #02050A;   /* Footer / deepest layer */
  --rr-bg-panel:      #0A0F1A;   /* Modal / panel */
  --rr-bg-card:       #111827;   /* Solid card base (proof cards) */
  --rr-bg-elev:       #1A1A1A;   /* Elevated solid surface */

  /* Glass tints (apply over dark bg with backdrop-blur) */
  --rr-glass-1: rgba(255, 255, 255, 0.02);
  --rr-glass-2: rgba(255, 255, 255, 0.03);
  --rr-glass-3: rgba(255, 255, 255, 0.05);
  --rr-glass-4: rgba(255, 255, 255, 0.10);

  /* Borders (white at low alpha over dark) */
  --rr-border-faint:  rgba(255, 255, 255, 0.05);
  --rr-border-subtle: rgba(255, 255, 255, 0.10);
  --rr-border-strong: rgba(255, 255, 255, 0.20);
  --rr-border-brand:  rgba(47, 107, 255, 0.30);

  /* ---------- Foreground / Text Scale ---------- */
  --rr-fg:        #FFFFFF;        /* Primary text */
  --rr-fg-1:      #FFFFFF;        /* Alias */
  --rr-fg-2:      #D1D5DB;        /* Secondary body (gray-300) */
  --rr-fg-3:      #9CA3AF;        /* Tertiary body (gray-400) */
  --rr-fg-4:      #6B7280;        /* Muted labels (gray-500) */
  --rr-fg-5:      #4B5563;        /* Very muted (gray-600) */

  /* ---------- Semantic ---------- */
  --rr-success:   #34D399;        /* green-400 */
  --rr-success-bg: rgba(34, 197, 94, 0.20);
  --rr-danger:    #F87171;        /* red-400 */
  --rr-danger-bg: rgba(239, 68, 68, 0.10);
  --rr-warning:   #FFC107;

  /* ---------- Radii ---------- */
  --rr-radius-sm:   6px;
  --rr-radius-md:   8px;
  --rr-radius-lg:   12px;   /* rounded-xl */
  --rr-radius-xl:   16px;   /* rounded-2xl */
  --rr-radius-2xl:  24px;   /* rounded-3xl (primary card radius) */
  --rr-radius-pill: 9999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --rr-space-1: 4px;
  --rr-space-2: 8px;
  --rr-space-3: 12px;
  --rr-space-4: 16px;
  --rr-space-5: 20px;
  --rr-space-6: 24px;
  --rr-space-8: 32px;
  --rr-space-10: 40px;
  --rr-space-12: 48px;
  --rr-space-16: 64px;
  --rr-space-20: 80px;
  --rr-space-24: 96px;
  --rr-space-32: 128px;

  /* ---------- Shadows / Glows ---------- */
  --rr-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --rr-shadow-xl:   0 25px 60px rgba(0, 0, 0, 0.5);
  --rr-shadow-cta:  0 0 30px rgba(47, 107, 255, 0.4);
  --rr-shadow-cta-hover: 0 0 60px rgba(47, 107, 255, 0.6);
  --rr-inner-brand-halo: 0 0 40px rgba(47, 107, 255, 0.10);

  /* ---------- Typography ---------- */
  --rr-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (desktop). Slide by ~0.75× on mobile. */
  --rr-text-xs:    12px;
  --rr-text-sm:    14px;
  --rr-text-base:  16px;
  --rr-text-lg:    18px;
  --rr-text-xl:    20px;
  --rr-text-2xl:   24px;
  --rr-text-3xl:   30px;
  --rr-text-4xl:   36px;
  --rr-text-5xl:   48px;
  --rr-text-6xl:   60px;
  --rr-text-7xl:   72px;

  --rr-leading-tight: 1.1;
  --rr-leading-snug:  1.25;
  --rr-leading-normal: 1.5;
  --rr-leading-relaxed: 1.65;

  --rr-tracking-tight: -0.02em;
  --rr-tracking-wide:  0.05em;
  --rr-tracking-widest: 0.2em;   /* Eyebrow labels */

  --rr-weight-regular: 400;
  --rr-weight-medium:  500;
  --rr-weight-semibold: 600;
  --rr-weight-bold:    700;
  --rr-weight-extrabold: 800;
  --rr-weight-black:   900;

  /* ---------- Motion ---------- */
  --rr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rr-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --rr-dur-fast:   200ms;
  --rr-dur-normal: 300ms;
  --rr-dur-slow:   500ms;
  --rr-dur-reveal: 700ms;   /* FadeIn component default */
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */

html, body {
  background: var(--rr-bg);
  color: var(--rr-fg);
  font-family: var(--rr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection {
  background: rgba(47, 107, 255, 0.30);
  color: #fff;
}

h1, .rr-h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: var(--rr-weight-bold);
  line-height: var(--rr-leading-tight);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-fg);
}
h2, .rr-h2 {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: var(--rr-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-fg);
}
h3, .rr-h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: var(--rr-weight-bold);
  line-height: var(--rr-leading-snug);
  color: var(--rr-fg);
}
h4, .rr-h4 {
  font-size: 20px;
  font-weight: var(--rr-weight-semibold);
  line-height: var(--rr-leading-snug);
  color: var(--rr-fg);
}
p, .rr-body {
  font-size: var(--rr-text-lg);
  line-height: var(--rr-leading-relaxed);
  color: var(--rr-fg-2);
}
.rr-lead {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: var(--rr-leading-relaxed);
  color: var(--rr-fg-2);
}
.rr-eyebrow {
  font-size: var(--rr-text-xs);
  font-weight: var(--rr-weight-black);
  letter-spacing: var(--rr-tracking-widest);
  text-transform: uppercase;
  color: var(--rr-fg-4);
}
.rr-label {
  font-size: 10px;
  font-weight: var(--rr-weight-bold);
  letter-spacing: var(--rr-tracking-widest);
  text-transform: uppercase;
  color: var(--rr-fg-4);
}
code, .rr-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95em;
}

/* Headline gradient helper — "We build <gradient> Dealflow Engines </gradient>" */
.rr-text-gradient {
  background: var(--rr-gradient-primary);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 15px rgba(47, 107, 255, 0.4));
}