@import url("colors_and_type.css");

/* Force dark theme on the deck */
:root {
  --ta-primary: rgb(1 97 239);
  --ta-secondary: rgb(1 84 207);
  --ta-accent: rgb(109 40 217);
  --ta-text-default: rgb(229 236 246);
  --ta-text-heading: rgb(247, 248, 248);
  --ta-text-muted: rgb(229 236 246 / 66%);
  --ta-bg-page: rgb(3 6 32);
  --ta-bg-card: rgb(15 23 42);
  --ta-border-default: rgb(100 116 139);
  --ta-border-muted: rgb(30 41 59);
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: var(--ta-font-sans);
  color: var(--ta-text-default);
  -webkit-font-smoothing: antialiased;
}

deck-stage section {
  background: var(--ta-bg-page);
  color: var(--ta-text-default);
  font-family: var(--ta-font-sans);
  overflow: hidden;
  box-sizing: border-box;
}

/* Slide-frame defaults */
.slide-pad {
  padding: 100px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.surtitle {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(147 197 253); /* blue-300 */
}

.surtitle.violet { color: rgb(196 181 253); /* violet-300 */ }

.slide-num {
  position: absolute;
  bottom: 48px;
  right: 60px;
  font-size: 24px;
  font-weight: 500;
  color: rgb(229 236 246 / 35%);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.brand-mark {
  position: absolute;
  bottom: 48px;
  left: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgb(229 236 246 / 55%);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand-mark .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ta-primary);
}

/* Highlight treatments */
.hl-violet { color: rgb(167 139 250); /* violet-400 */ font-weight: 700; }
.hl-blue { color: rgb(96 165 250); /* blue-400 */ font-weight: 700; }
.hl-white { color: var(--ta-text-heading); font-weight: 700; }

/* Reusable bits */
.kicker {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(96 165 250);
}

.muted { color: var(--ta-text-muted); }

/* Section divider */
.section-bar {
  width: 96px;
  height: 4px;
  background: var(--ta-primary);
  border-radius: 2px;
}

.section-bar.violet { background: var(--ta-accent); }

/* Card */
.card {
  background: var(--ta-bg-card);
  border: 1px solid var(--ta-border-muted);
  border-radius: 12px;
  padding: 32px;
}

/* Pause sigil */
.pause-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ta-accent);
  vertical-align: middle;
  margin: 0 12px;
}