function ColorSection() {
  const tokens = [
    { name: 'Ink', role: 'Primary · brand', hex: '#000945', rgb: '0 · 9 · 69', cmyk: '100 · 98 · 38 · 46', light: false },
    { name: 'Signal Blue', role: 'Accent · interaction', hex: '#3645d3', rgb: '54 · 69 · 211', cmyk: '100 · 89 · 3 · 0', light: false },
    { name: 'Electric', role: 'Highlight · sparingly', hex: '#5b6cff', rgb: '91 · 108 · 255', cmyk: '64 · 58 · 0 · 0', light: false },
    { name: 'Paper', role: 'Background · light', hex: '#fafaf7', rgb: '250 · 250 · 247', cmyk: '2 · 1 · 4 · 0', light: true },
    { name: 'Paper 2', role: 'Surface · light', hex: '#f1f1ec', rgb: '241 · 241 · 236', cmyk: '5 · 3 · 7 · 0', light: true },
    { name: 'Stone', role: 'Borders · meta', hex: '#d8d8d8', rgb: '216 · 216 · 216', cmyk: '14 · 10 · 11 · 0', light: true },
  ];

  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">A two-tone system.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Boolland is built on <b>Ink</b> (deep navy) and <b>Signal Blue</b> — true to the original brand, refined for screen. Everything else supports. Two themes: light by default, dark when the moment calls for it.
            </p>
          </div>
        </div>

        {/* Tokens */}
        <div className="grid-3" style={{ marginBottom: 24 }}>
          {tokens.map(t => (
            <div key={t.hex} 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" style={{ marginTop: 4 }}>{t.name}</div>
                </div>
                <div className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: '0.08em' }}>{t.hex}</div>
              </div>
              <div className="codes">
                <div><b>RGB</b>{t.rgb}</div>
                <div><b>CMYK</b>{t.cmyk}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Themes */}
        <div className="section-head" style={{ marginTop: 80, marginBottom: 24 }}>
          <div className="id"><b>03.1</b> &nbsp;/&nbsp; Themes</div>
          <div>
            <h2 className="h2">Light & dark, equally first-class.</h2>
            <p className="lede" style={{ marginTop: 12 }}>The brand reads correctly in both modes. Use light for marketing, documents, and daylight surfaces; dark for app UI, hero moments, and night surfaces.</p>
          </div>
        </div>

        <div className="grid-2">
          <div className="theme-block">
            <div className="label">light · default</div>
            <Lockup height={36} color="#000945"/>
            <div style={{ marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['#000945','#3645d3','#5b6cff','#fafaf7','#f1f1ec','#d8d8d8'].map(c => (
                <div key={c} style={{ width: 36, height: 36, borderRadius: 8, background: c, border: c.startsWith('#fa')||c.startsWith('#f1')||c.startsWith('#d8') ? '1px solid var(--line)' : 'none' }}/>
              ))}
            </div>
            <div style={{ marginTop: 24, padding: 20, background: '#f1f1ec', borderRadius: 12 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>// example</div>
              <div style={{ fontSize: 28, letterSpacing: '-0.02em', fontWeight: 700, marginTop: 6, lineHeight: 1.1 }}>We code your <span style={{ color: '#3645d3' }}>vision.</span></div>
              <div style={{ marginTop: 12, padding: '8px 14px', background: '#000945', color: '#fafaf7', display: 'inline-block', borderRadius: 999, fontSize: 13, fontFamily: 'Roboto Mono', letterSpacing: '0.06em' }}>start a project →</div>
            </div>
          </div>

          <div className="theme-block dark">
            <div className="label">dark · alt</div>
            <Lockup height={36} color="#fafaf7"/>
            <div style={{ marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['#fafaf7','#5b6cff','#3645d3','#0a1657','#000945','rgba(250,250,247,0.1)'].map(c => (
                <div key={c} style={{ width: 36, height: 36, borderRadius: 8, background: c, border: c === 'rgba(250,250,247,0.1)' ? '1px solid rgba(250,250,247,0.2)' : 'none' }}/>
              ))}
            </div>
            <div style={{ marginTop: 24, padding: 20, background: 'rgba(250,250,247,0.06)', borderRadius: 12, border: '1px solid rgba(250,250,247,0.08)' }}>
              <div className="mono" style={{ fontSize: 11, opacity: 0.5 }}>// example</div>
              <div style={{ fontSize: 28, letterSpacing: '-0.02em', fontWeight: 700, marginTop: 6, lineHeight: 1.1 }}>We code your <span style={{ color: '#5b6cff' }}>vision.</span></div>
              <div style={{ marginTop: 12, padding: '8px 14px', background: '#5b6cff', color: '#000945', display: 'inline-block', borderRadius: 999, fontSize: 13, fontFamily: 'Roboto Mono', letterSpacing: '0.06em', fontWeight: 500 }}>start a project →</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ColorSection = ColorSection;