/* ============================================================================
   RENEW STRATEGY GROUP — DESIGN TOKENS
   The brand book (Visual Identity Guide v1, June 2026) turned into code.
   The website, decks, and email all draw from this one file so they never drift.

   "Quiet luxury, but alive." Navy anchors · cream warms · greens freshen ·
   brass whispers · terracotta is for RSG Talent ONLY · sage held for future IP.

   How to consume:
     <link rel="stylesheet" href="renew-tokens.css">
   Then build with the semantic tokens (--rsg-bg, --rsg-text, --rsg-accent…),
   the type utilities (.rsg-display, .rsg-text), and the component primitives
   (.rsg-btn, .rsg-eyebrow, .rsg-rule, .rsg-stat). Reach for raw palette tokens
   only when a semantic token doesn't exist yet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600&display=swap');

:root {
  /* ---- PALETTE · raw brand colors -------------------------------------- */
  /* Anchor */
  --rsg-navy:        #004E7A;   /* Primary. Logo, headlines, links, key UI.   */
  --rsg-navy-light:  #2F7FAC;   /* Lighter navy — emphasis on dark headlines. */
  --rsg-deep-ink:    #082A3C;   /* Depth: body headlines, footers, dark panels*/
  /* Elegant greens */
  --rsg-pine:        #2E4A3D;   /* Secondary accent, quiet authority.         */
  --rsg-sage:        #A3B49E;   /* Soft section backgrounds, panels.          */
  --rsg-eucalyptus:  #DCE3D6;   /* Barely-there tints and fills.              */
  /* Creams & neutrals */
  --rsg-cream:       #F6F1E7;   /* Brand cream. Reversed text on dark panels. */
  --rsg-canvas:      #F8F6EE;   /* Primary canvas — bright, crisp cream.      */
  --rsg-sand:        #E9DFCE;   /* Warm callout surface (used sparingly).     */
  --rsg-charcoal:    #2B2A26;   /* Body text. Warm, never pure black.         */
  --rsg-stone:       #6F6A5E;   /* Secondary text, labels, captions.          */
  --rsg-white:       #FCFAF5;   /* Warm white — never a stark #fff.           */
  /* Airy navy tints — section surfaces (the "fresher" move, kept in-family) */
  --rsg-powder:      #E1EAF2;   /* Section bands & surfaces. Navy, dialed back.*/
  --rsg-mist:        #ECF1F5;   /* Palest navy tint — subtle fills.           */
  /* Accents — used sparingly */
  --rsg-brass:       #B08D57;   /* A whisper. Thin rules, fine flourishes.    */
  --rsg-terracotta:  #C0613B;   /* RSG Talent sub-brand ONLY.                 */

  /* Tints derived from the palette (for hairlines, hovers, focus rings) */
  --rsg-navy-12:     rgba(0, 78, 122, 0.12);
  --rsg-navy-20:     rgba(0, 78, 122, 0.20);
  --rsg-ink-08:      rgba(8, 42, 60, 0.08);
  --rsg-brass-40:    rgba(176, 141, 87, 0.40);
  --rsg-charcoal-70: rgba(43, 42, 38, 0.70);

  /* ---- SEMANTIC COLOR · what the UI actually references ----------------- */
  /* Palette tilt: fresher. Bright cream canvas; freshness carried by airy
     navy-tint section surfaces (powder/mist), not green. Greens parked for
     the future IP line; sand kept for occasional warm callouts.            */
  --rsg-bg:              var(--rsg-canvas);
  --rsg-bg-raised:       var(--rsg-white);
  --rsg-bg-secondary:    var(--rsg-powder);
  --rsg-bg-tint:         var(--rsg-mist);
  --rsg-bg-inverse:      var(--rsg-deep-ink);
  --rsg-bg-brand:        var(--rsg-navy);

  --rsg-text:            var(--rsg-charcoal);
  --rsg-text-secondary:  var(--rsg-stone);
  --rsg-text-heading:    var(--rsg-deep-ink);
  --rsg-text-brand:      var(--rsg-navy);
  --rsg-text-on-dark:    var(--rsg-cream);
  --rsg-text-on-dark-2:  rgba(246, 241, 231, 0.66);

  --rsg-accent:          var(--rsg-navy);    /* default interactive accent  */
  --rsg-accent-green:    var(--rsg-pine);
  --rsg-hairline:        var(--rsg-brass);   /* the brass line under a head  */
  --rsg-border:          var(--rsg-ink-08);
  --rsg-focus:           var(--rsg-navy);

  --rsg-link:            var(--rsg-navy);
  --rsg-link-hover:      var(--rsg-deep-ink);

  /* ---- TYPE ------------------------------------------------------------- */
  --rsg-font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --rsg-font-text:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale — fluid, modular. Display = soul gear; text = receipts gear. */
  --rsg-size-display-xl: clamp(3.25rem, 1.6rem + 6.4vw, 6rem);    /* hero      */
  --rsg-size-display-lg: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);     /* section   */
  --rsg-size-display-md: clamp(2rem, 1.5rem + 2vw, 3rem);
  --rsg-size-display-sm: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --rsg-size-lead:       clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);  /* sub-head  */
  --rsg-size-body-lg:    1.1875rem;   /* 19px */
  --rsg-size-body:       1.0625rem;   /* 17px */
  --rsg-size-sm:         0.9375rem;   /* 15px */
  --rsg-size-eyebrow:    0.8125rem;   /* 13px label */
  --rsg-size-stat:       clamp(2.75rem, 1.8rem + 3.4vw, 4.25rem); /* big number*/

  --rsg-weight-regular: 400;
  --rsg-weight-medium:  500;
  --rsg-weight-semibold: 600;

  --rsg-leading-tight:  1.05;
  --rsg-leading-snug:   1.2;
  --rsg-leading-normal: 1.55;
  --rsg-leading-relaxed: 1.7;

  --rsg-tracking-eyebrow: 0.18em;   /* the spaced-out STRATEGY GROUP feel */
  --rsg-tracking-tight:  -0.02em;
  --rsg-tracking-normal: 0;

  /* ---- SPACING · 4px base ---------------------------------------------- */
  --rsg-space-1:  0.25rem;
  --rsg-space-2:  0.5rem;
  --rsg-space-3:  0.75rem;
  --rsg-space-4:  1rem;
  --rsg-space-5:  1.5rem;
  --rsg-space-6:  2rem;
  --rsg-space-7:  3rem;
  --rsg-space-8:  4rem;
  --rsg-space-9:  6rem;
  --rsg-space-10: 8rem;

  --rsg-gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --rsg-measure:   68ch;     /* readable line length */
  --rsg-container: 1200px;   /* max content width    */
  --rsg-container-narrow: 880px;

  /* ---- RADII · restrained, premium ------------------------------------- */
  --rsg-radius-sm: 4px;
  --rsg-radius:    8px;
  --rsg-radius-lg: 16px;
  --rsg-radius-pill: 999px;

  /* ---- ELEVATION · soft, warm-toned shadows ---------------------------- */
  --rsg-shadow-sm: 0 1px 2px rgba(8, 42, 60, 0.06);
  --rsg-shadow:    0 8px 24px -12px rgba(8, 42, 60, 0.18);
  --rsg-shadow-lg: 0 24px 60px -24px rgba(8, 42, 60, 0.28);

  /* ---- MOTION ----------------------------------------------------------- */
  --rsg-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --rsg-duration:    240ms;
  --rsg-duration-sm: 140ms;
}

