/* ==========================================================================
   Revenue Wizards — Core design tokens
   Colors, type scale, spacing, radius, shadow
   Source: Figma "rw-design HQ" BrandBook → Brand Essentials
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&family=Inter:ital,wght@0,400;0,500;0,700;1,700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- PRIMARY PALETTE (brand heroes) ---------- */
  --rw-navy:   #20233A;   /* deep navy — primary brand ink / hero bg */
  --rw-teal:   #2C8782;   /* signature teal — accent / primary action */
  --rw-orange: #FF784B;   /* coral-orange — emphasis / highlight */
  --rw-cyan:   #00A7D9;   /* bright cyan — data / accent */

  /* ---------- SECONDARY PALETTE ---------- */
  --rw-yellow: #FEDE02;   /* flash yellow — punctuation, dots */
  --rw-purple: #755DF7;   /* electric violet */
  --rw-indigo: #566ABA;   /* muted indigo */
  --rw-coral:  #FF6B69;   /* warm coral */
  --rw-green:  #237628;   /* forest green — positive data */
  --rw-green-bright: #17B452; /* success highlight */

  /* ---------- TEAL TINT SCALE (signature color) ---------- */
  --rw-teal-50:  #F3FAF9;
  --rw-teal-100: #EAF3F2;
  --rw-teal-200: #7ACEC4;
  --rw-teal-300: #2C8782;
  --rw-teal-400: #237B75;
  --rw-teal-500: #1F615C;
  --rw-teal-bg:  #EAF3F2; /* surface tint used behind teal content */

  /* ---------- ORANGE TINT SCALE ---------- */
  --rw-orange-50:  #FFF3ED;
  --rw-orange-100: #FFE3D3;
  --rw-orange-500: #FF784B;
  --rw-orange-600: #E56034;

  /* ---------- CYAN TINT SCALE ---------- */
  --rw-cyan-50:  #F0FBFF;
  --rw-cyan-500: #00A7D9;

  /* ---------- RED / CORAL TINT ---------- */
  --rw-red-50: #FFF1F1;
  --rw-red-500: #FF6B69;

  /* ---------- INDIGO / NAVY TINT ---------- */
  --rw-indigo-50: #F3F5FB;
  --rw-indigo-100: #ADC0E3;
  --rw-indigo-500: #566ABA;

  /* ---------- NEUTRALS ---------- */
  --rw-black:  #000000;
  --rw-ink:    #0A0A0A;
  --rw-fg-1:   #20233A;      /* default heading */
  --rw-fg-2:   #364153;      /* strong body */
  --rw-fg-3:   #4A5565;      /* default body */
  --rw-fg-4:   #6B7280;      /* secondary body */
  --rw-fg-inv: #FFFFFF;      /* on dark */

  --rw-bg-1:   #FFFFFF;      /* default surface */
  --rw-bg-2:   #F9FAFB;      /* soft surface */
  --rw-bg-3:   #F3F5FB;      /* tinted surface */
  --rw-bg-dark:#20233A;      /* hero / dark mode surface */

  --rw-border-1: #E5E7EB;    /* default border */
  --rw-border-2: #D9D9D9;    /* stronger border */
  --rw-border-dark: #20233A; /* dividers on brand material */

  /* ---------- SEMANTIC (convenience aliases) ---------- */
  --rw-accent:         var(--rw-teal);
  --rw-accent-strong:  var(--rw-teal-400);
  --rw-emphasis:       var(--rw-orange);
  --rw-info:           var(--rw-cyan);
  --rw-success:        var(--rw-green-bright);
  --rw-warn:           var(--rw-yellow);
  --rw-danger:         var(--rw-red-500);

  /* ---------- TYPE ---------- */
  --rw-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --rw-font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --rw-font-ui:      "Inter", "Helvetica Neue", Arial, sans-serif;
  --rw-font-mark:    "Instrument Sans", "Inter", sans-serif; /* logo wordmark */

  /* Semantic type styles — mirror the Figma brand book */
  --rw-h1-size: 64px;  --rw-h1-lh: 68px;  --rw-h1-ls: -0.03em; --rw-h1-weight: 700;
  --rw-h2-size: 48px;  --rw-h2-lh: 52px;  --rw-h2-ls: -0.03em; --rw-h2-weight: 700;
  --rw-h3-size: 32px;  --rw-h3-lh: 38px;  --rw-h3-ls: -0.03em; --rw-h3-weight: 700;
  --rw-h4-size: 24px;  --rw-h4-lh: 30px;  --rw-h4-ls: -0.02em; --rw-h4-weight: 700;
  --rw-h5-size: 20px;  --rw-h5-lh: 26px;  --rw-h5-ls: -0.02em; --rw-h5-weight: 600;
  --rw-eyebrow-size: 13px; --rw-eyebrow-lh: 16px; --rw-eyebrow-ls: 0.12em; --rw-eyebrow-weight: 700;

  --rw-p1-size: 20px;  --rw-p1-lh: 30px;  --rw-p1-weight: 500; /* lead */
  --rw-p2-size: 16px;  --rw-p2-lh: 26px;  --rw-p2-weight: 400; /* body */
  --rw-p3-size: 14px;  --rw-p3-lh: 22px;  --rw-p3-weight: 400; /* small */
  --rw-caption-size: 12px; --rw-caption-lh: 16px; --rw-caption-weight: 500;

  /* ---------- SPACING (from brand book) ---------- */
  --rw-gap-xs: 12px;
  --rw-gap-sm: 16px;
  --rw-gap-md: 24px;
  --rw-gap-lg: 32px;
  --rw-gap-xl: 64px;
  --rw-margin-desktop: 40px;
  --rw-margin-tablet:  40px;
  --rw-margin-mobile:  16px;
  --rw-max-width: 1920px;

  --rw-pad-section-desktop: 160px;
  --rw-pad-section-tablet:  120px;
  --rw-pad-section-mobile:   64px;

  /* ---------- RADIUS ---------- */
  --rw-radius-xs:   4px;   /* chips, tags */
  --rw-radius-sm:   8px;   /* inputs, small cards */
  --rw-radius-md:   12px;  /* buttons */
  --rw-radius-lg:   16px;  /* cards */
  --rw-radius-xl:   24px;  /* hero cards */
  --rw-radius-pill: 999px; /* capsule */
  --rw-radius-logo: 10px;  /* logo mark corner */

  /* ---------- SHADOW (subtle; brand is mostly flat) ---------- */
  --rw-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --rw-shadow-sm: 0 4px 10px -4px rgba(0,0,0,0.10);
  --rw-shadow-md: 0 6px 16px -6px rgba(0,0,0,0.10);
  --rw-shadow-lg: 0 12px 32px -12px rgba(0,0,0,0.15);
  --rw-shadow-ring: 0 0 0 1px rgba(0,0,0,0.08);

  /* ---------- MOTION ---------- */
  --rw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rw-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --rw-dur-fast: 120ms;
  --rw-dur: 200ms;
  --rw-dur-slow: 360ms;
}

