/*
 * Design tokens — Eco-Markets, from the Figma Website Module Library.
 *
 * Every value below is a Figma VARIABLE, not a colour picked off a screenshot,
 * so this file is the single point of contact between the design and the build.
 *
 * ⚠️ The greyscale wireframe palette this replaces is kept at
 * _tokens.wireframe.css.bak. Nothing else in the theme carries a hex literal,
 * which is why swapping the design in is one file.
 */

:root {
  /* ── Brand · Figma variables, verbatim ───────────────────────────────── */
  --c-primary-purple: #21032E;
  --c-bright-purple:  #944ABD;
  --c-blue:           #001C47;
  --c-teal:           #002936;
  --c-maroon:         #3D1214;
  --c-brown:          #382617;

  --c-light-blue:     #B8DBFC;
  --c-light-teal:     #C7EBD6;
  --c-light-maroon:   #EDD1C9;
  --c-light-brown:    #E5DBC7;
  --c-white:          #FFFFFF;

  /* ── Type ────────────────────────────────────────────────────────────── */
  /*
   * PP Fragment is SELF-HOSTED — see inc/fonts.php for the @font-face rules
   * and why they are emitted from PHP rather than written here.
   *
   * ⚠️ Only Glare REGULAR has been supplied; the frames specify Glare LIGHT.
   * Titles currently render in the real face one weight step heavier than
   * drawn.
   *
   * "Fraunces" has been dropped from this stack. It was listed as the stand-in
   * but was never actually loaded, so until now every PP Fragment title on the
   * site was really rendering in Georgia.
   */
  --font-display: "PP Fragment", ui-serif, Georgia, serif;
  --font-body:    "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-light:  300;
  /*
   * THE DISPLAY FACE SHIPS AS REGULAR (400). Every frame specifies PP Fragment
   * Glare LIGHT, and only Glare Regular was licensed. Collective Objective's
   * call, 17 Sep: use Regular rather than buy the extra weight. So the display
   * face asks for the weight we actually have — a rule asking for 300 leaves
   * the browser to substitute, and some platforms would synthesise a fake one.
   */
  --fw-display: 400;
  --fw-normal: 400;
  --fw-medium: 500;
  /* ⚠️ --fw-bold was USED by the methodology table header and never
     DEFINED, so var(--fw-bold) resolved to nothing and the header
     inherited Light 300 where the frame sets Figtree Bold. A crosscheck
     of computed styles against the frame values is what surfaced it —
     it is invisible to a structural audit and easy to miss by eye. */
  --fw-bold:   700;

  /*
   * The Figma variables give Heading and Body Copy `lineHeight: 100`, which is
   * a Figma unit artefact rather than a ratio — taken literally, 18px body copy
   * would set at 18px leading and be unreadable. Primary Heading carries a real
   * 1.25. These are the working values; ⚠️ confirm with Dean.
   */
  /* The 45px statements (hero 677:875, large statement 677:1038) both set
     leading-[normal] — Figtree's own metrics, ~1.2 — not the 1.1 guessed here
     earlier. At 1.1 a four-line statement closed up noticeably. */
  --lh-display: 1.2;
  --lh-heading: 1.25;
  --lh-body:    1.55;

  /* Type scale, anchored on the design's 45px heading and 18px body. */
  --t-display:  clamp(2.25rem, 4.4vw, 3.5rem);
  --t-h2:       clamp(1.75rem, 3.2vw, 2.8125rem);  /* 45px */
  --t-h3:       clamp(1.25rem, 2vw, 1.5rem);
  --t-body:     1.125rem;                          /* 18px */
  /* Intro copy is a step above body, so the two read as different (#53). */
  --t-intro:    clamp(1.25rem, 1.7vw, 1.5625rem);  /* 25px */
  --t-small:    0.9375rem;
  --t-eyebrow:  0.8125rem;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  /* The frames are drawn on a 1728px artboard with 50px gutters — a 1628px
     content measure. This box INCLUDES the gutters, so 1728 is the right
     number here. It was 1280, which rendered every module narrower than it
     was drawn and would have cramped the four-across card rows. */
  --content-max: 1728px;
  --gutter:      clamp(1.25rem, 4vw, 3.125rem);   /* 50px at full width, per the frames */
  --module-y:    clamp(3rem, 7vw, 6.75rem);       /* 108px at full width, per the frames */
  --gap:         clamp(1.5rem, 3vw, 2.5rem);
  /*
   * ⚠️ NOT square-cornered. Measured off the frames, the design uses three
   * distinct radii and they are not interchangeable:
   *   5px  rectangular buttons (module CTAs, 1.5px border)
   *   15px cards
   *   33px pill actions inside a card; ~30px the stepper pill
   */
  --r-button:    5px;
  --r-card:      15px;
  --r-pill:      33px;
  --r-media:     10px;
  --border-w:    1.5px;
  /* Button and tag sizes (BugHerd #15, #34, #37 — "tag / button height need to
     be reduced", a general comment). Buttons, table status tags, filter pills
     and tabs all come out 42px tall; rounded lozenge tags are smaller again. */
  --btn-pad:   8px 15px;
  --tag-pad:   5px 12px;
  --tag-size:  14px;
  --frame-inset: 50px;   /* Hero "framed" (683:104) — measured 50, not the 30 guessed */

  --bp-sm: 480px;
  --bp-md: 760px;
  --bp-lg: 1024px;

  /* ── The default colourway ───────────────────────────────────────────── */
  /*
   * Every module paints from these five, and a colourway class overrides them.
   * A module never names a brand colour directly — that is what makes one
   * select in the CMS repaint an entire block.
   */
  --cw-bg:       var(--c-white);
  --cw-ink:      var(--c-primary-purple);
  --cw-ink-soft: color-mix(in srgb, var(--c-primary-purple) 68%, transparent);
  --cw-rule:     color-mix(in srgb, var(--c-primary-purple) 18%, transparent);
  --cw-accent:   var(--c-bright-purple);
  --cw-on-accent:var(--c-white);

  /* Page chrome sits outside any module's colourway. */
  --page-bg:  var(--c-white);
  --page-ink: var(--c-primary-purple);

}

