/* ==========================================================================
   RJL DESIGN SYSTEM — 01 TOKENS
   RapJointLagos. "Beat the Norm."

   Every value the rest of the system uses is declared here and nowhere else.
   If a colour, size or space appears as a literal in any other stylesheet,
   that is a bug — add a token instead.

   SOURCE OF TRUTH: the RapJointLagos brand book (V3, July 2019).
   Rebased onto it 2026-09-14. What it fixes:
     Colour   Primary black #000000 and white. Secondary burnt orange
              #A96420, green #237120, navy #231F94. The book also lists a
              secondary red (#A61F20); the client asked for no red on the
              site, so it is not a token here.
     Type     Helvetica Neue Bold for headings and the wordmark, Helvetica
              Neue Light/Regular for body. Baskerville Italic as the
              secondary display face for large accents.
     Tracking Positive, not tight: the book sets 4% on headline type and
              5% on the wordmark.
     Wordmark One joined word, RAPJOINTLAGOS, never spaced.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     COLOUR — INK
     Brand primary black is #000000 and the scale runs up from it in a cool
     neutral grey, matching the greys the brand book itself uses on its
     application pages.
     -------------------------------------------------------------------- */
  --rjl-ink-950: #000000;
  --rjl-ink-900: #111111;
  --rjl-ink-800: #1c1c1c;
  --rjl-ink-700: #2b2b2b;
  --rjl-ink-600: #3e3e3e;
  --rjl-ink-500: #575757;
  --rjl-ink-400: #7c7c7c;
  /* Darkest step that clears 4.5:1 on both paper and the sunk band. */
  --rjl-ink-450: #6d6d6d;
  --rjl-ink-300: #a5a5a5;
  --rjl-ink-200: #cccccc;
  --rjl-ink-100: #e6e6e6;
  --rjl-ink-050: #f2f2f2;

  /* PAPER — neutral, a touch under pure white so long pages do not glare,
     with true white reserved for raised surfaces (cards, inputs). */
  --rjl-paper: #f5f5f5;
  --rjl-paper-sunk: #e8e8e8;

  /* ----------------------------------------------------------------------
     COLOUR — ACCENT
     Burnt orange, straight from the brand book. It is the ONLY colour used
     for action and state on the site; everything else is black and white.
     White on #A96420 measures 4.64:1 and on the press shade 6.5:1, so the
     label stays white in both states.
     -------------------------------------------------------------------- */
  --rjl-accent: #a96420;
  --rjl-accent-press: #8a5019;
  --rjl-accent-tint: #f4ebe0;
  --rjl-on-accent: #ffffff;
  --rjl-on-accent-press: #ffffff;

  /* Accent as SMALL text on a light ground. #a96420 on the sunk band only
     reaches 3.8:1, so small labels use the press shade (5.3:1+). */
  --rjl-accent-ink: #8a5019;

  /* Support colour: brand navy. Used for links inside long-form prose and
     nothing else. */
  --rjl-accent-alt: #231f94;
  --rjl-accent-alt-press: #1a1770;

  /* FUNCTIONAL — state only. Green is the brand green. Warning and
     critical both resolve to the burnt orange family: the client asked for
     no red anywhere, and orange reads clearly enough as "attention" on
     form validation, which is the only place these fire. */
  --rjl-positive: #237120;
  --rjl-positive-tint: #e6f0e6;
  --rjl-warning: #a96420;
  --rjl-warning-tint: #f4ebe0;
  --rjl-critical: #8a5019;
  --rjl-critical-tint: #f4ebe0;

  /* ----------------------------------------------------------------------
     SEMANTIC SURFACES
     Components reference these, never the raw ink scale.
     -------------------------------------------------------------------- */
  --rjl-bg: var(--rjl-paper);
  --rjl-bg-sunk: var(--rjl-paper-sunk);
  --rjl-bg-raised: #ffffff;
  --rjl-bg-inverse: var(--rjl-ink-950);

  --rjl-text: var(--rjl-ink-950);
  --rjl-text-muted: var(--rjl-ink-500);
  --rjl-text-faint: var(--rjl-ink-450);
  --rjl-text-inverse: var(--rjl-paper);
  --rjl-text-inverse-muted: var(--rjl-ink-300);

  --rjl-rule: var(--rjl-ink-100);
  --rjl-rule-strong: var(--rjl-ink-200);
  --rjl-rule-inverse: var(--rjl-ink-700);

  /* ----------------------------------------------------------------------
     TYPEFACES

     Helvetica Neue is the brand's primary face. It is not web-licensed for
     this site, so the stack goes Helvetica Neue → Helvetica (macOS/iOS have
     both) → Arial (Windows/Android; metrically matched to Helvetica), with
     no webfont download at all. One family for display, body and numerals.

     Baskerville Italic is the brand's secondary header face. Libre
     Baskerville (Google Fonts, italic 400 only) stands in on machines that
     do not ship Baskerville, and is enqueued in functions.php.
     -------------------------------------------------------------------- */
  --rjl-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rjl-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rjl-font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rjl-font-serif: Baskerville, "Libre Baskerville", "Baskerville Old Face", Georgia, "Times New Roman", serif;

  /* ----------------------------------------------------------------------
     TYPE SCALE — mobile first, fluid to desktop.
     -------------------------------------------------------------------- */
  --rjl-text-2xs:  0.6875rem;
  --rjl-text-xs:   0.75rem;
  --rjl-text-sm:   0.8125rem;
  --rjl-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --rjl-text-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --rjl-text-lg:   clamp(1.1875rem, 1.09rem + 0.45vw, 1.375rem);
  --rjl-text-xl:   clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
  --rjl-text-2xl:  clamp(1.625rem, 1.35rem + 1.35vw, 2.25rem);
  --rjl-text-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --rjl-text-4xl:  clamp(2.5rem, 1.7rem + 3.9vw, 4.25rem);
  --rjl-text-5xl:  clamp(3rem, 1.6rem + 6.8vw, 6.5rem);

  /* WEIGHTS — the brand book uses Light, Regular, Medium and Bold. Nothing
     heavier exists in Helvetica Neue's web fallbacks either, so the two
     heaviest steps both resolve to Bold rather than synthesising. */
  --rjl-weight-light:   300;
  --rjl-weight-regular: 400;
  --rjl-weight-medium:  500;
  --rjl-weight-semi:    600;
  --rjl-weight-bold:    700;
  --rjl-weight-black:   700;
  --rjl-weight-ultra:   700;

  /* LINE HEIGHT — tightens as type grows. */
  --rjl-leading-flat:  0.95;
  --rjl-leading-tight: 1.05;
  --rjl-leading-snug:  1.22;
  --rjl-leading-body:  1.6;
  --rjl-leading-loose: 1.75;

  /* TRACKING — positive throughout, per the brand book (4% on headlines,
     5% on the wordmark). Small caps labels open up further. */
  --rjl-track-display: 0.03em;
  --rjl-track-head:    0.02em;
  --rjl-track-normal:  0;
  --rjl-track-label:   0.08em;
  --rjl-track-mono:    0.01em;
  --rjl-track-wordmark: 0.06em;

  /* MEASURE */
  --rjl-measure: 65ch;
  --rjl-measure-tight: 46ch;

  /* ----------------------------------------------------------------------
     SPACE — 4px-rooted scale
     -------------------------------------------------------------------- */
  --rjl-space-3xs: 0.25rem;
  --rjl-space-2xs: 0.5rem;
  --rjl-space-xs:  0.75rem;
  --rjl-space-sm:  1rem;
  --rjl-space-md:  1.5rem;
  --rjl-space-lg:  2rem;
  --rjl-space-xl:  3rem;
  --rjl-space-2xl: 4rem;
  --rjl-space-3xl: 6rem;
  --rjl-space-4xl: 8rem;

  --rjl-section-y:        clamp(3rem, 2rem + 5vw, 7rem);
  --rjl-section-y-bottom: clamp(3.5rem, 2.2rem + 5.8vw, 8rem);
  --rjl-section-y-tight:  clamp(2rem, 1.4rem + 3vw, 4rem);

  /* ----------------------------------------------------------------------
     MEASUREMENTS
     -------------------------------------------------------------------- */
  --rjl-container:      75rem;
  --rjl-container-wide: 90rem;
  --rjl-container-text: 44rem;
  --rjl-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* RADIUS — the brand is hard-edged geometry. Containers get the barest
     softening; the pill stays for status chips and count badges only. */
  --rjl-radius-none: 0;
  --rjl-radius-xs:   0;
  --rjl-radius-sm:   2px;
  --rjl-radius-md:   4px;
  --rjl-radius-lg:   6px;
  --rjl-radius-pill: 999px;

  /* BORDER */
  --rjl-border:       1px;
  --rjl-border-heavy: 2px;
  --rjl-border-brut:  3px;

  /* ELEVATION */
  --rjl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --rjl-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.07), 0 8px 20px rgba(0, 0, 0, 0.07);
  --rjl-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 20px 44px rgba(0, 0, 0, 0.11);
  --rjl-shadow-accent: 0 3px 10px rgba(169, 100, 32, 0.28);

  /* MOTION */
  --rjl-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --rjl-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --rjl-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --rjl-dur-fast: 140ms;
  --rjl-dur-base: 220ms;
  --rjl-dur-slow: 380ms;

  /* Z-INDEX */
  --rjl-z-base:     0;
  --rjl-z-raised:   10;
  --rjl-z-sticky:   100;
  --rjl-z-header:   200;
  --rjl-z-drawer:   300;
  --rjl-z-overlay:  290;
  --rjl-z-toast:    400;
  --rjl-z-skiplink: 500;

  /* HEADER HEIGHT */
  --rjl-header-h: 60px;
}

