/* Heart Language Live – shared tokens */
:root {
  /* Wycliffe Bible Translators UK – observed from wycliffe.org.uk (red #D0112A, yellow #FCDA46, orange #EE7D21, teal #259992, charcoal #41414A) */
  --night: #6d0a1b;        /* deep wine: Wycliffe red, dimmed for projection */
  --night-2: #82101f;
  --deep: #D0112A;         /* Wycliffe red */
  --deep-d: #A50E22;       /* pressed / hover red (observed #BB1026 family) */
  --saffron: #FCDA46;      /* Wycliffe yellow (tags, highlights) */
  --saffron-d: #C9A400;    /* darker gold for shadows/borders */
  --orange: #EE7D21;
  --teal: #259992;
  --cream: #F7F4EF;
  --paper: #FFFFFF;
  --ink: #2B2B31;
  --charcoal: #41414A;
  --grey: #676974;
  --terra: #EE7D21;
  --good: #2e9e5b;
  --bad: #E8444F;
  --font-display: 'Figtree', 'Nunito', 'Noto Sans Bengali', Helvetica, Arial, sans-serif;
  --font-body: 'Figtree', 'Nunito', 'Noto Sans Bengali', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.emblem { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.logo { width: 1.6em; height: 1.6em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* timers */
.timer { display: flex; align-items: center; gap: .6em; font-variant-numeric: tabular-nums; }
.timer .t-num { font-family: var(--font-display); font-weight: 800; min-width: 1.6em; text-align: center; }
.timer .t-bar { flex: 1; height: .45em; background: rgba(127,127,127,.25); border-radius: 99px; overflow: hidden; min-width: 5rem; }
.timer .t-bar i { display: block; height: 100%; background: var(--saffron); border-radius: 99px; transform-origin: left; }
.timer.urgent .t-bar i { background: var(--bad); }
.timer.urgent .t-num { color: var(--bad); animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.18); } }

/* brand details */
em, .em { font-style: italic; }
.logo { height: 2.4em; width: auto; flex: none; display: block; }
/* Wycliffe-style slanted button: the background is a skewed plate, the label stays upright */
.btn { position: relative; isolation: isolate; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg, var(--deep)); transform: skewX(-9deg); border-radius: 4px; box-shadow: 0 4px 0 var(--btn-sh, var(--deep-d)); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: none !important; }
.btn:active::before { transform: skewX(-9deg) translateY(3px); box-shadow: 0 1px 0 var(--btn-sh, var(--deep-d)); }
.btn.saffron { --btn-bg: var(--saffron); --btn-sh: var(--saffron-d); color: #1d1d1f; }
.btn.ghost { color: var(--deep); }
.btn.ghost::before { background: transparent; box-shadow: inset 0 0 0 2px var(--deep); }
.btn.dark { --btn-bg: rgba(255,255,255,.14); --btn-sh: rgba(0,0,0,.25); }