function UIColorSection() {
  const tokens = [
    { name: 'Ink',      role: 'Primary · text & brand', hex: '#000945', light: false },
    { name: 'Ink 2',    role: 'Hover · pressed states', hex: '#0a1657', light: false },
    { name: 'Signal',   role: 'Action · links · focus', hex: '#3645d3', light: false },
    { name: 'Electric', role: 'Highlight · accent',    hex: '#5b6cff', light: false },
    { name: 'Paper',    role: 'Background · canvas',   hex: '#fafaf7', light: true },
    { name: 'Paper 2',  role: 'Surface · raised',      hex: '#f1f1ec', light: true },
    { name: 'Line',     role: 'Borders · dividers',    hex: '#e6e6e0', light: true },
    { name: 'Muted',    role: 'Captions · meta text',  hex: '#6b6b65', light: false },
  ];
  const status = [
    { name: 'Success', role: 'Confirmations',      hex: '#0a8a4f', light: false },
    { name: 'Warning', role: 'Cautions · pending', hex: '#c87800', light: false },
    { name: 'Danger',  role: 'Errors · destructive', hex: '#c43a3a', light: false },
    { name: 'Info',    role: 'Notices · neutral signal', hex: '#3645d3', light: false },
  ];

  const SwatchCard = ({ t }) => (
    <div className={`swatch ${t.light ? 'outline' : ''}`} style={{ background: t.hex, color: t.light ? '#000945' : '#fafaf7' }}>
      <div className="top">
        <div>
          <div className="role">{t.role}</div>
          <div className="name">{t.name}</div>
        </div>
        <div className="mono" style={{ fontSize: 11, opacity: 0.7 }}>{t.hex}</div>
      </div>
      <div className="codes">
        <div><b>token</b>--bd-{t.name.toLowerCase().replace(' ', '-')}</div>
      </div>
    </div>
  );

  return (
    <section id="color" data-screen-label="03 Color">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>03</b> &nbsp;/&nbsp; Color</div>
          <div>
            <h2 className="h1">UI tokens.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The brand colours, mapped to interface roles. Use the token name in code — never the raw hex. Tokens make theme-swapping (dark mode, future palettes) free.
            </p>
          </div>
        </div>

        <div className="eyebrow" style={{ marginBottom: 12 }}>// surface & ink</div>
        <div className="g4" style={{ marginBottom: 32 }}>
          {tokens.map(t => <SwatchCard key={t.hex+t.name} t={t}/>)}
        </div>

        <div className="eyebrow" style={{ marginBottom: 12 }}>// status</div>
        <div className="g4">
          {status.map(t => <SwatchCard key={t.hex+t.name} t={t}/>)}
        </div>
      </div>
    </section>
  );
}

window.UIColorSection = UIColorSection;