@media (min-width: 60em) {
  :root { --rjl-header-h: 76px; }
}

/* --------------------------------------------------------------------------
   INVERSE CONTEXT
   Any element carrying .rjl-inverse reassigns the semantic surface tokens,
   so every component inside it flips to white-on-black.
   ----------------------------------------------------------------------- */
.rjl-inverse {
  --rjl-bg: var(--rjl-ink-950);
  --rjl-bg-sunk: #060606;
  --rjl-bg-raised: var(--rjl-ink-900);
  --rjl-text: var(--rjl-paper);
  --rjl-text-muted: var(--rjl-ink-300);
  --rjl-text-faint: var(--rjl-ink-400);
  --rjl-rule: var(--rjl-ink-700);
  --rjl-rule-strong: var(--rjl-ink-600);

  background-color: var(--rjl-bg);
  color: var(--rjl-text);
}

/* Astra and several plugins set explicit colours on headings, paragraphs
   and links, which beat inherited tokens. So every text-bearing element in
   a dark section is assigned a colour from the paper/ink-100..400 family
   explicitly. Nothing here may use --rjl-text or --rjl-ink-950. */
.rjl-inverse h1, .rjl-inverse h2, .rjl-inverse h3,
.rjl-inverse h4, .rjl-inverse h5, .rjl-inverse h6,
.rjl-inverse .rjl-h1, .rjl-inverse .rjl-h4,
.rjl-inverse .rjl-display,
.rjl-inverse .entry-title,
.rjl-inverse .rjl-lyric__text,
.rjl-inverse blockquote,
.rjl-inverse strong,
.rjl-inverse b,
.rjl-inverse dt {
  color: var(--rjl-paper);
}

