/* ============================================================
   UBG Design Tokens — Layer 1
   Direction: "Payroll Register" — the program lives inside a
   paycheck, so the site is built out of the paycheck's own
   materials: ledger paper, hairline rules, tabular figures.
   RULE: the ONLY file in which raw hex / magic values appear.
   ============================================================ */
:root {
  /* ---- Core palette ---------------------------------------
     ink     : ledger ink, near-black with a green cast
     ledger  : deep accounting green — money retained
     oxide   : red-oxide — money withheld / leaving to the IRS
     bar     : greenbar tint, alternating register rows ONLY
     paper   : cool page stock (deliberately not warm cream)
     Semantics are load-bearing: oxide always means outflow,
     ledger always means retained. Never used decoratively.  */
  --ink:         #17211D;
  --ink-soft:    #3A4642;
  --ink-mute:    #566059;
  --ink-faint:   #636C66;

  --ledger:      #1E4A3C;
  --ledger-mid:  #2C6853;
  --ledger-pale: #E6EFE9;

  --oxide:       #A6412C;
  --oxide-pale:  #F5E7E3;

  --paper:       #FAFAF7;
  /* Dark background fill. Kept separate from --ink (the text colour)
     so dark surfaces can remap the ink ramp without recolouring
     their own background. */
  --surface-ink: #17211D;
  /* Light chip fill for use ON dark surfaces (buttons, tags).
     Not remapped, so it stays light wherever it lands. */
  --surface-bar: #E7ECE5;
  --paper-deep:  #F1F2EC;
  --bar:         #E4EDE4;
  --white:       #FFFFFF;
  --rule:        #CBD3CB;
  --rule-soft:   #E1E6E0;

  /* ---- On-ink (dark surface) text system ---- */
  --on-ink-strong: rgba(250,250,247,0.94);
  --on-ink-body:   rgba(250,250,247,0.70);
  --on-ink-mute:   rgba(250,250,247,0.58);
  --on-ink-faint:  rgba(250,250,247,0.50);
  --on-ink-rule:   rgba(250,250,247,0.18);

  /* ---- Typography ----
     serif : Source Serif 4 — a document face for a document subject
     sans  : Source Sans 3 — its designed companion, for reading
     mono  : IBM Plex Mono — every figure on this site is tabular  */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans:  'Source Sans 3', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Layout ---- */
  --max-w:      1180px;
  --max-w-text: 660px;
  --pad-x:      44px;
  --section-pad: 104px;
  --rail:       152px;   /* the register's label column */
  --col-gap:    64px;

  /* ---- Radius: near-zero, but not zero. Paper has soft corners. ---- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  /* ---- Motion ---- */
  --ease:      0.24s cubic-bezier(.2,.6,.35,1);
  --ease-slow: 0.7s cubic-bezier(.2,.6,.35,1);

  /* ---- Elevation: minimal. This is paper on paper. ---- */
  --lift: 0 1px 0 var(--rule), 0 10px 28px -18px rgba(23,33,29,0.45);
  --lift-nav: 0 1px 0 var(--rule-soft);
}

@media (max-width: 1000px) { :root { --pad-x: 32px; --col-gap: 40px; --rail: 120px; } }
@media (max-width: 620px)  { :root { --pad-x: 20px; --section-pad: 68px; } }