/* ══════════════════════════════════════════════════
   TOKENS — the JSX-side handle on the design system.

   IMPORTANT: this file holds NO color values. Every entry
   is a pointer (`var(--x)`) into the :root block in
   css/styles.css, which is the single source of truth.
   There is nothing here that can drift out of sync.

   Two escape hatches, both deliberate:

   • HEX — real values, used ONLY where CSS var() is illegal.
     `var()` in an SVG *presentation attribute* (fill="…",
     stroke="…") fails SILENTLY: the shape renders as if the
     attribute were unset. Prefer stroke="currentColor" on
     icons, or style={{fill:T.x}} (fill IS a real CSS
     property, so var() works there). HEX is the last resort,
     used by MiniRouteMap where dozens of shapes take a flat
     attribute.

   • alpha() — for the handful of places that need a
     translucent brand color. The old code did `${col}22`
     string concatenation, which cannot work with var().
══════════════════════════════════════════════════ */

const T = {
  cream:      'var(--cream)',
  cream2:     'var(--cream-2)',
  surface:    'var(--surface)',
  line:       'var(--line)',
  lineStrong: 'var(--line-strong)',

  ink:        'var(--ink)',
  inkSoft:    'var(--ink-soft)',
  muted:      'var(--muted)',

  brand:      'var(--brand)',
  brandDeep:  'var(--brand-deep)',
  brandTint:  'var(--brand-tint)',

  green:      'var(--green)',   greenTint:  'var(--green-tint)',
  blue:       'var(--blue)',    blueTint:   'var(--blue-tint)',
  amber:      'var(--amber)',   amberTint:  'var(--amber-tint)',
  red:        'var(--red)',     redTint:    'var(--red-tint)',
  violet:     'var(--violet)',  violetTint: 'var(--violet-tint)',
  cyan:       'var(--cyan)',    cyanTint:   'var(--cyan-tint)',

  wa:         'var(--wa)',

  rChip: 'var(--r-chip)', rCard: 'var(--r-card)', rBtn: 'var(--r-btn)',
  rPhone: 'var(--r-phone)', rPill: 'var(--r-pill)',

  shCard: 'var(--sh-card)', shCardHover: 'var(--sh-card-hover)', shPhone: 'var(--sh-phone)',
};

/* Raw values — SVG presentation attributes only. Keep this list minimal;
   if you are reaching for it outside an SVG attribute, use T instead. */
const HEX = {
  cream:   '#FBF7F1',
  cream2:  '#F5F0E8',
  surface: '#FFFFFF',
  line:    '#ECE5DB',
  ink:     '#2A2724',
  muted:   '#6F6862',
  brand:   '#E11D48',
  green:   '#0E9F6F',
  /* map palette — needs more contrast than the page surfaces */
  mapBg:   '#EAE3D6',
  road:    '#FBF7F1',
  block:   '#DCD2BF',
  block2:  '#D4C9B3',   /* every third block, so the grid doesn't read as wallpaper */
  park:    '#CBDCC0',   /* the occasional green square that says "city", not "texture" */
};

/* Translucent variant of a token, replacing the old `${color}22` concat.
   color-mix is supported in Chrome 111+, Safari 16.4+, Firefox 113+. */
const alpha = (token, pct) => `color-mix(in srgb, ${token} ${pct}%, transparent)`;