/* ============================================================================
   SUB-BRAND THEMES — same system, only the accent shifts.
   Apply to a scope: <div data-rsg-brand="talent"> … </div>
   ========================================================================== */
[data-rsg-brand="talent"] {            /* RSG Talent — the human, energetic arm */
  --rsg-accent:   var(--rsg-terracotta);
  --rsg-link:     var(--rsg-terracotta);
  --rsg-hairline: var(--rsg-terracotta);
}
[data-rsg-brand="ip"] {                /* Future IP line — held in reserve      */
  --rsg-accent:   var(--rsg-pine);
  --rsg-link:     var(--rsg-pine);
  --rsg-hairline: var(--rsg-sage);
}

/* ============================================================================
   BASE / RESET — the warm canvas
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rsg-bg);
  color: var(--rsg-text);
  font-family: var(--rsg-font-text);
  font-size: var(--rsg-size-body);
  font-weight: var(--rsg-weight-regular);
  line-height: var(--rsg-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--rsg-navy); color: var(--rsg-cream); }

a { color: var(--rsg-link); text-decoration: none; }
a:hover { color: var(--rsg-link-hover); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--rsg-focus);
  outline-offset: 3px;
  border-radius: var(--rsg-radius-sm);
}

/* ============================================================================
   TYPE UTILITIES
   ========================================================================== */
.rsg-display {
  font-family: var(--rsg-font-display);
  font-weight: var(--rsg-weight-regular);
  line-height: var(--rsg-leading-tight);
  letter-spacing: var(--rsg-tracking-tight);
  color: var(--rsg-text-heading);
  text-wrap: balance;
  margin: 0;
}
.rsg-display--xl { font-size: var(--rsg-size-display-xl); }
.rsg-display--lg { font-size: var(--rsg-size-display-lg); }
.rsg-display--md { font-size: var(--rsg-size-display-md); line-height: var(--rsg-leading-snug); }
.rsg-display--sm { font-size: var(--rsg-size-display-sm); line-height: var(--rsg-leading-snug); }
.rsg-italic { font-style: italic; }

