function TokensSection() {
  const spacing = [
    { name: '--bd-s-1', rem: '0.25rem', w: 4 },
    { name: '--bd-s-2', rem: '0.5rem',  w: 8 },
    { name: '--bd-s-3', rem: '0.75rem', w: 12 },
    { name: '--bd-s-4', rem: '1rem',    w: 16 },
    { name: '--bd-s-5', rem: '1.5rem',  w: 24 },
    { name: '--bd-s-6', rem: '2rem',    w: 32 },
    { name: '--bd-s-7', rem: '3rem',    w: 48 },
    { name: '--bd-s-8', rem: '4rem',    w: 64 },
  ];
  const radii = [
    { name: '--bd-r-sm',   rem: '0.375rem', px: 6 },
    { name: '--bd-r-md',   rem: '0.625rem', px: 10 },
    { name: '--bd-r-lg',   rem: '0.875rem', px: 14 },
    { name: '--bd-r-xl',   rem: '1.375rem', px: 22 },
    { name: '--bd-r-full', rem: '999px',    px: 999 },
  ];
  const shadows = [
    { name: '--bd-shadow-sm', spec: '0 1px 2px rgba(0,9,69,0.06)',  css: '0 1px 2px rgba(0,9,69,0.06)' },
    { name: '--bd-shadow-md', spec: '0 6px 18px rgba(0,9,69,0.18)', css: '0 6px 18px -6px rgba(0,9,69,0.18)' },
    { name: '--bd-shadow-lg', spec: '0 30px 60px rgba(0,9,69,0.30)', css: '0 30px 60px -20px rgba(0,9,69,0.30)' },
  ];

  return (
    <section id="tokens" data-screen-label="04 Tokens">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>04</b> &nbsp;/&nbsp; Tokens</div>
          <div>
            <h2 className="h1">Space.<br/>Radii.<br/>Shadow.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The geometric vocabulary of the interface. All sizes in rem, so they scale with the root. Use named tokens — never magic numbers.
            </p>
          </div>
        </div>

        {/* Spacing */}
        <div className="eyebrow" style={{ marginBottom: 12 }}>// spacing</div>
        <div className="token-grid" style={{ marginBottom: 32 }}>
          {spacing.map(s => (
            <div className="token" key={s.name}>
              <div className="preview">
                <div className="space-bar" style={{ width: s.w }}/>
              </div>
              <div>
                <div className="name">{s.name}</div>
                <div className="value">{s.rem} · {s.w} px @ desktop</div>
              </div>
            </div>
          ))}
        </div>

        {/* Radii */}
        <div className="eyebrow" style={{ marginBottom: 12 }}>// radii</div>
        <div className="token-grid" style={{ marginBottom: 32 }}>
          {radii.map(r => (
            <div className="token" key={r.name}>
              <div className="preview">
                <div className="radius-box" style={{ borderRadius: r.px === 999 ? '999px' : r.px }}/>
              </div>
              <div>
                <div className="name">{r.name}</div>
                <div className="value">{r.rem}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Shadows */}
        <div className="eyebrow" style={{ marginBottom: 12 }}>// shadows</div>
        <div className="token-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {shadows.map(sh => (
            <div className="token" key={sh.name} style={{ background: 'var(--paper-2)' }}>
              <div className="preview" style={{ background: 'transparent', height: 100 }}>
                <div className="shadow-card" style={{ boxShadow: sh.css }}/>
              </div>
              <div>
                <div className="name">{sh.name}</div>
                <div className="value">{sh.spec}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.TokensSection = TokensSection;