/* ==========================================================================
   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              */

  /* 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 */
  --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); }