.rjl-inverse,
.rjl-inverse p,
.rjl-inverse li,
.rjl-inverse dd,
.rjl-inverse td,
.rjl-inverse figcaption,
.rjl-inverse .rjl-prose,
.rjl-inverse .rjl-lede,
.rjl-inverse .rjl-fact__value,
.rjl-inverse .rjl-contact__value,
.rjl-inverse .rjl-section-head__text,
.rjl-inverse .rjl-post-card__excerpt,
.rjl-inverse .rjl-journal-entry__excerpt,
.rjl-inverse .rjl-empty__text,
.rjl-inverse .rjl-tier__list li {
  color: var(--rjl-ink-200);
}

.rjl-inverse small,
.rjl-inverse .rjl-label,
.rjl-inverse .rjl-numeric,
.rjl-inverse .rjl-post-meta,
.rjl-inverse .rjl-journal-entry__tag,
.rjl-inverse .rjl-space-link__note,
.rjl-inverse .rjl-tier__period,
.rjl-inverse .rjl-footer__blurb,
.rjl-inverse .rjl-post-nav__label,
.rjl-inverse cite,
.rjl-inverse .rjl-lyric__attr,
.rjl-inverse th,
.rjl-inverse .rjl-footer__bottom,
.rjl-inverse .rjl-empty__icon {
  color: var(--rjl-ink-300);
}

