/* ==========================================================================
   Pillar Forward Consulting — design tokens
   Gold on midnight navy. Blue sits nearly opposite gold on the wheel, so the
   metal reads brighter here than it did on black, and navy carries "considered
   professional" in a way a pure black never quite does.
   Every colour, size and motion value in the project comes from here.
   ========================================================================== */

:root {
  /* --- surfaces -----------------------------------------------------------
     Deep navy. The first attempt at this held the lightness of the old blacks
     exactly, on the theory that contrast could then not move. It could not —
     but neither could the colour: blue ended up 13 points above red on a
     0-255 scale, and the whole site still read as black. A hue needs some
     lightness to live in.

     So these sit a step up from where the blacks were. Blue is now 30 above
     red and the navy is visible, and the cost of that lift was exactly two
     values: --dim and --danger, each nudged just enough to stay above 4.5:1.
     Everything else had 6:1 or better headroom and did not move.

     If you re-ground the site again, that is the thing to check: the tightest
     pair is always --dim against --surface-2. */
  --bg: #081426;
  --bg-1: #0c1a2f;
  --surface: #12243c;
  --surface-2: #1c304c;
  --surface-3: #263c5c;

  /* --- lines ------------------------------------------------------------- */
  --line: #24374f;
  --line-2: #33496b;
  --line-bright: #4a6890;

  /* --- type -------------------------------------------------------------- */
  --text: #eceef2;
  --text-2: #c2c6cf;
  --muted: #949aa6;
  /* The dimmest tier still has to be readable. It carries real copy
     (disclaimers, price notes, table headers), not decoration, so it is held
     above the 4.5:1 minimum on every surface above while staying visibly
     dimmer than --muted. */
  --dim: #9097a5;

  /* --- accents -----------------------------------------------------------
     Three colours, one rule each, so colour carries meaning instead of
     decoration:

       GOLD    the brand, and everything you can act on — buttons, links,
               focus rings, eyebrows, the logo. Sampled straight out of the
               Pillar Forward mark: #f9d48c highlight, #dcaf5f body,
               #be8d41 shadow.
       GREEN   money, and only money — prices, rates, revenue figures, the
               proof numbers. This is what puts "revenue" in the visual
               language rather than leaving it to the copy.
       ORANGE  caution worth reading — disclaimers, caveats, warnings. It is
               deliberately a different hue from the brand gold; when the
               warning colour and the button colour are the same, neither
               means anything.

     Keep it to these. The moment green shows up on something that isn't a
     number about money, it stops meaning anything.
     ----------------------------------------------------------------------- */
  --accent: #dcaf5f;
  --accent-light: #f9d48c;
  --accent-deep: #be8d41;
  --accent-dim: rgba(220, 175, 95, 0.12);
  --accent-line: rgba(220, 175, 95, 0.32);
  /* Bare channels so one-off rgba()s can be built from the same colour instead
     of hard-coding the brand in a dozen shadows. */
  --accent-rgb: 220, 175, 95;
  /* Text sitting ON a gold fill. Near-black with a warm cast so the button
     doesn't look like two unrelated colours stacked. */
  --on-accent: #17120a;

  --revenue: #2ed898;
  --revenue-dim: rgba(46, 216, 152, 0.12);
  --revenue-line: rgba(46, 216, 152, 0.32);
  --revenue-rgb: 46, 216, 152;

  --amber: #ff8a3d;
  --amber-dim: rgba(255, 138, 61, 0.12);

  /* Positive states in the console share the revenue green — profit, cleared
     payments and "money in" are the same idea, so they read as the same colour. */
  --good: var(--revenue);
  --danger: #ff6158;

  /* --- typography -------------------------------------------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ------------------------------------------------------------------------
     SIZING

     Overall size is controlled in ONE place: the `html { font-size }` rule at
     the top of site.css (and admin.css). That behaves exactly like browser
     zoom, because every length below — and every hard-coded size in the
     component styles — is in rem and therefore measured against it. Change
     that one percentage to resize the entire site; nothing here needs editing.

     On top of that global reduction, the display sizes and the vertical rhythm
     are pulled in further than body copy is. Oversized headlines and enormous
     section padding are what made the pages feel zoomed in — body text was
     only slightly large, and it has a floor below which it stops being
     readable. Measured at a 1280px viewport:

       body copy      17.4px -> 13.6px   (78%)
       card titles      23px -> 18px     (78%)
       section titles 49.6px -> 28.8px   (58%)
       hero headline   102px -> 48px     (47%)
       section gap     144px ->  58px    (40%)
       card padding   33.6px ->  21px    (62%)
     ------------------------------------------------------------------------ */

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.24rem, 1.1rem + 0.62vw, 1.83rem);
  --step-3: clamp(1.5rem, 1.24rem + 1.02vw, 2.31rem);
  --step-4: clamp(1.75rem, 1.3rem + 1.85vw, 3.05rem);
  --step-5: clamp(2rem, 1.35rem + 2.6vw, 3.85rem);

  /* --- space ------------------------------------------------------------- */
  --gap-xs: 0.4rem;
  --gap-sm: 0.68rem;
  --gap: 1.07rem;
  --gap-lg: 1.8rem;
  --gap-xl: 2.9rem;
  --section: clamp(2.6rem, 1.8rem + 3.4vw, 4.65rem);

  /* Deliberately NOT in rem. Holding the content column at a fixed pixel width
     while everything inside it shrinks is what produces the zoomed-out look,
     rather than just uniformly smaller pages. */
  --container: 1180px;
  /* Card padding lives here because more than one selector needs the exact
     same value. A .card that also carries a list class has to restate it, and
     a second hand-typed clamp() is how cards end up with mismatched insets. */
  --card-pad: clamp(1.2rem, 0.96rem + 0.8vw, 1.68rem);
  --radius: 0.8rem;
  --radius-sm: 0.56rem;
  --radius-lg: 1.28rem;

  /* Chrome sized off the same root, so it zooms with everything else. */
  --nav-h: 3.85rem;
  --logo-h: 2.08rem;

  /* --- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 160ms;
  --mid: 320ms;
  --slow: 700ms;

  /* --- depth ------------------------------------------------------------- */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
  --glow: 0 0 0 1px var(--accent-line), 0 0 34px rgba(var(--accent-rgb), 0.18);
  --glow-revenue: 0 0 0 1px var(--revenue-line), 0 0 34px rgba(var(--revenue-rgb), 0.14);
  /* The brushed-metal ramp used on the logo mark and the primary button. */
  --gold-sheen: linear-gradient(145deg, var(--accent-light) 0%, var(--accent) 45%, var(--accent-deep) 100%);
}

/* Respect people who don't want motion. Everything still works, it just lands
   instantly instead of animating. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}