/* ─────────────────────────────────────────────────────────────────────────
 *  COLOURWAYS — one class per version drawn in Figma.
 *
 *  Five light grounds take dark type; five dark grounds take white. Applied to
 *  a module wrapper by the CMS `colourway` select, so an editor picks a version
 *  rather than a designer redrawing a block.
 *
 *  ⚠️ Only the pairings actually drawn in the design are offered. The palette
 *  would permit more, but an untested pairing is a contrast risk, not a
 *  feature.
 * ───────────────────────────────────────────────────────────────────────── */

.cw-white {
  --cw-bg: var(--c-white);
  --cw-ink: var(--c-primary-purple);
  --cw-ink-soft: color-mix(in srgb, var(--c-primary-purple) 68%, transparent);
  --cw-rule: color-mix(in srgb, var(--c-primary-purple) 18%, transparent);
  --cw-accent: var(--c-bright-purple);
  --cw-on-accent: var(--c-white);
}

/*
 * ⚠️ INK ON A LIGHT GROUND IS ALWAYS PRIMARY PURPLE. These each paired a light
 * tint with its own dark sibling — light blue with navy, light teal with deep
 * teal — which was a reasonable guess and is not what the design does. Three
 * independent frames say purple: the card collection (680:1253), the stat
 * cards on light brown (686:1095), and the side-by-side panel on light blue
 * (686:942). The tints are grounds, not a matched pair.
 */
.cw-light-blue   { --cw-bg: var(--c-light-blue);   --cw-ink: var(--c-primary-purple); }
.cw-light-teal   { --cw-bg: var(--c-light-teal);   --cw-ink: var(--c-primary-purple); }
.cw-light-maroon { --cw-bg: var(--c-light-maroon); --cw-ink: var(--c-primary-purple); }
.cw-light-brown  { --cw-bg: var(--c-light-brown);  --cw-ink: var(--c-primary-purple); }

.cw-light-blue, .cw-light-teal, .cw-light-maroon, .cw-light-brown {
  --cw-ink-soft: color-mix(in srgb, var(--cw-ink) 72%, transparent);
  --cw-rule: color-mix(in srgb, var(--cw-ink) 22%, transparent);
  --cw-accent: var(--cw-ink);
  --cw-on-accent: var(--cw-bg);
}

.cw-purple { --cw-bg: var(--c-primary-purple); --cw-accent: var(--c-bright-purple); }
.cw-blue   { --cw-bg: var(--c-blue);   --cw-accent: var(--c-light-blue); }
.cw-teal   { --cw-bg: var(--c-teal);   --cw-accent: var(--c-light-teal); }
.cw-maroon { --cw-bg: var(--c-maroon); --cw-accent: var(--c-light-maroon); }
.cw-brown  { --cw-bg: var(--c-brown);  --cw-accent: var(--c-light-brown); }

.cw-purple, .cw-blue, .cw-teal, .cw-maroon, .cw-brown {
  --cw-ink: var(--c-white);
  --cw-ink-soft: color-mix(in srgb, var(--c-white) 76%, transparent);
  --cw-rule: color-mix(in srgb, var(--c-white) 26%, transparent);
  --cw-on-accent: var(--c-primary-purple);
}

/*
 * ⚠️ THE OUTCOME PALETTE IS NOT IN THE DESIGN.
 *
 * The Content Taxonomy is explicit that an outcome is carried permanently by
 * its standard, so the colour is DATA rather than styling — water, biodiversity,
 * carbon, culture. None of those four appears in the Figma variables.
 *
 * These are the values from `Content Taxonomy in Action`, kept so the mechanism
 * still works and outcome chips still read. They need either a designed
 * equivalent from Collective Objective or an explicit decision to drop them.
 */
:root {
  --outcome-water:   #1d7fae;  --outcome-water-bg:   #e2f1f8;
  --outcome-bio:     #1d9e75;  --outcome-bio-bg:     #e1f5ee;
  --outcome-carbon:  #7f77dd;  --outcome-carbon-bg:  #eeedfe;
  --outcome-culture: #d85a30;  --outcome-culture-bg: #faece7;

  /* The cross-door router still wears the DESTINATION door's colour. The
     design does not draw a router variant — see the build notes. */
  --door-invest:      var(--c-light-teal);
  --door-participate: var(--c-light-maroon);
}

.outcome-water        { --outcome: var(--outcome-water);   --outcome-bg: var(--outcome-water-bg); }
.outcome-biodiversity { --outcome: var(--outcome-bio);     --outcome-bg: var(--outcome-bio-bg); }
.outcome-carbon       { --outcome: var(--outcome-carbon);  --outcome-bg: var(--outcome-carbon-bg); }
.outcome-culture      { --outcome: var(--outcome-culture); --outcome-bg: var(--outcome-culture-bg); }