/* COPY of design/v2/tokens.css — that file is the source; change it there and re-copy.
   The docroot must be self-contained: design/ sits above site/public and is unreachable. */
/* ============================================================================
   losses — design tokens v2
   ----------------------------------------------------------------------------
   Rebuilt from scratch, one agreed rule at a time (started 2026-07-17).
   Nothing carries over from design/tokens.css unless it is re-admitted here.
   ============================================================================ */

@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../assets/fonts/figtree.woff2") format("woff2");
}

:root{
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* ---- ground ---- */
  --bg:#FFFFFF;         /* page ground is white */

  /* ---- type colours (approved) ---- */
  --ink:#1A1A18;        /* text     */
  --grey:#6B665C;       /* captions */

  /* ---- hairlines (approved via the border hierarchy) ---- */
  --line:#D8D2C4;       /* section rule            */
  --line-soft:#E3DED1;  /* inner rows, table rows  */

  /* ---- kept for future use — no assigned function yet.
     Functions get decided as components demand them. ---- */
  --plaster:#F4F1EA;
  --stone:#EAE4D8;

  /* ---- primary: Sindoor vermilion (confirmed) ----
     Label tick, links, focus ring, the wordmark slash's level-mark (D21 —
     the wordmark letters themselves are ink, see wordmark.html).
     (The band and the pull-quote border draw the display gradient instead.)
     Type and line only — never an area fill on its own. */
  --sindoor:#C1362F;

  /* ---- gradients ----
     display: fenced to >=24px / weight 800+, headline figure and display
              headings ONLY. Ends at amber 2.15:1 on white — a knowing trade. The
              100deg angle is load-bearing: dark end on the leading digits;
              light-to-dark is a bug.
     fill:    buttons — the SAME gradient. White label text must sit in the
              dark half; on the amber end white is 2.15:1. Keep labels short.
     rule:    vertical strips (pull-quote left border) — same stops, dark→amber
              top-to-bottom. The 100deg display angle reads solid on a 3px-wide
              strip because only the dark edge slice shows; a rule needs to vary
              down its height, so it gets its own to-bottom gradient. */
  --heat-2:#E5A455;
  --heat-3:#DC7038;
  --heat-5:#8E2A22;

  /* ---- cold (added 2026-08-13) ----
     The ONE hue outside the sindoor/heat family, and it exists for one job: the cold
     end of a temperature scale, where the heat stops have nothing to say. 5.79:1 on
     white — deliberately chosen into the same contrast band as sindoor (5.47) and
     grey (5.71), so it reads as a sibling of the palette rather than an import.
     The two paler stops are the waypoints a scale passes THROUGH on its way to
     amber, and they are not decoration: interpolating #2C6B92 straight to amber in
     sRGB spends three degrees in a teal (#87918F at 12 C, measured), and this
     palette has no green in it. Lifting red early via --cold-soft, then landing on
     a warm sand rather than a neutral grey, closes that window completely.
     Both are scale stops for a 3px stroke, never type: 3.21:1 and 2.03:1 on white,
     the same knowing trade --heat-2 makes at 2.15:1. */
  --cold:#2C6B92;
  --cold-soft:#7E92A6;
  --cold-pale:#C2B4A0;
  --grad-display:linear-gradient(100deg,var(--heat-5) 0,var(--heat-3) 55%,var(--heat-2) 100%);
  --grad-fill:var(--grad-display);
  --grad-rule:linear-gradient(to bottom,var(--heat-5) 0,var(--heat-3) 55%,var(--heat-2) 100%);
  --grad-fill-hover:linear-gradient(100deg,#7D251E 0,#C5602F 55%,#D6953F 100%);

  --track-label:.15em;

  /* ---- type scale — ONE weight per level ---- */
  --display-1:clamp(2.5rem,8vw,5.5rem);   /* 800 · -.02em · 1.05 */
  --display-2:clamp(2rem,5vw,3rem);       /* 800 · -.02em · 1.1  */

  /* ---- the band — em-based; shrinks as type grows ---- */
  --band:.22em;

  /* ---- layout ---- */
  --maxw:1140px;        /* page max width — contained, never full-width */
  --col:66ch;           /* body measure                                 */
  --stack-s:8px;        /* label to value                               */
  --stack-m:16px;       /* within a node                                */
  --stack-l:28px;       /* between nodes                                */
  /* The stack is the ONLY spacing primitive — do not grow it into a
     12-step scale. Everything else is judged white space. */
}

/* ============================================================================
   FLAT. No border-radius, no drop shadows. The only permitted box-shadow is
   an inset used as a border substitute. Structure comes from hairlines and
   white space — nothing floats.

   Border hierarchy:
     2px solid var(--ink)        major division (masthead, report header)
     1px solid var(--line)       section rule
     1px solid var(--line-soft)  inner rows — every table divider
     3px gradient (--grad-display via border-image)   pull-quote left border
   ============================================================================ */

/* type scale */
.d1{font-size:var(--display-1);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.d2{font-size:var(--display-2);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.bd{font-size:16px;font-weight:400;line-height:1.6;max-width:66ch}
.em{font-size:16px;font-weight:500}

/* the ruled label — section marker */
.label{
  font-size:11px;font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--grey);
  display:flex;align-items:center;gap:10px;
}
.label::before{content:"";width:26px;height:2px;background:var(--sindoor);flex:none}

/* figures — every number in losses is tabular */
.fig{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* display gradient — >=24px bold display only, never body/cells/labels/links */
.grad{
  background-image:var(--grad-display);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  width:fit-content;
}
.grad .unit{-webkit-text-fill-color:var(--grey);color:var(--grey)}

/* primary action — gradient fill, white text */
.btn-primary{
  background-image:var(--grad-fill);
  color:#fff;border:0;
  font-family:var(--sans);font-weight:800;
  padding:12px 22px;
  cursor:pointer;
}
.btn-primary:hover{background-image:var(--grad-fill-hover)}

/* the band — drawn in the display gradient */
.band{
  background-image:var(--grad-display);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% var(--band);
  padding-bottom:.02em;
}
.d1 .band{--band:.055em}
.d2 .band{--band:.11em}

/* container & stack */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media(max-width:720px){.wrap{padding:0 20px}}
.stack{display:flex;flex-direction:column}
.stack.s{gap:var(--stack-s)}
.stack.m{gap:var(--stack-m)}
.stack.l{gap:var(--stack-l)}