:root {
  --sl-surface-page: #030913;
  --sl-surface-panel: rgba(8, 18, 33, .82);
  --sl-surface-panel-soft: rgba(15, 32, 54, .72);
  --sl-surface-glass: rgba(255, 255, 255, .075);
  --sl-line-soft: rgba(133, 177, 222, .22);
  --sl-line-focus: rgba(255, 255, 255, .14);
  --sl-ink: #f8fbff;
  --sl-muted: #9fb0c3;
  --sl-warm: #fff8df;
  --sl-action-primary: linear-gradient(135deg, #1f6cff, #ff4e78);
  --sl-action-soft: linear-gradient(180deg, #fff8df, #e7fbff);
  --sl-state-safe: #63e6b8;
  --sl-state-warn: #ffb05f;
  --sl-state-danger: #ff4e78;
  --sl-state-info: #83c7ff;
  --sl-radius-card: 8px;
  --sl-radius-control: 999px;
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 20px;
  --sl-shadow-panel: 0 20px 56px rgba(0, 0, 0, .22);
  --sl-focus-ring: 0 0 0 3px rgba(255, 248, 223, .22);
  --sl-bottom-nav-height: 62px;
  --sl-bottom-nav-clearance: calc(var(--sl-bottom-nav-height) + 34px + env(safe-area-inset-bottom));

  --ink: var(--sl-ink);
  --muted: var(--sl-muted);
  --line: var(--sl-line-soft);
  --panel: var(--sl-surface-panel);
  --panel-soft: var(--sl-surface-panel-soft);
  --mint: var(--sl-state-safe);
  --pink: var(--sl-state-danger);
  --peach: var(--sl-state-warn);
  --blue: var(--sl-state-info);
}

:where(button, input, textarea, select, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--sl-focus-ring);
}

.app-shell {
  padding-bottom: var(--sl-bottom-nav-clearance);
}

.bottom-nav {
  padding-bottom: max(7px, env(safe-area-inset-bottom));
}