/* ==========================================================================
   ROCKSTAR WORKFORCE — DESIGN TOKENS
   Drop-in CSS custom properties, type scale, and utility classes.
   Pair with the full brand guide (rockstar-workforce-brand-guidelines.pdf/html).

   FONTS
   - Display: Anton (free, Google Fonts) — headlines only, always UPPERCASE.
   - Body:    Futura (licensed — Futura PT via Adobe Fonts). Jost is a free,
              near-identical fallback and is what loads below until Futura is
              installed. The font stack always tries Futura first.
   - The logo wordmark is custom art — never set text in it.

   COLOR RULES
   - Plum is the ACCENT. Use it sparingly (primary CTAs, key highlights).
   - Green from the old palette is retired — do not use.
   - Alternate white and ink sections for rhythm; don't go dark everywhere.
   - Contrast (WCAG): white text on Plum = 5:1; use --rw-plum-deep for more
     headroom or on small text. Dove takes DARK text; Turquoise takes white.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand colors ---------------------------------------------------- */
  --rw-dove:       #99BEC4; /* PMS 5503 C · RGB 153 190 196 · primary        */
  --rw-turquoise:  #41797F; /* RGB 65 121 127 · secondary / headers          */
  --rw-gray:       #4B5457; /* PMS 445 C · RGB 75 84 87 · text & headlines   */
  --rw-plum:       #93607F; /* RGB 147 96 127 · ACCENT / primary CTA         */
  --rw-plum-deep:  #74495F; /* accent hover / high-contrast accent text      */
  --rw-white:      #FFFFFF; /* light-section background                      */
  --rw-ink:        #15181A; /* dark-section background (screen only)         */

  /* text-on-color helpers (from the same family, not black/gray) */
  --rw-on-dove:    #2E4A4F;
  --rw-on-plum:    #F4DCE9;
  --rw-on-turq:    #DDEDEE;
  --rw-hairline:   #E4E2DD;
  --rw-muted:      #7C7A73;
  --rw-muted-dark: #AEB4B5;

  /* ---- Semantic aliases (use these in components) ---------------------- */
  --rw-bg:            var(--rw-white);
  --rw-bg-dark:       var(--rw-ink);
  --rw-text:          var(--rw-gray);
  --rw-text-invert:   var(--rw-white);
  --rw-primary:       var(--rw-dove);
  --rw-secondary:     var(--rw-turquoise);
  --rw-accent:        var(--rw-plum);
  --rw-accent-hover:  var(--rw-plum-deep);

  /* ---- Type families --------------------------------------------------- */
  --rw-font-display: 'Anton', 'Arial Narrow', sans-serif;
  --rw-font-body:    'Futura', 'Futura PT', 'Jost', system-ui, sans-serif;

  /* ---- Type scale ------------------------------------------------------ */
  --rw-text-hero:    4rem;      /* 64px — page hero (Anton, uppercase)      */
  --rw-text-h1:      2.75rem;   /* 44px                                     */
  --rw-text-h2:      2rem;      /* 32px                                     */
  --rw-text-h3:      1.25rem;   /* 20px                                     */
  --rw-text-lead:    1.25rem;   /* 20px — intro paragraphs (Futura Medium)  */
  --rw-text-body:    1rem;      /* 16px                                     */
  --rw-text-sm:      0.8125rem; /* 13px — captions, meta                    */
  --rw-text-eyebrow: 0.6875rem; /* 11px — tracked uppercase labels          */

  /* ---- Weights / rhythm ------------------------------------------------ */
  --rw-weight-regular: 400;
  --rw-weight-medium:  500;
  --rw-weight-bold:    700;
  --rw-leading-display: 0.92;
  --rw-leading-body:    1.7;
  --rw-tracking-display: 0.015em;
  --rw-tracking-eyebrow: 0.28em;

  /* ---- Radius ---------------------------------------------------------- */
  --rw-radius-pill:    100px;  /* buttons — fully rounded                   */
  --rw-radius-card:    16px;   /* cards, panels, image frames               */
  --rw-radius-control: 8px;    /* inputs, small controls                    */

  /* ---- Spacing --------------------------------------------------------- */
  --rw-space-1: 0.5rem;
  --rw-space-2: 1rem;
  --rw-space-3: 1.5rem;
  --rw-space-4: 2rem;
  --rw-space-5: 3rem;
  --rw-space-6: 4.5rem;  /* section vertical padding                       */
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  font-family: var(--rw-font-body);
  font-weight: var(--rw-weight-regular);
  font-size: var(--rw-text-body);
  line-height: var(--rw-leading-body);
  color: var(--rw-text);
  background: var(--rw-bg);
  -webkit-font-smoothing: antialiased;
}

/* Display / headlines — Anton is always uppercase */
.rw-display, .rw-h1, .rw-h2, .rw-h3 {
  font-family: var(--rw-font-display);
  font-weight: var(--rw-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--rw-tracking-display);
  line-height: var(--rw-leading-display);
  color: var(--rw-text);
}
.rw-display { font-size: var(--rw-text-hero); }
.rw-h1      { font-size: var(--rw-text-h1); }
.rw-h2      { font-size: var(--rw-text-h2); }
.rw-h3      { font-size: var(--rw-text-h3); }

/* Accent word inside a headline (use once per headline) */
.rw-accent-word { color: var(--rw-accent); }
.on-dark .rw-accent-word { color: var(--rw-dove); } /* Dove pops on ink */

.rw-lead    { font-size: var(--rw-text-lead); font-weight: var(--rw-weight-medium); line-height: 1.4; }
.rw-body    { font-size: var(--rw-text-body); }
.rw-eyebrow {
  font-family: var(--rw-font-body);
  font-weight: var(--rw-weight-bold);
  font-size: var(--rw-text-eyebrow);
  letter-spacing: var(--rw-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rw-secondary);
}
.on-dark .rw-eyebrow { color: var(--rw-dove); }

/* ==========================================================================
   BUTTONS — fully rounded pills, uppercase Futura labels
   ========================================================================== */
.rw-btn {
  display: inline-block;
  font-family: var(--rw-font-body);
  font-weight: var(--rw-weight-bold);
  font-size: var(--rw-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: var(--rw-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, transform .05s ease;
}
.rw-btn:active { transform: scale(0.98); }

/* Primary CTA — the accent. Use sparingly. */
.rw-btn--plum        { background: var(--rw-plum); color: var(--rw-white); }
.rw-btn--plum:hover  { background: var(--rw-plum-deep); }

/* Secondary — Dove with dark text */
.rw-btn--dove        { background: var(--rw-dove); color: var(--rw-ink); }
.rw-btn--dove:hover  { background: #86AEB4; }

/* Quiet — outline */
.rw-btn--outline        { background: transparent; color: var(--rw-gray); border: 1px solid var(--rw-gray); }
.rw-btn--outline:hover  { background: var(--rw-gray); color: var(--rw-white); }
.on-dark .rw-btn--outline { color: var(--rw-white); border-color: #4A5052; }

/* ==========================================================================
   SECTIONS — alternate light and dark
   ========================================================================== */
.rw-section       { padding: var(--rw-space-6) 0; background: var(--rw-white); color: var(--rw-text); }
.rw-section--ink  { padding: var(--rw-space-6) 0; background: var(--rw-ink);   color: var(--rw-white); }
.rw-section--ink .rw-display,
.rw-section--ink .rw-h1,
.rw-section--ink .rw-h2,
.rw-section--ink .rw-h3 { color: var(--rw-white); }

.rw-card { background: var(--rw-white); border: 1px solid var(--rw-hairline); border-radius: var(--rw-radius-card); }