/* Accent on black: #a96420 on #000 measures 5.0:1, clears AA for body
   text, so the accent is used directly inside dark sections. */
.rjl-inverse .rjl-label--accent,
.rjl-inverse .rjl-space-link__num,
.rjl-inverse .rjl-hub-card__num,
.rjl-inverse .rjl-journal-entry__date,
.rjl-inverse .rjl-brand__tagline,
.rjl-inverse .rjl-section-head__label,
.rjl-inverse .rjl-hero__label {
  color: var(--rjl-accent);
}

/* Links inside dark sections. */
.rjl-inverse a { color: var(--rjl-ink-200); }
.rjl-inverse a:hover { color: var(--rjl-paper); }
.rjl-inverse .rjl-prose a { color: var(--rjl-paper); text-decoration-color: var(--rjl-accent); }
.rjl-inverse .rjl-prose a:hover { color: var(--rjl-accent); }

.rjl-inverse svg { color: inherit; }

.rjl-inverse hr,
.rjl-inverse td,
.rjl-inverse th { border-color: var(--rjl-ink-700); }

/* Buttons inside dark sections. */
.rjl-inverse .rjl-btn--outline {
  color: var(--rjl-paper);
  border-color: rgba(255, 255, 255, 0.55);
}
.rjl-inverse .rjl-btn--outline:hover {
  background: var(--rjl-paper);
  color: var(--rjl-ink-950);
  border-color: var(--rjl-paper);
}
.rjl-inverse .rjl-btn--quiet { color: var(--rjl-ink-300); }
.rjl-inverse .rjl-btn--quiet:hover { color: var(--rjl-paper); }
.rjl-inverse .rjl-btn--solid {
  background: var(--rjl-paper);
  border-color: var(--rjl-paper);
  color: var(--rjl-ink-950);
}
.rjl-inverse .rjl-btn--solid:hover {
  background: var(--rjl-accent);
  border-color: var(--rjl-accent);
  color: var(--rjl-on-accent);
}
.rjl-inverse .rjl-btn--primary { color: var(--rjl-on-accent); }

.rjl-inverse .rjl-input {
  color: var(--rjl-ink-950);
}

/* Cards that carry their own light surface inside a dark section reset the
   semantic tokens so they do not end up light-on-light. */
.rjl-inverse .rjl-tier,
.rjl-inverse .rjl-facts {
  --rjl-text: var(--rjl-ink-950);
  --rjl-text-muted: var(--rjl-ink-500);
  --rjl-text-faint: var(--rjl-ink-400);
  color: var(--rjl-ink-950);
}
.rjl-inverse .rjl-tier h1, .rjl-inverse .rjl-tier h2, .rjl-inverse .rjl-tier h3,
.rjl-inverse .rjl-tier h4, .rjl-inverse .rjl-tier h5,
.rjl-inverse .rjl-facts .rjl-fact__value {
  color: var(--rjl-ink-950);
}
.rjl-inverse .rjl-tier p,
.rjl-inverse .rjl-tier li,
.rjl-inverse .rjl-facts p { color: var(--rjl-ink-500); }
.rjl-inverse .rjl-facts .rjl-label,
.rjl-inverse .rjl-tier .rjl-label { color: var(--rjl-ink-500); }

.rjl-inverse .rjl-hub-card,
.rjl-inverse .rjl-hub-card .rjl-hub-card__name { color: var(--rjl-paper); }
.rjl-inverse .rjl-hub-card .rjl-hub-card__note { color: var(--rjl-ink-200); }

/* --------------------------------------------------------------------------
   GRAIN — a trace of noise on large flat black bands so they do not band on
   cheap panels. Chrome (header, drawer) excluded.
   ----------------------------------------------------------------------- */
.rjl-inverse:not(.rjl-header):not(.rjl-drawer)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: var(--rjl-z-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}