/* ==========================================================================
   Base element styles (semantic tags)
   ========================================================================== */

html, body {
  font-family: var(--rw-font-body);
  color: var(--rw-fg-3);
  background: var(--rw-bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .rw-h1 {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-h1-weight);
  font-size: var(--rw-h1-size);
  line-height: var(--rw-h1-lh);
  letter-spacing: var(--rw-h1-ls);
  color: var(--rw-fg-1);
  margin: 0;
}
h2, .rw-h2 {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-h2-weight);
  font-size: var(--rw-h2-size);
  line-height: var(--rw-h2-lh);
  letter-spacing: var(--rw-h2-ls);
  color: var(--rw-fg-1);
  margin: 0;
}
h3, .rw-h3 {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-h3-weight);
  font-size: var(--rw-h3-size);
  line-height: var(--rw-h3-lh);
  letter-spacing: var(--rw-h3-ls);
  color: var(--rw-fg-1);
  margin: 0;
}
h4, .rw-h4 {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-h4-weight);
  font-size: var(--rw-h4-size);
  line-height: var(--rw-h4-lh);
  letter-spacing: var(--rw-h4-ls);
  color: var(--rw-fg-1);
  margin: 0;
}
h5, .rw-h5 {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-h5-weight);
  font-size: var(--rw-h5-size);
  line-height: var(--rw-h5-lh);
  letter-spacing: var(--rw-h5-ls);
  color: var(--rw-fg-1);
  margin: 0;
}

.rw-eyebrow {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-eyebrow-weight);
  font-size: var(--rw-eyebrow-size);
  line-height: var(--rw-eyebrow-lh);
  letter-spacing: var(--rw-eyebrow-ls);
  text-transform: uppercase;
  color: var(--rw-teal);
}

p, .rw-p {
  font-family: var(--rw-font-body);
  font-weight: var(--rw-p2-weight);
  font-size: var(--rw-p2-size);
  line-height: var(--rw-p2-lh);
  color: var(--rw-fg-3);
  margin: 0;
  text-wrap: pretty;
}
.rw-lead {
  font-size: var(--rw-p1-size);
  line-height: var(--rw-p1-lh);
  font-weight: var(--rw-p1-weight);
  color: var(--rw-fg-2);
}
.rw-small, small {
  font-size: var(--rw-p3-size);
  line-height: var(--rw-p3-lh);
  color: var(--rw-fg-4);
}
.rw-caption {
  font-size: var(--rw-caption-size);
  line-height: var(--rw-caption-lh);
  font-weight: var(--rw-caption-weight);
  letter-spacing: 0;
  color: var(--rw-fg-4);
}

code, pre, .rw-mono {
  font-family: var(--rw-font-ui);
  font-size: 14px;
  line-height: 22px;
}

a {
  color: var(--rw-teal);
  text-decoration: none;
  transition: color var(--rw-dur) var(--rw-ease);
}
a:hover { color: var(--rw-teal-400); }
a:focus-visible {
  outline: 2px solid var(--rw-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  height: 1px;
  background: var(--rw-border-1);
  margin: var(--rw-gap-lg) 0;
}

/* Dark surface base */
.rw-on-dark { color: var(--rw-fg-inv); }
.rw-on-dark h1, .rw-on-dark h2, .rw-on-dark h3,
.rw-on-dark h4, .rw-on-dark h5, .rw-on-dark .rw-h1,
.rw-on-dark .rw-h2, .rw-on-dark .rw-h3,
.rw-on-dark .rw-h4, .rw-on-dark .rw-h5 { color: var(--rw-fg-inv); }
.rw-on-dark p, .rw-on-dark .rw-p,
.rw-on-dark .rw-lead { color: rgba(255,255,255,0.85); }
.rw-on-dark .rw-small { color: rgba(255,255,255,0.65); }