/* =============================================================
   Dani's Templates — design tokens
   Colour, type and elevation for the simulator chrome, never the stage.
   Shared by every simulator. Edit here and both change together.
   ============================================================= */

:root{
  --room-bg:#eceaea;
  --room-bg-2:#dcd9da;
  --panel:#ffffff;
  --panel-line:rgba(15,14,16,.10);
  --panel-ink:#191719;
  --panel-ink-dim:#6d6870;
  --panel-hover:rgba(15,14,16,.05);
  --accent:#2f6bff;
  --accent-ink:#ffffff;
  --shutter:#f4372f;
  --shadow-lg:0 32px 80px rgba(20,16,24,.28), 0 4px 12px rgba(20,16,24,.12);
  --ui:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --os:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --room-bg:#1a181c; --room-bg-2:#0f0e11;
    --panel:#232028; --panel-line:rgba(255,255,255,.11);
    --panel-ink:#f2f0f4; --panel-ink-dim:#9d97a6;
    --panel-hover:rgba(255,255,255,.07);
    --accent:#7f9dff;
    --shadow-lg:0 32px 90px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --room-bg:#1a181c; --room-bg-2:#0f0e11;
  --panel:#232028; --panel-line:rgba(255,255,255,.11);
  --panel-ink:#f2f0f4; --panel-ink-dim:#9d97a6;
  --panel-hover:rgba(255,255,255,.07);
  --accent:#7f9dff;
  --shadow-lg:0 32px 90px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh;
  background:radial-gradient(120% 90% at 50% 0%, var(--room-bg) 0%, var(--room-bg-2) 100%);
  font-family:var(--ui); color:var(--panel-ink);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} }