/* ==========================================================================
   GRAND THEFT AMERICA — design tokens
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE THE DESIGN WORK NEEDS TO TOUCH.
   Every colour, face, size, rhythm and duration in the site resolves here.
   No other stylesheet contains a literal colour, a font name, or a duration.
   ========================================================================== */

:root {

  /* --- Paper and ink — one ground across the whole publication ---------- */
  --paper:      #F4F1E9;   /* warm paper, never #fff                       */
  --paper-2:    #E8E3D8;   /* second sheet                                 */
  --paper-hi:   #FAF8F2;   /* lifted paper                                 */
  --ink:        #110D08;   /* warm near-black, never #000                  */
  --ink-2:      rgba(17, 13, 8, .62);
  --ink-3:      rgba(17, 13, 8, .40);
  --rule:       rgba(17, 13, 8, .25);
  --rule-2:     rgba(17, 13, 8, .12);

  /* --- Status colour. One meaning each, publication-wide. --------------- */
  --red:    #8F1D1A;   /* POWER TAKEN, active capture                      */
  --gold:   #B08A22;   /* MONEY MOVED, a financial amount                  */
  --green:  #246B47;   /* MONEY RECEIVED / cash                            */
  --blue:   #2C6EA7;   /* A guardrail holding / interface utility           */

  --red-deep:   #681311;
  --gold-deep:  #7B6418;

  --red-bright:  #A92823;   /* material and illustration only              */
  --gold-bright: #E5B94E;   /* material and illustration only              */

  /* --red-bright reads at only 2.78:1 on --ink — too dark to use as TEXT on
     a dark section (it's a material/illustration colour, per above). This
     is the lightened equivalent for that one case: red accent text sitting
     on --ink, e.g. .home-argument .power-line. 5.09:1 on --ink.           */
  --red-onink:   #D65C56;

  /* Green is NOT a Money identity colour. Money is gold plus horizontal
     currency material. Green belongs to agency everywhere, including icons. */

  /* Per-desk accent. Set by .t-money / .t-power, read by everything else. */
  --accent:      var(--ink);
  --accent-mat:  var(--ink);   /* the desk's material colour               */
  --accent-deep: var(--ink);

  /* --- Type — four roles, no more ---------------------------------------
     THE BOUNDARY: Space Grotesk NAMES the thing. Newsreader SAYS the thing.
       --display  structure and identity — wordmarks, desk H1s, section
                  titles, figures, labels. Furniture.
       --editorial  claims about the world — record headlines, deks, brief
                  headlines, essay titles. Assertions.
       --body     interface and running text.
       --mono     evidence — dates, amounts, serials, verification stamps.
     -------------------------------------------------------------------- */
  --display:   "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --editorial: "Newsreader", Georgia, serif;
  --serif:     var(--editorial); /* compatibility alias for existing pages */
  /* Inter, deliberately, for now. Dropping it to match The Real Steal's three families was
     attempted 2026-09-01 and reverted: Inter is declared in ~20 places across three
     independent stylesheet systems (money/style.css, power/assets/brand.css,
     tracker-shell.css) plus five embed widgets, so changing this token alone left the
     shared pages on Space Grotesk while both desks stayed on Inter — a worse split inside
     one site than the one it was fixing. See audits/2026-09-01 finding 4 for the real
     scope. */
  --body:      "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  1rem;                                   /* body floor: 16px   */
  --step-1:  clamp(1.15rem, 1.08rem + .3vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.28rem + .9vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.2vw, 4rem);
  --step-4:  clamp(3rem, 1.9rem + 5vw, 8rem);
  --lede:    clamp(1.15rem, 1rem + .8vw, 1.75rem);
  --leading-body: 1.5;

  /* --- Space ------------------------------------------------------------ */
  --xs: 4px;  --sm: 8px;  --md: 12px; --base: 16px;
  --lg: 24px; --xl: 32px; --2xl: 48px; --3xl: 64px; --4xl: 96px;

  --gutter:  clamp(16px, 5vw, 32px);
  --section: clamp(48px, 8vw, 96px);
  --max:     1180px;
  --measure: 34rem;

  /* --- The shared bar rhythm --------------------------------------------
     Money courses and Power bars use ONE thickness and ONE period, so the
     two wordmarks and the two chart grammars are visibly siblings. Set in
     em so the rhythm scales with whatever it sits in.
     -------------------------------------------------------------------- */
  --bar-thick:  .13em;
  --bar-period: .26em;

  /* --- Material --------------------------------------------------------- */
  --grain-dot:  rgba(15, 11, 6, .055);
  --grain-size: 5px;
  --hairline: 1px solid var(--rule);
  --heavy:    2px solid var(--ink);

  /* --- Motion — one curve, three durations ------------------------------ */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  180ms;
  --dur-base:  340ms;
  --dur-slow:  700ms;

  /* --- Focus — blue, 3px, offset ---------------------------------------- */
  --focus:        3px solid var(--blue);
  --focus-offset: 3px;
  --target-min:   44px;
}

/* Money builds horizontally, in courses. Gold means money moved. */
.t-money { --accent: var(--gold); --accent-mat: var(--gold-bright); }

/* Power builds vertically, in bars. Red means power taken. */
.t-power { --accent: var(--red);  --accent-mat: var(--red-bright); }

.t-money { --accent-deep: var(--gold-deep); }
.t-power { --accent-deep: var(--red-deep); }