/*
 * Run Fit Well V2 — design tokens
 * ---------------------------------------------------------------------------
 * SINGLE SOURCE OF TRUTH for every colour in the theme.
 *
 * Every value below is extracted verbatim from the site-wide visual reference:
 *   design-reference/Corporate Wellness-Final-Design.html
 *
 * Nothing here is invented, approximated, or carried over from V1.
 *
 * RULE FOR ALL NEW CSS: reuse a token. Never write a raw hex value in a
 * component, and never add a near-duplicate of a token that already exists.
 */

:root {
  /* ---------------------------------------------------------------- *
   * LAYER 1 — base palette (the reference design's own :root)
   * ---------------------------------------------------------------- */
  --rfw-ink: #081117;
  --rfw-ink-2: #0e1c24;
  --rfw-ink-3: #132630;
  --rfw-paper: #f7faf8;
  --rfw-paper-2: #eef8f2;
  --rfw-white: #fff;
  --rfw-text: #122229;
  --rfw-muted: #607279;
  --rfw-line: #dce7e2;
  --rfw-green: #6ee78a;
  --rfw-green-deep: #147f48; /* was #168c50 — darkened for WCAG AA 4.5:1 on light surfaces */
  --rfw-cyan: #54c7ee;
  --rfw-orange: #ff8438;
  --rfw-purple: #c056ef;
  --rfw-shadow: 0 20px 60px rgba(18, 56, 64, .10);
  --rfw-max: 1240px;

  /* ---------------------------------------------------------------- *
   * LAYER 2 — surfaces
   * ---------------------------------------------------------------- */
  --rfw-header-bg: #09151b;
  --rfw-crumb-bg: #0b181f;
  --rfw-band-bg: #0d1b22;
  --rfw-card-dark: #0f2028;
  --rfw-footer-bg: #112027;

  --rfw-surface: #fff;
  --rfw-surface-alt: #f6f9f7;
  --rfw-media-bg: #e9f0ed;
  --rfw-media-bg-2: #dfece6;

  /* ---------------------------------------------------------------- *
   * LAYER 2 — text on dark
   * ---------------------------------------------------------------- */
  --rfw-on-dark: #fff;
  --rfw-on-dark-muted: #9fb1b7;
  --rfw-on-dark-soft: #aabcc2;
  --rfw-nav-link: #c7d4d8;
  --rfw-crumb-text: #98aeb5;
  --rfw-crumb-link: #d8e2e5;
  --rfw-footer-text: #9db0b6;
  --rfw-tag-text: #d9e4e6;

  /* ---------------------------------------------------------------- *
   * LAYER 2 — text on light
   * ---------------------------------------------------------------- */
  --rfw-text-soft: #50666e;
  --rfw-text-hero: #536970;
  --rfw-text-micro: #526970;
  --rfw-text-tick: #3e565e;
  --rfw-text-strong: #273c44;
  --rfw-text-note: #627277; /* was #6c7d83 — WCAG AA */
  --rfw-text-em: #647379; /* was #6d7e84 — WCAG AA */
  --rfw-num: #8b9a9f;
  --rfw-sub-link: #496069;

  /* ---------------------------------------------------------------- *
   * LAYER 2 — lines on light
   * ---------------------------------------------------------------- */
  --rfw-line-2: #dce8e3;
  --rfw-line-3: #e3ece8;
  --rfw-line-4: #e3ece7;
  --rfw-line-5: #e6eeea;
  --rfw-line-faq: #cfd8d4;
  --rfw-line-step: #cad8d2;
  --rfw-line-arrow: #d6e3dd;
  --rfw-line-cta: #d8e7e0;
  --rfw-line-btn: #dbe6e1;

  /* ---------------------------------------------------------------- *
   * LAYER 2 — lines on dark
   * ---------------------------------------------------------------- */
  --rfw-line-on-dark: rgba(255, 255, 255, .12);
  --rfw-line-header: rgba(255, 255, 255, .09);
  --rfw-line-tag: rgba(255, 255, 255, .13);
  --rfw-line-badge: rgba(255, 255, 255, .18);
  --rfw-line-btn-dark: rgba(255, 255, 255, .2);
  --rfw-line-crumb: rgba(255, 255, 255, .04);

  /* ---------------------------------------------------------------- *
   * LAYER 2 — accent-tinted surfaces
   * ---------------------------------------------------------------- */
  --rfw-accent-on-dark: #76e994;
  --rfw-pill-bg: #eaf8ef;
  --rfw-pill-border: #c0e7ce;
  --rfw-pill-text: #147843;

  /* ---------------------------------------------------------------- *
   * LAYER 2 — buttons
   * ---------------------------------------------------------------- */
  --rfw-btn-primary-bg: var(--rfw-green);
  --rfw-btn-primary-text: #07130d;
  --rfw-btn-primary-hover: #8bf0a0;
  --rfw-btn-dark-bg: var(--rfw-ink);
  --rfw-btn-dark-hover: #132630;
  --rfw-btn-light-border: #dbe6e1;
  --rfw-btn-light-shadow: 0 10px 28px rgba(8, 17, 23, .08);

  /* ---------------------------------------------------------------- *
   * LAYER 2 — gradients and effects
   * ---------------------------------------------------------------- */
  --rfw-grad-featured: linear-gradient(145deg, #edf9f1, #eef8fb);
  --rfw-grad-cta: linear-gradient(120deg, #e9f8ef, #eef8fb);
  --rfw-hero-glow-1: rgba(110, 231, 138, .12);
  --rfw-hero-glow-2: rgba(84, 199, 238, .14);

  --rfw-shadow-card: 0 10px 34px rgba(18, 56, 64, .045);
  --rfw-shadow-card-hover: 0 20px 45px rgba(18, 56, 64, .09);
  --rfw-dot-glow: rgba(22, 140, 80, .09);
  --rfw-badge-bg: rgba(7, 22, 28, .68);
  --rfw-glass: rgba(255, 255, 255, .96);
  --rfw-fill-subtle: rgba(255, 255, 255, .045);

  /* ---------------------------------------------------------------- *
   * LAYER 3 — role tokens. THESE are what components consume.
   * Section tone modifiers remap them; components never change.
   * ---------------------------------------------------------------- */
  --rfw-section-bg: var(--rfw-surface);
  --rfw-section-fg: var(--rfw-text);
  --rfw-section-muted: var(--rfw-muted);
  --rfw-section-eyebrow: var(--rfw-accent-deep);
  --rfw-section-line: var(--rfw-line);

  /* ---------------------------------------------------------------- *
   * LAYER 3 — accent scheme. Default = green, from the CW reference.
   * Applied site-wide (plan.md §6.3).
   * ---------------------------------------------------------------- */
  --rfw-accent: var(--rfw-green);
  --rfw-accent-2: var(--rfw-cyan);
  --rfw-accent-deep: var(--rfw-green-deep);
  --rfw-accent-soft: var(--rfw-pill-bg);
  --rfw-accent-text: var(--rfw-pill-text);
}

/*
 * OPTIONAL per-service accent schemes — plan.md §6.4 (open item O8).
 *
 * Built from the Personal Training and Running Coaching reference designs but
 * NOT APPLIED anywhere: no template emits these classes. The site renders the
 * green CW accent everywhere, per the site-wide colour instruction.
 *
 * To activate one later, add the class to <body>. No component CSS changes.
 */
.rfw-accent-orange-purple {
  --rfw-accent: #ff8438;
  --rfw-accent-2: #c056ef;
  --rfw-accent-deep: #d86722;
  --rfw-accent-soft: #fff3ea;
  --rfw-accent-text: #d86722;
  --rfw-pill-bg: #fff3ea;
  --rfw-pill-border: #f5d7c3;
  --rfw-grad-featured: linear-gradient(145deg, #fff5ed, #f8effa);
  --rfw-grad-cta: linear-gradient(120deg, #fff5ed, #f7effa);
  --rfw-hero-glow-1: rgba(255, 132, 56, .12);
  --rfw-hero-glow-2: rgba(192, 86, 239, .10);
  --rfw-dot-glow: rgba(216, 103, 34, .10);
}

.rfw-accent-cyan-green {
  --rfw-accent: #54c7ee;
  --rfw-accent-2: #6ee78a;
  --rfw-accent-deep: #178fb7;
  --rfw-accent-soft: #edf8fc;
  --rfw-accent-text: #178fb7;
  --rfw-pill-bg: #edf8fc;
  --rfw-pill-border: #c9e9f4;
  --rfw-grad-featured: linear-gradient(145deg, #edf8fc, #eefaf3);
  --rfw-grad-cta: linear-gradient(120deg, #edf8fc, #eefaf3);
  --rfw-hero-glow-1: rgba(84, 199, 238, .15);
  --rfw-hero-glow-2: rgba(110, 231, 138, .13);
  --rfw-dot-glow: rgba(23, 143, 183, .10);
}

/* ------------------------------------------------------------------ *
 * Section tone modifiers — remap role tokens only.
 * ------------------------------------------------------------------ */
.rfw-section {
  background: var(--rfw-section-bg);
  color: var(--rfw-section-fg);
}

.rfw-section--paper {
  --rfw-section-bg: var(--rfw-paper);
}

.rfw-section--alt {
  --rfw-section-bg: var(--rfw-surface-alt);
}

.rfw-section--dark {
  --rfw-section-bg: var(--rfw-band-bg);
  --rfw-section-fg: var(--rfw-on-dark);
  --rfw-section-muted: var(--rfw-on-dark-muted);
  --rfw-section-eyebrow: var(--rfw-accent-on-dark);
  --rfw-section-line: var(--rfw-line-on-dark);
}