/* Base colors */
:root {
  --bg-light: #2c2c2c; /* charcoal */
  --bg-dark: #1a1a1a;
  --text: #ffffff;
  --accent: #d1f86b; /* bright lime */
}

html[data-theme="light"] { background: var(--bg-light); color: var(--text); }
html[data-theme="dark"]  { background: var(--bg-dark);  color: var(--text); }

body { margin:0; font-family:system-ui, sans-serif; line-height:1.5; }
.header { text-align:center; padding:2rem 1rem; }
.label { display:block; font-size:0.75rem; letter-spacing:0.1em; margin-bottom:0.5rem; }
.headline { font-size:2rem; margin:0.5rem 0; }
.button { background: var(--accent); color: #000; border:none; padding:0.5rem 1rem; cursor:pointer; font-weight:600; border-radius:4px; }
.button:focus-visible { outline: 2px solid #fff; outline-offset:2px; }

.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; padding:1rem; }
.card { background: rgba(255,255,255,0.1); padding:1rem; flex:1 1 200px; max-width:300px; border-radius:6px; }
.card h2 { margin-top:0; color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset:2px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}

/* Simple transition for theme change */
html { transition: background 0.3s ease, color 0.3s ease; }