/* sidewalk.fm design tokens — see brand/DESIGN.md. Light on :root, dark under the two guards. */
:root {
  --ground-a: #ECE6F7;
  --ground-b: #E6F3EA;
  --ground-c: #F8E6EE;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --hairline: rgba(0, 0, 0, 0.06);
  --shadow: 0 8px 32px rgba(20, 16, 40, 0.08);
  --text: #111114;
  --text-secondary: #6E6E76;
  --accent: #5249E7;
  --live: #34C759;
  --ok: #34C759;
  --gift: #FF9F0A;
  --on-air: #FF3B30;
  --danger: #E5484D;
  /* Fills and the ink that goes on them. A hue token says what a thing means;
     a -fill token is the value that is safe to put type on, and its --on- pair
     is the only foreground that belongs there. The two differ wherever the hue
     is too light to carry white: green and orange always, red and the dark
     accent per theme. Ratios in the comments are measured against the fill. */
  --accent-fill: #5249E7;  /* white 6.06:1 */
  --on-accent: #FFFFFF;
  --live-fill: #34C759;    /* ink 8.49:1 */
  --on-live: #111114;
  --live-ink: #15803D;     /* green type on the light ground, 4.45:1 */
  --danger-fill: #C8272C;  /* white 5.55:1 */
  --on-danger: #FFFFFF;
  --gift-fill: #FF9F0A;    /* ink 9.17:1 */
  --on-gift: #111114;
  --r-pill: 999px;
  --r-card: 28px;
  --r-inner: 18px;
  --blur: blur(24px) saturate(140%);
  --font: "Nunito", -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground-a: #1A1726;
    --ground-b: #151C18;
    --ground-c: #241820;
    --glass: rgba(28, 28, 34, 0.62);
    --glass-strong: rgba(28, 28, 34, 0.82);
    --hairline: rgba(255, 255, 255, 0.08);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --text: #F4F3F8;
    --text-secondary: #A2A1AB;
    --accent: #7A6FF0;
    --live: #30D158;
    --ok: #30D158;
    --gift: #FFB340;
    --on-air: #FF453A;
    --danger: #FF6369;
    --accent-fill: #5E51E4;  /* white 5.57:1; --accent stays lighter for type */
    --on-accent: #FFFFFF;
    --live-fill: #30D158;    /* ink 9.32:1 */
    --on-live: #111114;
    --live-ink: #30D158;     /* green type on the dark ground, 8.00:1 */
    --danger-fill: #FF6369;  /* ink 6.50:1 */
    --on-danger: #111114;
    --gift-fill: #FFB340;    /* ink 10.57:1 */
    --on-gift: #111114;
  }
}
:root[data-theme="dark"] {
  --ground-a: #1A1726;
  --ground-b: #151C18;
  --ground-c: #241820;
  --glass: rgba(28, 28, 34, 0.62);
  --glass-strong: rgba(28, 28, 34, 0.82);
  --hairline: rgba(255, 255, 255, 0.08);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --text: #F4F3F8;
  --text-secondary: #A2A1AB;
  --accent: #7A6FF0;
  --live: #30D158;
  --ok: #30D158;
  --gift: #FFB340;
  --danger: #FF6369;
  --accent-fill: #5E51E4;  /* white 5.57:1; --accent stays lighter for type */
  --on-accent: #FFFFFF;
  --live-fill: #30D158;    /* ink 9.32:1 */
  --on-live: #111114;
  --live-ink: #30D158;     /* green type on the dark ground, 8.00:1 */
  --danger-fill: #FF6369;  /* ink 6.50:1 */
  --on-danger: #111114;
  --gift-fill: #FFB340;    /* ink 10.57:1 */
  --on-gift: #111114;
}
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  background: linear-gradient(135deg, var(--ground-a) 0%, var(--ground-b) 50%, var(--ground-c) 100%) fixed;
}
.glass { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); box-shadow: var(--shadow); border-radius: var(--r-card); }
.glass-strong { background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hairline); box-shadow: var(--shadow); border-radius: var(--r-card); }
.btn-icon { width: 44px; height: 44px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--glass-strong); border: 1px solid var(--hairline); color: var(--text); cursor: pointer; transition: transform 120ms var(--ease), background 120ms var(--ease); }
.btn-icon:active { transform: scale(0.96); }
.btn-icon.active { background: var(--accent-fill); color: var(--on-accent); }
.btn-pill { height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--hairline); color: var(--text); font: 500 16px var(--font); cursor: pointer; }
.btn-pill.primary { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; border-color: transparent; }
.btn-pill.live { background: var(--live-fill); color: var(--on-live); font-weight: 600; border-color: transparent; }
.input { height: 48px; padding: 0 20px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--hairline); color: var(--text); font: 400 16px var(--font); }
.display { font: 400 34px/1.15 var(--font); letter-spacing: -0.5px; text-wrap: balance; }
.title { font: 500 22px/1.2 var(--font); letter-spacing: -0.3px; }
.caption { font: 400 12px/1.4 var(--font); letter-spacing: 0.2px; color: var(--text-secondary); }
.label { font: 500 11px/1 var(--font); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); display: inline-block; }
.dot.live { background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 25%, transparent); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }