/* ==========================================================================
   base.css — Reset, dark/light palette, body, theme bar (no layout mode)
   Layout typography and scales live in src/themes/<id>/runner.css | admin.css
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0d0f12;
  --fg: #e8e6e3;
  --fg-h: #ffffff;

  --a70: rgba(255, 255, 255, .7);
  --a60: rgba(255, 255, 255, .6);
  --a50: rgba(255, 255, 255, .5);
  --a40: rgba(255, 255, 255, .4);
  --a35: rgba(255, 255, 255, .35);
  --a30: rgba(255, 255, 255, .3);
  --a25: rgba(255, 255, 255, .25);
  --a20: rgba(255, 255, 255, .2);
  --a15: rgba(255, 255, 255, .15);
  --a10: rgba(255, 255, 255, .1);
  --a08: rgba(255, 255, 255, .08);
  --a06: rgba(255, 255, 255, .06);
  --a05: rgba(255, 255, 255, .05);
  --a04: rgba(255, 255, 255, .04);
  --a03: rgba(255, 255, 255, .03);

  --acc:    #00d4aa;
  --acc-fg: #0d0f12;
  --acc-bg: rgba(0, 212, 170, .08);
  --acc-bd: rgba(0, 212, 170, .2);
  --acc-hl: rgba(0, 212, 170, .15);

  --svgbg: #0d0f12;
}

[data-theme=light] {
  --bg: #f8f7f5;
  --fg: #1a1a1a;
  --fg-h: #0d0f12;

  --a70: rgba(0, 0, 0, .65);
  --a60: rgba(0, 0, 0, .55);
  --a50: rgba(0, 0, 0, .5);
  --a40: rgba(0, 0, 0, .4);
  --a35: rgba(0, 0, 0, .35);
  --a30: rgba(0, 0, 0, .35);
  --a25: rgba(0, 0, 0, .25);
  --a20: rgba(0, 0, 0, .18);
  --a15: rgba(0, 0, 0, .15);
  --a10: rgba(0, 0, 0, .12);
  --a08: rgba(0, 0, 0, .1);
  --a06: rgba(0, 0, 0, .09);
  --a05: rgba(0, 0, 0, .06);
  --a04: rgba(0, 0, 0, .05);
  --a03: rgba(0, 0, 0, .04);

  --acc:    #008f72;
  --acc-fg: #ffffff;
  --acc-bg: rgba(0, 143, 114, .08);
  --acc-bd: rgba(0, 143, 114, .2);
  --acc-hl: rgba(0, 143, 114, .12);

  --svgbg: #f8f7f5;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff, system-ui, sans-serif);
  min-height: 100vh;
  transition: background .25s, color .25s;
}

#thBar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  gap: 6px;
}

#thBar button {
  background: var(--a08);
  border: 1px solid var(--a10);
  border-radius: 8px;
  color: var(--a50);
  padding: 7px 11px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}

#thBar button:hover {
  color: var(--fg);
  border-color: var(--a25);
}
/* Runner layout: legacy (Crimson Pro, compact scale) */

[data-mode=legacy] {
  --ff: 'Crimson Pro', Georgia, serif;
  --s11: 11px;
  --s12: 12px;
  --s13: 13px;
  --s14: 14px;
  --s15: 15px;
  --s16: 16px;
  --s18: 18px;
  --s20: 20px;
  --s22: 22px;
  --s36: 36px;
  --s80: 80px;
}

[data-mode=legacy] #root {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

[data-mode=legacy] .abtn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 10px;
  background: var(--a03);
  border: 1px solid var(--a08);
  border-radius: 10px;
  color: var(--fg);
  font-size: var(--s15);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
  line-height: 1.5;
}

[data-mode=legacy] .abtn:hover {
  background: var(--a06);
  border-color: var(--a15);
}

[data-mode=legacy] .obtn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 10px;
  background: var(--a03);
  border: 1px solid var(--a08);
  border-radius: 10px;
  color: var(--fg);
  font-size: var(--s15);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
  line-height: 1.5;
}

[data-mode=legacy] .obtn:hover {
  background: var(--a06);
  border-color: var(--a15);
}

[data-mode=legacy] .dkbtn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--a08);
  border-radius: 10px;
  color: var(--a40);
  font-size: var(--s14);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  font-style: italic;
}

[data-mode=legacy] .dkbtn:hover {
  border-color: var(--a25);
}

[data-mode=legacy] .sbtn {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: var(--s13);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

[data-mode=legacy] .sbtn:hover {
  opacity: .85;
}

[data-mode=legacy] .ff {
  margin-bottom: 16px;
}

[data-mode=legacy] .ff label {
  font-size: var(--s11);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--a40);
  display: block;
  margin-bottom: 4px;
}

[data-mode=legacy] .ff input,
[data-mode=legacy] .ff select,
[data-mode=legacy] .ff textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--a05);
  border: 1px solid var(--a10);
  border-radius: 8px;
  color: var(--fg);
  font-size: var(--s14);
  font-family: inherit;
  box-sizing: border-box;
}
/* Runner layout: modern (Play, larger scale) */

[data-mode=modern] {
  --ff: 'Play', sans-serif;
  --s11: 12px;
  --s12: 13px;
  --s13: 14px;
  --s14: 16px;
  --s15: 17px;
  --s16: 18px;
  --s18: 20px;
  --s20: 22px;
  --s22: 24px;
  --s36: 42px;
  --s80: 90px;
}

[data-mode=modern] #root {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

[data-mode=modern] .abtn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 10px;
  background: var(--a03);
  border: 1px solid var(--a08);
  border-radius: 10px;
  color: var(--fg);
  font-size: var(--s15);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
  line-height: 1.5;
}

[data-mode=modern] .abtn:hover {
  background: var(--a06);
  border-color: var(--a15);
}

[data-mode=modern] .obtn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 10px;
  background: var(--a03);
  border: 1px solid var(--a08);
  border-radius: 10px;
  color: var(--fg);
  font-size: var(--s15);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
  line-height: 1.5;
}

[data-mode=modern] .obtn:hover {
  background: var(--a06);
  border-color: var(--a15);
}

[data-mode=modern] .dkbtn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--a08);
  border-radius: 10px;
  color: var(--a40);
  font-size: var(--s14);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  font-style: italic;
}

[data-mode=modern] .dkbtn:hover {
  border-color: var(--a25);
}

[data-mode=modern] .sbtn {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: var(--s13);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

[data-mode=modern] .sbtn:hover {
  opacity: .85;
}

[data-mode=modern] .ff {
  margin-bottom: 16px;
}

[data-mode=modern] .ff label {
  font-size: var(--s11);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--a40);
  display: block;
  margin-bottom: 4px;
}

[data-mode=modern] .ff input,
[data-mode=modern] .ff select,
[data-mode=modern] .ff textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--a05);
  border: 1px solid var(--a10);
  border-radius: 8px;
  color: var(--fg);
  font-size: var(--s14);
  font-family: inherit;
  box-sizing: border-box;
}