/* Motyw React: granat z react.dev, cyjan akcentu, siatka kropek w hero,
   zaokrąglone karty. Logo Reacta nie używamy. */
:root[data-theme="react"] {
  color-scheme: dark;
  --bg: #23272F; --bg-2: #343A46; --fg: #F6F7F9; --muted: #A9B1C2; --border: #3e4552;
  --accent: #58C4DC; --accent-fg: #0b1a21; --accent-soft: rgba(88,196,220,.16);
  --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35);
}
:root[data-theme="react"] code { background: #1b1f26; color: #58C4DC; }
:root[data-theme="react"] .hero { background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0) 0 0 / 22px 22px,
  radial-gradient(ellipse at 70% 30%, rgba(88,196,220,.14), transparent 55%); }
:root[data-theme="react"] .hero-photo-main img { border: 3px solid rgba(88,196,220,.5); }
:root[data-theme="react"] .stat-v { color: #58C4DC; }
:root[data-theme="react"] .demo { background: #1b1f26; --accent-text: #58C4DC; }
:root[data-theme="react"] .demo-root { background: #23272F; }
:root[data-theme="react"] .top { background: rgba(35,39,47,.85); }