.rsg-text { font-family: var(--rsg-font-text); }
.rsg-lead {
  font-family: var(--rsg-font-text);
  font-size: var(--rsg-size-lead);
  line-height: var(--rsg-leading-relaxed);
  color: var(--rsg-text);
  font-weight: var(--rsg-weight-regular);
  max-width: var(--rsg-measure);
  text-wrap: pretty;
  margin: 0;
}
.rsg-body { max-width: var(--rsg-measure); text-wrap: pretty; }

.rsg-eyebrow {
  font-family: var(--rsg-font-text);
  font-size: var(--rsg-size-eyebrow);
  font-weight: var(--rsg-weight-semibold);
  letter-spacing: var(--rsg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rsg-text-secondary);
  margin: 0;
}
.rsg-eyebrow--brand { color: var(--rsg-text-brand); }

/* The brass whisper — a thin rule under a headline. Never a fill. */
.rsg-rule {
  display: block;
  width: 56px;
  height: 2px;
  border: 0;
  background: var(--rsg-hairline);
  margin: 0;
}

/* ============================================================================
   COMPONENT PRIMITIVES
   ========================================================================== */

/* Layout */
.rsg-container {
  width: 100%;
  max-width: var(--rsg-container);
  margin-inline: auto;
  padding-inline: var(--rsg-gutter);
}
.rsg-container--narrow { max-width: var(--rsg-container-narrow); }

/* Buttons */
.rsg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rsg-space-2);
  font-family: var(--rsg-font-text);
  font-size: var(--rsg-size-sm);
  font-weight: var(--rsg-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: var(--rsg-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rsg-duration-sm) var(--rsg-ease),
              color var(--rsg-duration-sm) var(--rsg-ease),
              border-color var(--rsg-duration-sm) var(--rsg-ease),
              transform var(--rsg-duration-sm) var(--rsg-ease);
}
.rsg-btn:hover { transform: translateY(-1px); }

.rsg-btn--primary {
  background: var(--rsg-accent);
  color: var(--rsg-cream);
}
.rsg-btn--primary:hover { background: var(--rsg-deep-ink); color: var(--rsg-cream); }

.rsg-btn--secondary {
  background: transparent;
  color: var(--rsg-text-heading);
  border-color: var(--rsg-navy-20);
}
.rsg-btn--secondary:hover { border-color: var(--rsg-navy); color: var(--rsg-navy); }

/* A quiet text link with an arrow — the "scroll down for proof" affordance */
.rsg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--rsg-weight-semibold);
  font-size: var(--rsg-size-sm);
  color: var(--rsg-link);
}
.rsg-link-arrow::after {
  content: "→";
  transition: transform var(--rsg-duration-sm) var(--rsg-ease);
}
.rsg-link-arrow:hover::after { transform: translateX(3px); }

/* Stat — data is the proof, never the spine */
.rsg-stat__num {
  font-family: var(--rsg-font-display);
  font-size: var(--rsg-size-stat);
  font-weight: var(--rsg-weight-medium);
  line-height: 1;
  letter-spacing: var(--rsg-tracking-tight);
  color: var(--rsg-text-brand);
}
.rsg-stat__label {
  font-family: var(--rsg-font-text);
  font-size: var(--rsg-size-sm);
  line-height: var(--rsg-leading-normal);
  color: var(--rsg-text-secondary);
  margin-top: var(--rsg-space-2);
  max-width: 22ch;
}

/* Surfaces */
.rsg-panel {
  background: var(--rsg-bg-raised);
  border: 1px solid var(--rsg-border);
  border-radius: var(--rsg-radius-lg);
  box-shadow: var(--rsg-shadow);
}
.rsg-panel--tint { background: var(--rsg-bg-tint); border-color: transparent; box-shadow: none; }
.rsg-panel--sand { background: var(--rsg-bg-secondary); border-color: transparent; box-shadow: none; }

/* Inverse / dark scope (footers, investor panels). Flip text tokens. */
.rsg-inverse {
  background: var(--rsg-bg-inverse);
  color: var(--rsg-text-on-dark);
  --rsg-text: var(--rsg-text-on-dark);
  --rsg-text-heading: var(--rsg-cream);
  --rsg-text-secondary: var(--rsg-text-on-dark-2);
  --rsg-text-brand: var(--rsg-cream);
  --rsg-stat__num: var(--rsg-cream);
}
.rsg-inverse .rsg-stat__num { color: var(--rsg-cream); }

/* Warm image placeholder — per the guide, prefer warm blocks to wrong stock. */
.rsg-image-slot {
  position: relative;
  background-color: var(--rsg-sand);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 11px,
    rgba(176, 141, 87, 0.10) 11px, rgba(176, 141, 87, 0.10) 12px
  );
  border-radius: var(--rsg-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rsg-image-slot__note {
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--rsg-stone);
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  background: rgba(252, 250, 245, 0.7);
  border-radius: var(--rsg-radius-pill);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}