<div class="pd-wrap" id="pdWrap">
  <div class="pd-header">
    <h2>Design tokens</h2>
    <label class="pd-switch">
      <input type="checkbox" id="pdToggle" />
      <span class="pd-switch-track"><span class="pd-switch-thumb"></span></span>
      <span class="pd-switch-label">Dark mode</span>
    </label>
  </div>

  <div class="pd-swatches">
    <div class="pd-swatch"><span class="pd-swatch-color" style="background:var(--pd-surface)"></span>Surface</div>
    <div class="pd-swatch"><span class="pd-swatch-color" style="background:var(--pd-text)"></span>Text</div>
    <div class="pd-swatch"><span class="pd-swatch-color" style="background:var(--pd-border)"></span>Border</div>
    <div class="pd-swatch"><span class="pd-swatch-color" style="background:var(--pd-accent)"></span>Accent</div>
  </div>

  <div class="pd-components">
    <button class="pd-btn">Primary button</button>
    <div class="pd-card">
      <h3>Sample card</h3>
      <p>Every color here reads from a shared set of custom properties.</p>
    </div>
    <input class="pd-input" type="text" placeholder="Sample input" />
  </div>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f1f5f9; margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.pd-wrap {
  width: 100%; max-width: 420px; border-radius: 18px; padding: 26px;
  background: var(--pd-page); border: 1px solid var(--pd-border);
  --pd-page: #ffffff; --pd-surface: #f8fafc; --pd-text: #1e293b; --pd-border: #e2e8f0; --pd-accent: #4f46e5; --pd-muted: #64748b;
  transition: background 0.2s, border-color 0.2s;
}
@media (prefers-color-scheme: dark) {
  .pd-wrap:not([data-theme="light"]) { --pd-page: #0f172a; --pd-surface: #1e293b; --pd-text: #f1f5f9; --pd-border: #334155; --pd-accent: #818cf8; --pd-muted: #94a3b8; }
}
.pd-wrap[data-theme="dark"] { --pd-page: #0f172a; --pd-surface: #1e293b; --pd-text: #f1f5f9; --pd-border: #334155; --pd-accent: #818cf8; --pd-muted: #94a3b8; }

.pd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pd-header h2 { margin: 0; font-size: 15px; color: var(--pd-text); }

.pd-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pd-switch input { display: none; }
.pd-switch-track { width: 38px; height: 22px; background: var(--pd-border); border-radius: 999px; position: relative; transition: background 0.2s; }
.pd-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.pd-switch input:checked + .pd-switch-track { background: var(--pd-accent); }
.pd-switch input:checked + .pd-switch-track .pd-switch-thumb { transform: translateX(16px); }
.pd-switch-label { font-size: 12.5px; font-weight: 700; color: var(--pd-muted); }

.pd-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.pd-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--pd-muted); }
.pd-swatch-color { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--pd-border); }

.pd-components { display: flex; flex-direction: column; gap: 12px; }
.pd-btn { background: var(--pd-accent); color: #fff; border: none; padding: 10px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.pd-card { background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: 12px; padding: 16px; }
.pd-card h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--pd-text); }
.pd-card p { margin: 0; font-size: 12px; color: var(--pd-muted); line-height: 1.6; }
.pd-input { background: var(--pd-surface); border: 1.5px solid var(--pd-border); color: var(--pd-text); padding: 10px 12px; border-radius: 9px; font-size: 13px; font-family: inherit; }
.pd-input::placeholder { color: var(--pd-muted); }

var wrap = document.getElementById('pdWrap');
var toggle = document.getElementById('pdToggle');

var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
toggle.checked = prefersDark;
wrap.setAttribute('data-theme', prefersDark ? 'dark' : 'light');

toggle.addEventListener('change', function () {
  wrap.setAttribute('data-theme', toggle.checked ? 'dark' : 'light');
});